ECMAScript 6

目標(biāo)：學(xué)習(xí)完 ES6 可以掌握方便后續(xù)的開發(fā)，未來工作中大量使用 ES6 開發(fā)

ECMAScript 6 介紹

ECMAScript 6 新增語法

內(nèi)置對(duì)象的擴(kuò)展

ECMAScript 6 降級(jí)處理（學(xué)習(xí)完node再講）

1. ECMAScript 6 介紹

ES – ECMAScript

ECMA – 歐洲計(jì)算機(jī)制造商協(xié)會(huì)

ECMA262標(biāo)準(zhǔn) – 第一版JS的標(biāo)準(zhǔn)

我們之前學(xué)習(xí)的是 ES5.1

2015年發(fā)布了ES6，并且更名為ES2015。決定以年號(hào)為版本號(hào)，并且每年發(fā)布一個(gè)新版本。

• ES2015
• ES2016
• …

網(wǎng)上所說的ES7、ES8等等，只是人們推算的，因?yàn)楣俜綇奈闯姓J(rèn)什么ES7，ES8。網(wǎng)上所提到的ES7，正式名稱應(yīng)該是ES2016。

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

1.1 為什么要學(xué)習(xí)ES6

• 提供了更加方便的新語法，彌補(bǔ) JS 語言本身的缺陷，新增了便捷的語法
• 給內(nèi)置對(duì)象（Array、String、…）增加了更多的方法。
• ES6 讓 JS 可以開發(fā)復(fù)雜的大型項(xiàng)目，成為企業(yè)級(jí)開發(fā)語言
• 新的前端項(xiàng)目中大量使用 ES6 的新語法（今天學(xué)完，后面就大量使用了）

1.2 ECMAScript 6 是什么

• ECMAScript 6 又叫 ES2015，簡(jiǎn)稱 ES6
• ES6 是繼 ES4、ES5 之后的 JS 語言規(guī)范
• ES6 中增加了一些新的特性
• ES6 的目標(biāo)，是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語言
• 2015年6月發(fā)布

1.3 小結(jié)

• ES6 是新的 JS 的代碼規(guī)范，提供了一些新特性，使我們可以開發(fā)大型應(yīng)用
• ES6 彌補(bǔ)了 JS 語言本身的缺陷，增加了新語法，擴(kuò)展了內(nèi)置對(duì)象
• ES6用起來非常爽。因?yàn)檎Z法非常人性化。

2. ECMAScript 6 新增語法

• let和const關(guān)鍵字

• 箭頭函數(shù)

• 函數(shù)參數(shù)默認(rèn)值

• 函數(shù)剩余參數(shù)

• Array對(duì)象擴(kuò)展

• String對(duì)象擴(kuò)展

• 新增對(duì)象Set

• 定義對(duì)象的簡(jiǎn)潔方式

• Promise（最后一天）

2.1 let 和 const

• let – 用于聲明變量

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

  • 具有塊級(jí)作用域

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

  • let聲明的變量不會(huì)壓到window對(duì)象中，是獨(dú)立的

  • 代碼演示

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

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

原因也是這個(gè)變量已經(jīng)被聲明過了。

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

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

  • 使用const關(guān)鍵字定義常量

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

  • 初始化常量時(shí)，必須給初始值

  • 具有塊級(jí)作用域

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

  • 常量也是獨(dú)立的，定義后不會(huì)壓入到window對(duì)象中

  • 代碼演示

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

• 小結(jié)

  關(guān)鍵字變量提升塊級(jí)作用域初始值更改值通過window調(diào)用

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

2.2 解構(gòu)賦值

數(shù)組的解構(gòu)

對(duì)象的解構(gòu)

ES 6 允許按照一定**模式**，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。

2.2.1 數(shù)組的解構(gòu)

方便獲取數(shù)組中的某些項(xiàng)

// 情況1，變量和值一一對(duì)應(yīng) 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是一個(gè)數(shù)組 console.log(a, b, c); // 結(jié)果： // a = 5, // b = 9, // c = [10, 8, 3, 2] // 情況6，復(fù)雜的情況，只要符合模式，即可解構(gòu) let arr = ['zhangsan', 18, ['175cm', '65kg']]; let [, , [a, b]] = arr; console.log(a, b); // 175cm 65kg

實(shí)際應(yīng)用：

