ECMAScript 6

目標：學習完 ES6 可以掌握方便后續的開發，未來工作中大量使用 ES6 開發

ECMAScript 6 介紹

ECMAScript 6 新增語法

內置對象的擴展

ECMAScript 6 降級處理（學習完node再講）

1. ECMAScript 6 介紹

ES – ECMAScript

ECMA – 歐洲計算機制造商協會

ECMA262標準 – 第一版JS的標準

我們之前學習的是 ES5.1

2015年發布了ES6，并且更名為ES2015。決定以年號為版本號，并且每年發布一個新版本。

• ES2015
• ES2016
• …

網上所說的ES7、ES8等等，只是人們推算的，因為官方從未承認什么ES7，ES8。網上所提到的ES7，正式名稱應該是ES2016。

• 每一年，所有人可以給JS提議，提出JS需要哪些改進，并給出解決辦法。
• 如果提議被采納，進入草案階段
• 第二年發布的新版，就會包括前一年的草案

1.1 為什么要學習ES6

• 提供了更加方便的新語法，彌補 JS 語言本身的缺陷，新增了便捷的語法
• 給內置對象（Array、String、…）增加了更多的方法。
• ES6 讓 JS 可以開發復雜的大型項目，成為企業級開發語言
• 新的前端項目中大量使用 ES6 的新語法（今天學完，后面就大量使用了）

1.2 ECMAScript 6 是什么

• ECMAScript 6 又叫 ES2015，簡稱 ES6
• ES6 是繼 ES4、ES5 之后的 JS 語言規范
• ES6 中增加了一些新的特性
• ES6 的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言
• 2015年6月發布

1.3 小結

• ES6 是新的 JS 的代碼規范，提供了一些新特性，使我們可以開發大型應用
• ES6 彌補了 JS 語言本身的缺陷，增加了新語法，擴展了內置對象
• ES6用起來非常爽。因為語法非常人性化。

2. ECMAScript 6 新增語法

• let和const關鍵字

• 箭頭函數

• 函數參數默認值

• 函數剩余參數

• Array對象擴展

• String對象擴展

• 新增對象Set

• 定義對象的簡潔方式

• Promise（最后一天）

2.1 let 和 const

• let – 用于聲明變量

  • let 定義變量，變量不可以再次定義，但可以改變其值

  • 具有塊級作用域

  • 沒有變量提升，必須先定義再使用

  • let聲明的變量不會壓到window對象中，是獨立的

  • 代碼演示

    // 1. let 定義變量，變量不可以再次定義，但可以改變其值 let name = 'zhangsan'; name = 'lisi'; console.log(name); // lisi let name = 'wangwu'; // 再次定義，報錯：Identifier 'name' has already been declared // 2. 具有塊級作用域，塊就是大括號 {let age = 18;console.log(age); // 18 } console.log(age); // 報錯，此作用域中沒有age的定義for (let i = 0; i < 10; i++) {// i 只能在此范圍內使用，因為有塊級作用域 } console.log(i); // 報錯，此作用域中沒有age的定義 // 3. 沒有變量提升，必須先定義再使用 console.log(gender); // 報錯，此時還沒有定義gender let gender = '男'; // 4. let聲明的變量不會壓到window對象中，是獨立的 let hobby = '吃飯'; console.log(window.hobby); // undefined

如果使用var聲明了變量，也不能再次用let聲明了，反之也是不行的。

原因也是這個變量已經被聲明過了。

不過這只是一種特殊情況了，實際開發要么全部使用var，要么全部使用let。

• const – 用于聲明常量（值不能改變）

  • 使用const關鍵字定義常量

  • 常量是不可變的，一旦定義，則不能修改其值

  • 初始化常量時，必須給初始值

  • 具有塊級作用域

  • 沒有變量提升，必須先定義再使用

  • 常量也是獨立的，定義后不會壓入到window對象中

  • 代碼演示

    // 1. 使用const關鍵字定義常量，常量名一般大寫 const PI = 3.1415926; // 2. 常量是不可變的，一旦定義，則不能修改其值 const PI = 3.1415926； PI = 3.14; // 報錯，常用一旦被初始化，則不能被修改 // 3. 初始化常量時，必須給初始值 const PI; // 報錯，Missing initializer in const declaration // 4. 具有塊級作用域 // 5. 沒有變量提升，必須先定義再使用 // 6. 常量也是獨立的，定義后不會壓入到window對象中 // 這三條和let變量一樣，不再寫代碼

