（8）ECMAScript語法詳解

本系列教程目錄：Vue3+Element Plus全套學習筆記-目錄大綱

文章目錄

第2章 ECMAScript
- 2.1 ECMAScript 的發展歷史
- 2.2 什么是ES6
- 2.3 ES6語法新特性
- - 2.3.1 變量聲明let
  - 2.3.2 常量聲明
  - 2.3.3 模板字符串
  - 2.3.4 函數默認參數
  - 2.3.5 箭頭函數
  - 2.3.6 對象初始化簡寫
  - 2.3.7 解構
  - 2.3.8 Spread Operator
  - 2.3.9 import 和 export
  - - 1）安裝babel
    - 2）使用import和export

第2章 ECMAScript

ECMAScript 是一種由 Ecma 國際（Ecma International，前身為歐洲計算機制造商協會），在標準 ECMA-262 中定義的腳本語言規范。這種語言在萬維網上應用廣泛，它往往被稱為 JavaScript 或 JScript，但實際上后兩者是 ECMA-262 標準的實現和擴展。

這種語言在萬維網上應用廣泛，被視為網頁瀏覽器中的核心語言。ECMAScript 的發展歷程中，經歷了多個版本的更新和演進。下面我們將逐一介紹這些版本。

盡管 JavaScript 和 JScript 與 ECMAScript 兼容，但包含超出 ECMAScript 的功能。

2.1 ECMAScript 的發展歷史

版本	發表日期	與前版本的差異
1	1997年6月	首版
2	1998年6月	格式修正，以使得其形式與ISO/IEC16262國際標準一致
3	1999年12月	新增強大的正則表達式，更好的詞法作用域鏈處理，新的控制指令，異常處理，錯誤定義更加明確，數據輸出的格式化及其它改變
4	放棄	由于關于語言的復雜性出現分歧，第4版本被放棄。其中的部分成為了第5版本及Harmony的基礎；由ActionScript實現
ES5	2009年12月	新增“嚴格模式（strict mode）”，一個子集用作提供更徹底的錯誤檢查,以避免結構出錯。澄清了許多第3版本的模糊規范，并適應了與規范不一致的真實世界實現的行為。增加了部分新功能，如getters及setters，支持JSON以及在對象屬性上更完整的反射
5.1	2011年6月	ECMAScript標5.1版形式上完全一致于國際標準ISO/IEC 16262:2011。
ES6	2015年6月	ECMAScript 2015（ES2015），第 6 版，最早被稱作是 ECMAScript 6（ES6）。作為最早的 ECMAScript Harmony 版本，也被叫做ES6 Harmony。
7	2016年6月	ECMAScript 2016（ES2016），第 7 版，多個新的概念和語言特性
8	2017年6月	ECMAScript 2017（ES2017），第 8 版，多個新的概念和語言特性
9	2018年6月	ECMAScript 2018 （ES2018），第 9 版，包含了異步循環，生成器，新的正則表達式特性和 rest/spread 語法。
10	2019年6月	ECMAScript 2019 （ES2019），第 10 版
11	2020年6月	ECMAScript 2020 （ES2020），第 11 版
12	2021年	ECMAScript 2021 （ES2021），第 12 版
13	2022年	ECMAScript 2022 （ES2022），第 13 版
14	2023年	ECMAScript 2023 （ES2023），第 14 版

ECMAScript官網：https://ecma-international.org/publications-and-standards/standards/ecma-262/

2.2 什么是ES6

編程語言JavaScript是ECMAScript的實現和擴展。ECMAScript是由ECMA（一個類似W3C的標準組織）參與進行標準化的語法規范。

ECMAScript標準不定義HTML或CSS的相關功能，也不定義類似DOM（文檔對象模型）的[Web API]，這些都在獨立的標準中進行定義。ECMAScript涵蓋了各種環境中JS的使用場景，無論是瀏覽器環境還是類似[node.js]的非瀏覽器環境。

ECMAScript標準的歷史版本分別是1、2、3、5。

那么為什么沒有第4版？其實，在過去確實曾計劃發布提出巨量新特性的第4版，但最終卻因想法太過激進而慘遭廢除（這一版標準中曾經有一個極其復雜的支持泛型和類型推斷的內建靜態類型系統）。

ES4飽受爭議，當標準委員會最終停止開發ES4時，其成員同意發布一個相對謙和的ES5版本，隨后繼續制定一些更具實質性的新特性。這一明確的協商協議最終命名為“Harmony”，因此，ES5規范中包含這樣兩句話：ECMAScript是一門充滿活力的語言，并在不斷進化中。未來版本的規范中將持續進行重要的技術改進。

ECMAScript 6.0（以下簡稱ES6）2015年6月正式發布。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

ES6的特性比較多，在 ES5 發布近 6 年（2009-11 至 2015-6）之后才將其標準化。兩個發布版本之間時間跨度很大，所以ES6中的特性比較多。在這里列舉幾個常用的：

類
模塊化
箭頭函數
函數參數默認值
模板字符串
解構賦值
延展操作符
對象屬性簡寫
Promise
Let與Const

2.3 ES6語法新特性

2.3.1 變量聲明let

我們都是知道在ES6以前，var關鍵字聲明變量。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變量提升例如

function show(flag){if(flag){var test="hello";}console.log(test);
}show(true)

以上的代碼實際上是:

function show(flag){var test;		//變量提升if(flag){test="hello";}console.log(test);
}show(true)

所以不用關心flag是否為true or false。實際上，無論如何test都會被創建聲明。

接下來ES6主角登場：

我們通常用let和const來聲明，let表示變量、const表示常量。let和const都是塊級作用域。怎么理解這個塊級作用域？在一個函數內部，在一個代碼塊內部。看以下代碼