function sum ([a, b, c]) {// 形參 = 實(shí)參// [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 對(duì)象的解構(gòu)

• 方便解析對(duì)象中的某些屬性的值

// 情況1，默認(rèn)要求變量名和屬性名一樣 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，變量名和屬性名一致即可獲取到值，不一定要一一對(duì)應(yīng) let {b} = {a: 'hello', b: 'world'}; console.log(b); // world // 此時(shí)，沒有定義變量a，所以使用a會(huì)報(bào)錯(cuò) // 情況4，剩余值 let obj = {name:'zs', age:20, gender:'男'}; let {name, ...a} = obj; console.log(name, a); // 結(jié)果： // name = zs // a = {age: 20, gender: "男"}; // 情況5，復(fù)雜的情況，只要符合模式，即可解構(gòu) 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); /* 解構(gòu)的時(shí)候，模式和對(duì)象的 結(jié)構(gòu) 是一樣的 如果變量名沖突，可以使用 原變量: 新變量 的語法處理 */

2.2.3 實(shí)際應(yīng)用

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

2.3 函數(shù)

2.3.1 箭頭函數(shù)

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

• 箭頭函數(shù)的基本定義

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

• 箭頭函數(shù)的特點(diǎn)

  • 形參只有一個(gè)，可以省略小括號(hào)

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

  • 函數(shù)體只有一行代碼，可以省略大括號(hào)，并且表示返回函數(shù)體的內(nèi)容

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

  // 注意：如果函數(shù)體僅僅是返回一個(gè)字面量對(duì)象的話，需要給字面量對(duì)象加 ()
  let abc = () => ({x: 1}); // 不加小括號(hào)，程序會(huì)把{}當(dāng)做函數(shù)體的大括號(hào)

  - 箭頭函數(shù)內(nèi)部沒有 arguments```jslet fn = () => {console.log(arguments); // 報(bào)錯(cuò)，arguments is not defined };fn(1, 2);

  • 箭頭函數(shù)內(nèi)部的 this 指向外部作用域中的 this ，或者可以認(rèn)為箭頭函數(shù)沒有自己的 this

    MDN解釋：箭頭函數(shù)不會(huì)創(chuàng)建自己的this,它只會(huì)從自己的作用域鏈的上一層繼承this

    var name = 'lisi'; // 測(cè)試時(shí)，這里必須用var，因?yàn)橛胠et聲明的變量不能使用window調(diào)用 let obj = {name: 'zhangsan',fn : () => {console.log(this); // window對(duì)象console.log(this.name); // lisi}};obj.fn();
  - 箭頭函數(shù)不能作為構(gòu)造函數(shù)```jslet Person = () => {};let obj = new Person(); // 報(bào)錯(cuò)，Person is not a constructor// 換個(gè)角度理解，箭頭函數(shù)中都沒有自己的this，怎么處理成員，所以不能當(dāng)構(gòu)造函數(shù)```

2.3.2 參數(shù)的默認(rèn)值

ES6 之前函數(shù)不能設(shè)置參數(shù)的默認(rèn)值

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

• 我們實(shí)際傳遞給函數(shù)的實(shí)參，優(yōu)先級(jí)大于默認(rèn)值。如果我們調(diào)用的時(shí)候，沒有傳遞實(shí)參，則會(huì)使用默認(rèn)值；如果調(diào)用函數(shù)的時(shí)候，傳遞了實(shí)參，則使用傳遞的實(shí)參
• 有默認(rèn)值的參數(shù)，應(yīng)該放到?jīng)]有默認(rèn)值的參數(shù)的后面。這樣才會(huì)有意義
• 任何函數(shù)，都可以為參數(shù)設(shè)置默認(rèn)值

2.3.3 rest 參數(shù)

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

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

注意：rest 參數(shù)只能是最后一個(gè)參數(shù)

3. 內(nèi)置對(duì)象的擴(kuò)展

Array 的擴(kuò)展

String 的擴(kuò)展

Number 的擴(kuò)展

Set

3.1 Array 的擴(kuò)展

• 擴(kuò)展運(yùn)算符

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

• Array.from()

  • 把偽數(shù)組轉(zhuǎn)換成數(shù)組
  • 偽數(shù)組必須有l(wèi)ength屬性，沒有l(wèi)ength將得到一個(gè)空數(shù)組
  • 轉(zhuǎn)換后的數(shù)組長度，是根據(jù)偽數(shù)組的length決定的
  let fakeArr = {0: 'a',1: 'b',2: 'c',length: 3 };let arr = Array.from(fakeArr); console.log(arr); // ['a', 'b', 'c']// 轉(zhuǎn)數(shù)組的對(duì)象必須有l(wèi)ength值，因?yàn)榈玫降臄?shù)組的成員個(gè)數(shù)是length指定的個(gè)數(shù) // 上例中，如果length為2，則得到的數(shù)組為 ['a', 'b']