• 小結

  關鍵字變量提升塊級作用域初始值更改值通過window調用

  let	×	√	-	Yes	No
  const	×	√	Yes	No	No
  var	√	×	-	Yes	Yes

2.2 解構賦值

數組的解構

對象的解構

ES 6 允許按照一定**模式**，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。

2.2.1 數組的解構

方便獲取數組中的某些項

// 情況1，變量和值一一對應 let arr = [5, 9, 10]; let [a, b, c] = arr; console.log(a, b, c); // 輸出 5 9 10 // 情況2，變量多，值少 let arr = [5, 9, 10]; let [a, b, c, d] = arr; console.log(a, b, c, d); // 輸出 5 9 10 undefined // 情況3，變量少，值多 let arr = [5, 9, 10, 8, 3, 2]; let [a, b] = arr; console.log(a, b); // 5, 9 // 情況4，按需取值 let arr = [5, 9, 10, 8, 3, 2]; let [, , a, , b] = arr; // 不需要用變量接收的值，用空位占位 console.log(a, b); // 10, 3 // 情況5，剩余值 let arr = [5, 9, 10, 8, 3, 2]; let [a, b, ...c] = arr; // ...c 接收剩余的其他值，得到的c是一個數組 console.log(a, b, c); // 結果： // a = 5, // b = 9, // c = [10, 8, 3, 2] // 情況6，復雜的情況，只要符合模式，即可解構 let arr = ['zhangsan', 18, ['175cm', '65kg']]; let [, , [a, b]] = arr; console.log(a, b); // 175cm 65kg

實際應用：