function show(flag){if(flag){// var test="hello";let test='hello';}//在這里訪問不到console.log(test)
}
show(true)

2.3.2 常量聲明

const 用于聲明常量，看以下代碼

//定義常量
const name='xiaohui';//常量不允許重新賦值
name='xiaolan'console.log(name)

2.3.3 模板字符串

es6模板字符簡直是開發者的福音啊，解決了ES5在字符串功能上的痛點。

第一個用途，基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定。

let str1='xiaolan';
let str2='xiaobiao';//普通拼接方式
console.log(str1+'-hello-'+str2)//ES6 模板字符串
console.log(`${str1}-hello-${str2}`)

第二個用途，在ES5時我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。

//ES6之前多行字符串
let str3 = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\n\
bbbbbbb\n\
ccccccc'//ES6多行字符串
let str4 =`asdasdasdasd
asdasdasdasd
asdasdsadas`;console.log(str3)
console.log('------------------------')
console.log(str4)

2.3.4 函數默認參數

ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。看例子代碼

function show(num=30){          //給函數參數默認值console.log(num)
}show()      //30
show(50)      //50

2.3.5 箭頭函數

ES6很有意思的一部分就是函數的快捷寫法。也就是箭頭函數。

箭頭函數最直觀的三個特點。

不需要function關鍵字來創建函數
省略return關鍵字
繼承當前上下文的 this 關鍵字

看下面代碼：

function test1(a, b) {return a + b;
}//ES6定義函數
test2 = (a, b) => {return a + b;
}//如果函數中就一句話那么return可以省略
test3 = (a, b) => a + b;console.log(test1(10, 20));
console.log(test2(10, 20));
console.log(test3(10, 20));

2.3.6 對象初始化簡寫

ES5我們對于對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如

function showBook(name,author){return {name:name,author:author}
}//ES6新寫法：如果key和val一樣的話可以省略
function showBook2(name,author){return {name,author}
}console.log(showBook('《論語》','孔子'))
console.log(showBook2('《道德經》','老子'))

2.3.7 解構

數組和對象是JS中最常用也是最重要表示形式。為了簡化提取信息，ES6新增了解構，這是將一個數據結構分解為更小的部分的過程。

ES5我們提取對象中的信息形式如下

const book = {name: '《孟子》', author: '孟子'
}
const name = book.name;
const book = book.author;
console.log(name + ' --- ' + author);

是不是覺得很熟悉，沒錯，在ES6之前我們就是這樣獲取對象信息的，一個一個獲取。現在，ES6的解構能讓我們從對象或者數組里取出數據存為變量，例如

const book = {name: '《大學》', author: '曾子'
}//ES6之前取值方式
// var name=book.name;
// var author=book.author;//ES6新方式,相當于同時定義了兩個變量,分別取出person中對應的值
var {name, address} = book;console.log(name, author)var nums = [32, 54, 43, 49];
var [num1, num2, num3] = nums;console.log(num1);          //nums[0]
console.log(num2);          //nums[1]
console.log(num3);          //nums[2]

2.3.8 Spread Operator

ES6中另外一個好玩的特性就是Spread Operator【傳播操作符】，也是三個點兒…接下來就展示一下它的用途。組裝對象或者數組

const books = ['大學', '中庸'];
const books2 = [...books, '論語', '孟子'];
console.log(books2)     // [ '大學', '中庸', '論語', '孟子' ]const user1 = {name: 'xiaohui', password:'admin'}
const user1 = {...info, age: 22,address: '湖北荊州'}
console.log(info2)      // { name: 'xiaohui',password:'admin', age: 22, address: '湖北荊州' }

2.3.9 import 和 export

1）安裝babel

ES6+很多高級功能node是不支持的，就需要使用babel轉換成ES5

（1）babel轉換配置,項目根目錄添加.babelrc 文件

{"presets" : ["es2015"]
}

（2）安裝es6轉換模塊

npm install babel-preset-es2015 --save-dev

（3）全局安裝命令行工具

npm install babel-cli -g

（4）將ES6語法轉換為ES5：

# src: 源代碼目錄
# dist: 轉碼之后的目錄
babel src -d dist

2）使用import和export

import用于導入模塊、export用于導出模塊。

ES6導入、導出的用法比較多樣化，可以選擇自己喜歡的用法來導入導出。

第一種方式：

創建一個demo01文件夾，準備一個demo01.js

let show=function(){console.log("千里之行，始于足下。")
}export {show}            //將方法導出

創建demo02.js，導入demo01

import {fun} from './demo01'       //導入其他模塊的方法fun()       //調用導入進來的方法

將ES6語法轉換為ES5：

babel demo01 -d demo01_dist

執行程序：

node ./demo01_dist/demo02

第二種方式：

修改demo01.js：

export function showContent_01() {console.log('上善若水，水善利萬物而不爭。')
}
export function showContent_02() {console.log('吾生也有涯，而知也無涯。')
}

修改demo02.js：

//只取需要的方法即可，多個方法用逗號分隔
import { showContent_01, showContent_02 } from "./demo01"
showContent_01()
showContent_02()

將ES6語法轉換為ES5：

babel demo01 -d demo01_dist

執行程序：

node ./demo01_dist/demo02

第三種方式：

修改demo01.js：

export default {showContent_01() {console.log('夫唯不爭，故天下莫能與之爭。')},showContent_02() {console.log('知者不言，言者不知。')}
}

修改demo02.js：

import content from "./demo01"
content.showContent_01()
content.showContent_02()

將ES6語法轉換為ES5：

babel demo01 -d demo01_dist

執行程序：

node ./demo01_dist/demo02