• forEach遍歷數(shù)組

  • 要為forEach傳遞一個(gè)函數(shù)進(jìn)來

  • 為forEach傳遞的函數(shù)有三個(gè)形參，分別表示數(shù)組的值、下標(biāo)、當(dāng)前的數(shù)組

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

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

  • find和findIndex方法，會(huì)遍歷傳遞進(jìn)來的數(shù)組

  • 回調(diào)函數(shù)有三個(gè)參數(shù)，分別表示數(shù)組的值、索引及整個(gè)數(shù)組

  • 回調(diào)函數(shù)中return的是一個(gè)條件，find和findIndex方法的返回值就是滿足這個(gè)條件的第一個(gè)元素或索引

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

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

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

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

• 數(shù)組實(shí)例的 includes()

  • 判斷數(shù)組是否包含某個(gè)值，返回 true / false
  • 參數(shù)1，必須，表示查找的內(nèi)容
  • 參數(shù)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的擴(kuò)展

• 模板字符串

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

  • 模板字符串使用反引號(hào) ` 括起來內(nèi)容

  • 模板字符串中的內(nèi)容可以換行

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

  let name = 'zs'; let age = 18; // 拼接多個(gè)變量，在模板字符串中使用占位的方式，更易懂 let str = `我是${name}，今年${age}`; // 內(nèi)容過多可以直接換行 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]) 返回布爾值，表示是否找到了參數(shù)字符串
  • startsWidth(str, [position]) 返回布爾值，表示參數(shù)字符串是否在原字符串的頭部或指定位置
  • endsWith(str, [length]) 返回布爾值，表示參數(shù)字符串是否在原字符串的尾部或指定位置。
  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')); // 未指定位置，結(jié)尾是d，返回true console.log('hello world'.endsWith('r', 9)); // 先截取9個(gè)字符，然后看這9個(gè)字符串的結(jié)尾是不是r。返回true

• repeat()

  repeat方法返回一個(gè)新字符串，表示將原字符串重復(fù)n次。

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

• trim()

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

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

3.3 Number的擴(kuò)展

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

• Number.parseInt()

• Number.parseFloat()

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

3.4 Set

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。

Set本身是一個(gè)構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。

Set的特點(diǎn)就是該對(duì)象里面的成員不會(huì)有重復(fù)。

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

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

// 將一些重復(fù)的值加入到Set對(duì)象中，看看效果 const s = new Set(); // 使用forEach遍歷前面的數(shù)組，然后將數(shù)組中的每個(gè)值都通過Set對(duì)象的add方法添加到Set對(duì)象中 [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); // s = {2, 3, 5, 4} // 遍歷Set對(duì)象，發(fā)現(xiàn)重復(fù)的值只有一份 // for...in 循環(huán)中的 i 表示數(shù)組的下標(biāo)，或?qū)ο蟮膶傩悦?/span> // for...of 循環(huán)中的 i 表示數(shù)組的值，或?qū)ο蟮闹?/span> for (let i of s) {console.log(i); } // 2 3 5 4

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

根據(jù)這個(gè)特點(diǎn)可以完成數(shù)組或字符串去重。

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

4. 定義對(duì)象的簡(jiǎn)潔方式

let id = 1; let name = 'zs'; let age = 20;// 之前定義對(duì)象的方案 // 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,// 下面的函數(shù)是上面函數(shù)的簡(jiǎn)化寫法，可以省略 :function 。但是注意這里僅僅是上面函數(shù)的簡(jiǎn)化，不是箭頭函數(shù)fn () {console.log(this.name);} }; obj.fn();

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

5.1 ES 6 的兼容性問題

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

  ES6 兼容性列表

• 在最新的現(xiàn)代瀏覽器、移動(dòng)端、Node.js 中都支持 ES6

• 后續(xù)我們會(huì)講解如何處理 ES6 的兼容性

5.2 ES 6 降級(jí)處理

因?yàn)?ES 6 有瀏覽器兼容性問題，可以使用一些工具進(jìn)行降級(jí)處理，例如：babel

• 降級(jí)處理 babel 的使用步驟

• 安裝 Node.js

• 命令行中安裝 babel

• 配置文件 .babelrc

• 運(yùn)行

• 安裝 Node.js

  官網(wǎng)

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

  npm init -y

• 在命令行中，安裝 babel babel官網(wǎng)

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

• 配置文件 .babelrc (手工創(chuàng)建這個(gè)文件)

  babel 的降級(jí)處理配置

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

• 在命令行中，運(yùn)行

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

參考：babel官網(wǎng)

6. 擴(kuò)展閱讀

ES 6 擴(kuò)展閱讀

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。