function sum ([a, b, c]) {// 形參 = 實參// [a, b, c] = [1, 2, 3, 4, 5]console.log(a + b + c); } sum([3, 4, 5, 6, 7]); // 3+4+5 = 12

2.2.2 對象的解構

• 方便解析對象中的某些屬性的值

// 情況1，默認要求變量名和屬性名一樣 let { foo, bar } = {foo: 'aaa', bar: 'bbb'}; console.log(foo, bar); // aaa, bbblet {a, c} = {a: 'hello', b: 'world'}; console.log(a, c); // hello, undefined // 情況2，可以通過:為變量改名 let {a, b:c} = {a: 'hello', b: 'world'}; console.log(a, c); // hello, world // 情況3，變量名和屬性名一致即可獲取到值，不一定要一一對應 let {b} = {a: 'hello', b: 'world'}; console.log(b); // world // 此時，沒有定義變量a，所以使用a會報錯 // 情況4，剩余值 let obj = {name:'zs', age:20, gender:'男'}; let {name, ...a} = obj; console.log(name, a); // 結果： // name = zs // a = {age: 20, gender: "男"}; // 情況5，復雜的情況，只要符合模式，即可解構 let obj = {name: 'zhangsan',age: 22,dog: {name: '毛毛',age: 3} }; let {dog: {name, age}} = obj; console.log(name, age); // 毛毛 3 let person = {pname: '小明',page: 20,dog: {name: '小黑',age: 4,child: {name: '小白',age: 1}}}let {pname, page, dog: {name: dname, age: dage, child: {name, age}}} = person;console.log(pname, dname, name); /* 解構的時候，模式和對象的 結構 是一樣的 如果變量名沖突，可以使用 原變量: 新變量 的語法處理 */

2.2.3 實際應用

// 假設從服務器上獲取的數據如下 let response = {data: ['a', 'b', 'c'],meta: {code: 200,msg: '獲取數據成功'} } // 如何獲取到 code 和 msg let { meta: { code, msg } } = response; console.log(code, msg); // 200, 獲取數據成功

2.3 函數

2.3.1 箭頭函數

ES6 中允許使用箭頭定義函數 (=> goes to)，目的是簡化函數的定義并且里面的this也比較特殊。

• 箭頭函數的基本定義

  // 非箭頭函數 let fn = function (x) {return x * 2; } // 箭頭函數，等同于上面的函數 let fn = (x) => {return x * 2; }

• 箭頭函數的特點

  • 形參只有一個，可以省略小括號

    let fn = (x) => {return x * 2; } // 等同于 let fn = x => {return x * 2; }

  • 函數體只有一行代碼，可以省略大括號，并且表示返回函數體的內容

    let fn = (x, y) => {return x + y; } // 等同于 let fn = (x, y) => x + y;

  // 注意：如果函數體僅僅是返回一個字面量對象的話，需要給字面量對象加 ()
  let abc = () => ({x: 1}); // 不加小括號，程序會把{}當做函數體的大括號

  - 箭頭函數內部沒有 arguments```jslet fn = () => {console.log(arguments); // 報錯，arguments is not defined };fn(1, 2);

  • 箭頭函數內部的 this 指向外部作用域中的 this ，或者可以認為箭頭函數沒有自己的 this

    MDN解釋：箭頭函數不會創建自己的this,它只會從自己的作用域鏈的上一層繼承this

    var name = 'lisi'; // 測試時，這里必須用var，因為用let聲明的變量不能使用window調用 let obj = {name: 'zhangsan',fn : () => {console.log(this); // window對象console.log(this.name); // lisi}};obj.fn();
  - 箭頭函數不能作為構造函數```jslet Person = () => {};let obj = new Person(); // 報錯，Person is not a constructor// 換個角度理解，箭頭函數中都沒有自己的this，怎么處理成員，所以不能當構造函數```

2.3.2 參數的默認值

ES6 之前函數不能設置參數的默認值

// ES5 中給參數設置默認值的變通做法 function fn(x, y) {y = y || 'world';console.log(x, y); } fn(1) // ES6 中給函數設置默認值 function fn(x, y = 'world') {console.log(x, y); } fn(2) fn(2,3)

• 我們實際傳遞給函數的實參，優先級大于默認值。如果我們調用的時候，沒有傳遞實參，則會使用默認值；如果調用函數的時候，傳遞了實參，則使用傳遞的實參
• 有默認值的參數，應該放到沒有默認值的參數的后面。這樣才會有意義
• 任何函數，都可以為參數設置默認值

2.3.3 rest 參數

rest 參數：剩余參數，以 … 修飾最后一個參數，把多余的參數都放到一個數組中。可以替代 arguments 的使用

// 參數很多，不確定多少個，可以使用剩余參數 function fn(...values) {console.log(values); // [6, 1, 100, 9, 10] } // 調用 fn(6, 1, 100, 9, 10); function fn(a, b, ...values) {console.log(a); // 6console.log(b); // 1console.log(values); // [100, 9, 10] } // 調用 console.log(fn(6, 1, 100, 9, 10));

注意：rest 參數只能是最后一個參數

3. 內置對象的擴展

Array 的擴展

String 的擴展

Number 的擴展

Set

3.1 Array 的擴展

• 擴展運算符

  • 添加鏈接描述
  • 可以在函數調用/數組構造時, 將數組表達式或者string在語法層面展開；
  • 還可以在構造字面量對象時, 將對象表達式按key-value的方式展開
  // 合并兩個數組 let arr1 = [1, 2]; let arr2 = [3, 4]; let arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4]// 把數組展開作為參數，可以替代 apply // 求數組的最大值 let arr = [6, 99, 10, 1]; let max = Math.max(...arr); // 等同于 Math.max(6, 99, 10, 1);

• Array.from()

  • 把偽數組轉換成數組
  • 偽數組必須有length屬性，沒有length將得到一個空數組
  • 轉換后的數組長度，是根據偽數組的length決定的
  let fakeArr = {0: 'a',1: 'b',2: 'c',length: 3 };let arr = Array.from(fakeArr); console.log(arr); // ['a', 'b', 'c']// 轉數組的對象必須有length值，因為得到的數組的成員個數是length指定的個數 // 上例中，如果length為2，則得到的數組為 ['a', 'b']

• forEach遍歷數組

  • 要為forEach傳遞一個函數進來

  • 為forEach傳遞的函數有三個形參，分別表示數組的值、下標、當前的數組

    // [xxx,xxx].forEach(function (value, index, arr) {// value 表示數組的值// index 表示數組的下標、索引// arr 表示當前的數組 // });[3, 8, 4, 9].forEach(function (v, i, a) {console.log(v); // 表示數組的值 ，輸出的結果是 3,8,4,9// console.log(i); // 表示數組的下標// console.log(a); // 表示數組 });// 如果不需要下標和當前的數組，只使用value即可 // 函數可以使用箭頭函數 [3, 8, 4, 9].forEach((item) => {console.log(item); });// 下面的意思是循環，在循環數組的時候，輸出數組的每個值 [3, 8, 4, 9].forEach(item => console.log(item));

• 數組實例的 find() 和 findIndex() 類似語法的方法還有：forEach 、some、every、filter、map、reduce

  • find和findIndex方法，會遍歷傳遞進來的數組

  • 回調函數有三個參數，分別表示數組的值、索引及整個數組

  • 回調函數中return的是一個條件，find和findIndex方法的返回值就是滿足這個條件的第一個元素或索引

  • find 找到數組中第一個滿足條件的成員并返回該成員，如果找不到返回undefined。

  • findIndex 找到數組中第一個滿足條件的成員并返回該成員的索引，如果找不到返回 -1。

  // 語法結構 let arr = [1, 2, 4, 0, -4, 3, -2, 9]; arr.find(function (item, index, self) {console.log(item); // 數組中的每個值console.log(index); // 數組中的每個索引/下標console.log(self); // 當前的數組 }); // 用法：找數組中第一個小于0的數字 let arr = [1, 2, 4, 0, -4, 3, -2, 9]; let result = arr.find(function (item) {return item < 0; //遍歷過程中，根據這個條件去查找 }); console.log(result); // -4

  findIndex 的使用和 find 類似，只不過它查找的不是值，而是下標

• 數組實例的 includes()

  • 判斷數組是否包含某個值，返回 true / false
  • 參數1，必須，表示查找的內容
  • 參數2，可選，表示開始查找的位置，0表示開頭的位置
  let arr = [1, 4, 3, 9]; console.log(arr.includes(4)); // true console.log(arr.includes(4, 2)); // false， 從2的位置開始查，所以沒有找到4 console.log(arr.includes(5)); // false

3.2 String的擴展

• 模板字符串

  • 模板字符串解決了字符串拼接不便的問題

  • 模板字符串使用反引號 ` 括起來內容

  • 模板字符串中的內容可以換行

  • 變量在模板字符串中使用 ${name} 來表示，不用加 + 符號

  let name = 'zs'; let age = 18; // 拼接多個變量，在模板字符串中使用占位的方式，更易懂 let str = `我是${name}，今年${age}`; // 內容過多可以直接換行 let obj = {name: 'zhangsan', age: 20}; let arr = ['175cm', '60kg']; let html = `<div><ul><li>${obj.name}</li><li>${obj.age + 2}</li><li>${arr[0]}</li><li>${arr[1]}</li></ul></div> `;

• includes(), startsWith(), endsWith()

  • includes(str, [position]) 返回布爾值，表示是否找到了參數字符串
  • startsWidth(str, [position]) 返回布爾值，表示參數字符串是否在原字符串的頭部或指定位置
  • endsWith(str, [length]) 返回布爾值，表示參數字符串是否在原字符串的尾部或指定位置。
  console.log('hello world'.includes('e', 2)); // false 從位置2開始查找e，沒有找到 console.log('hello world'.includes('e')); // trueconsole.log('hello world'.startsWith('h')); // 未指定位置，看開頭是否是h，返回true console.log('hello world'.startsWith('l', 2)); // 指定位置的字符是l，返回trueconsole.log('hello world'.endsWith('d')); // 未指定位置，結尾是d，返回true console.log('hello world'.endsWith('r', 9)); // 先截取9個字符，然后看這9個字符串的結尾是不是r。返回true

• repeat()

  repeat方法返回一個新字符串，表示將原字符串重復n次。

  let html = '<li>itheima</li>'; html = html.repeat(10);

• trim()

  trim() 方法可以去掉字符串兩邊的空白

  console.log(' hello '.trim()); // hello console.log(' hello '); //

3.3 Number的擴展

ES6 將全局方法parseInt()和parseFloat()，移植到Number對象上面，功能完全保持不變。

• Number.parseInt()

• Number.parseFloat()

  console.log(parseInt('123abc')); // ES6中，將parseInt移植到了Number對象上 console.log(Number.parseInt('123abc'));

3.4 Set

ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。

Set本身是一個構造函數，用來生成 Set 數據結構。

Set的特點就是該對象里面的成員不會有重復。

// 1. 基本使用 let s = new Set(); // 得到一個空的Set對象 // 調用add方法，向s中添加幾個值 s.add(3); s.add(7); s.add(9); s.add(7); // Set對象中的成員都是唯一的，前面添加過7了，所以這里添加無效console.log(s.size); console.log(s); // {3, 7, 9}

• Set 的成員
  • size：屬性，獲取 set 中成員的個數，相當于數組中的 length
  • add(value)：添加某個值，返回 Set 結構本身。
  • delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
  • has(value)：返回一個布爾值，表示該值是否為Set的成員。
  • clear()：清除所有成員，沒有返回值。

// 將一些重復的值加入到Set對象中，看看效果 const s = new Set(); // 使用forEach遍歷前面的數組，然后將數組中的每個值都通過Set對象的add方法添加到Set對象中 [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); // s = {2, 3, 5, 4} // 遍歷Set對象，發現重復的值只有一份 // for...in 循環中的 i 表示數組的下標，或對象的屬性名 // for...of 循環中的 i 表示數組的值，或對象的值 for (let i of s) {console.log(i); } // 2 3 5 4

另外初始化Set的時候，也可以為其傳入數組或字符串，得到的Set對象中的成員不會有重復。

根據這個特點可以完成數組或字符串去重。

// Set 可以通過一個數組初始化 let set = new Set([1, 2, 1, 5, 1, 6]); console.log(set); //Set(4) {1, 2, 5, 6} // 數組去重 let arr = [...set]; // 方式一 console.log(Array.from(set)); // from是將偽數組變為數組;方式二 console.log(arr); // [1, 2, 5, 6]// 完成字符串去重 let str = [...new Set('ababbc')].join(''); console.log(str); // abc

4. 定義對象的簡潔方式

let id = 1; let name = 'zs'; let age = 20;// 之前定義對象的方案 // let obj = { // // 屬性: 值 // id: id, // name: name, // age: age, // fn: function () { // console.log(this.age); // } // };// obj.fn();// ES6的新方案 let obj = {id, // 屬性名id和前面的變量id名字相同，則可以省略 :idname,nianling: age,// 下面的函數是上面函數的簡化寫法，可以省略 :function 。但是注意這里僅僅是上面函數的簡化，不是箭頭函數fn () {console.log(this.name);} }; obj.fn();

5. ECMAScript 6 降級處理 (保留)

5.1 ES 6 的兼容性問題

• ES6 雖好，但是有兼容性問題，IE7-IE11 基本不支持 ES6

  ES6 兼容性列表

• 在最新的現代瀏覽器、移動端、Node.js 中都支持 ES6

• 后續我們會講解如何處理 ES6 的兼容性

5.2 ES 6 降級處理

因為 ES 6 有瀏覽器兼容性問題，可以使用一些工具進行降級處理，例如：babel

• 降級處理 babel 的使用步驟

• 安裝 Node.js

• 命令行中安裝 babel

• 配置文件 .babelrc

• 運行

• 安裝 Node.js

  官網

• 項目初始化(項目文件夾不能有中文)

  npm init -y

• 在命令行中，安裝 babel babel官網

  npm install @babel/core @babel/cli @babel/preset-env

• 配置文件 .babelrc (手工創建這個文件)

  babel 的降級處理配置

  {"presets": ["@babel/preset-env"] }

• 在命令行中，運行

  # 把轉換的結果輸出到指定的文件 npx babel index.js -o test.js # 把轉換的結果輸出到指定的目錄 npx babel 包含有js的原目錄 -d 轉換后的新目錄

參考：babel官網

6. 擴展閱讀

ES 6 擴展閱讀

總結

以上是生活随笔為你收集整理的js高级 — ES6的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。