es6核心特性有：1、使用Class關(guān)鍵字創(chuàng)建類，再通過實(shí)例化類來創(chuàng)建對象；2、箭頭函數(shù)，用于簡化回調(diào)函數(shù)的書寫；3、解構(gòu)賦值，可按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值；4、“For…of”循環(huán)，用于遍歷數(shù)據(jù)、數(shù)組、類數(shù)組對象。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

ES6核心特性

1、類 Class

ES6正式啟用 Class 關(guān)鍵字來創(chuàng)建"類”，再通過實(shí)例化"類”來創(chuàng)建“對象”。類抽象了對象的公共部分，通過實(shí)例化類可以得到一個(gè)具體的對象。

• 類名首字母使用大寫。
• 實(shí)例化類必須使用 New 關(guān)鍵字。
• 簡化面向?qū)ο蟮?code>封裝、繼承、多態(tài)。
• 關(guān)鍵字 extends 可以用于創(chuàng)建一個(gè)子類。
• 類的 Constructor 函數(shù)，可以接收實(shí)參，并返回實(shí)例對象。
• 子類繼承父類后，可以調(diào)用父類的方法，也可重寫父類的方法（優(yōu)先調(diào)用）。
• 關(guān)鍵字 super 用于訪問和調(diào)用對象父類上的函數(shù)，構(gòu)造函數(shù)和普通函數(shù)皆可。
• 使用 New 創(chuàng)建實(shí)例時(shí)會自動調(diào)用 Constructor 函數(shù)，如果不寫此函數(shù)，類函數(shù)會自動生成。
• 【注】子類在構(gòu)造函數(shù)中使用super，必須放到 this 前面，即先調(diào)用父類的構(gòu)造方法，再使用子類構(gòu)造方法。

// 1.使用Class關(guān)鍵字創(chuàng)建類 class 類名 {     // 自有屬性     constructor(形參1, 形參2, ...) {         this.屬性名1 = 形參1;         this.屬性名2 = 形參2;         ...     }     // 共有屬性     init() {         函數(shù)體;     }     ... }  // 2.利用類結(jié)合New關(guān)鍵字實(shí)例化對象 let Object = new 類名(實(shí)參1, 實(shí)參2, ...);  // 3.在已有類基礎(chǔ)上創(chuàng)建子類 class 子類 extends 類名 {     // 自有屬性（與父類相同）     constructor(形參1, 形參2, 新形參1...) {         //super函數(shù)調(diào)用父類的constructor         super(形參1, 形參2, ...);         // 子類新增屬性需要單獨(dú)定義         this.新屬性1 = 新形參1;         ...     }     // 共有屬性（子類函數(shù)位于自身父級原型上，優(yōu)先調(diào)用，父類同名函數(shù)在更上層原型鏈上)     init() {         函數(shù)體;     }     ... }

2、箭頭函數(shù)

• 箭頭函數(shù)用于簡化回調(diào)函數(shù)的書寫。
• 事件中簡化箭頭函數(shù)需要注意 this 指向?yàn)?window。
• 操作方法：省略function，在 () 和 {} 間添加 =>，單形參省略 ()，單語句函數(shù)體省略 {}，若單語句為 return 語句直接省略 {} 和 return 。
• 箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。
• 由于大括號被解釋為代碼塊，如果箭頭函數(shù)直接返回對象，必須在對象外面加.上括號，否則會報(bào)錯(cuò)。

注意事項(xiàng)

• 箭頭函數(shù)沒有自己的this對象。
• 無法使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。
• 無法當(dāng)作構(gòu)造函數(shù)，即不能對箭頭函數(shù)使用new命令，否則報(bào)錯(cuò)。
• 無法使用arguments對象，該對象在函數(shù)體內(nèi)不存在，可以用rest參數(shù)代替。
• 第一個(gè)場合是定義對象的方法，且該方法內(nèi)部包括this。
• 第二個(gè)場合是需要動態(tài)this的時(shí)候，也不應(yīng)使用箭頭函數(shù)。
• 箭頭函數(shù)內(nèi)部，還可以再使用箭頭函數(shù)。下面是一 個(gè)ES5語法的多重嵌套函數(shù)。

3、解構(gòu)賦值

解構(gòu)賦值即解析結(jié)構(gòu)再賦值，ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring），這種寫法屬于"模式匹配"，只要等號兩邊模式相同，左邊的變量就會被賦予對應(yīng)的值。

數(shù)組解構(gòu)賦值

• 如果等號的右邊數(shù)據(jù)是不可遍歷結(jié)構(gòu)則會報(bào)錯(cuò)。
• 完全解構(gòu)：等號左右兩邊的結(jié)構(gòu)完全相同，就會解析結(jié)構(gòu)一一對應(yīng)賦值。
• 不完全解構(gòu)：等號左邊的模式，只匹配一部分的等號右邊的數(shù)組，依舊可以解構(gòu)成功。
• 解構(gòu)賦值允許指定默認(rèn)值，ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）判斷某一位置是否有值，只有數(shù)組成員嚴(yán)格等于 undefined 默認(rèn)值才會生效。

對象解構(gòu)賦值

• 如果解構(gòu)失敗，變量的值等于 undefined。
• 對象屬性沒有次序，但變量必須與屬性同名，才能解析到正確的值。
• 對象解構(gòu)可以指定默認(rèn)值，默認(rèn)值生效的條件是對象的屬性值嚴(yán)格等于undefined。
• 對象解構(gòu)時(shí)，由于JavaScript引擎會將{}理解成一個(gè)代碼塊，從而發(fā)生語法錯(cuò)誤，需要將整個(gè)解構(gòu)賦值語句放在圓括號()里面，即可正確執(zhí)行。

字符串解構(gòu)賦值

• 字符串也支持解構(gòu)賦值，此時(shí)字符串被轉(zhuǎn)換成了類數(shù)組對象。
• 類數(shù)組對象都有一個(gè)Length屬性，因此可以對這個(gè)屬性解構(gòu)賦值。

函數(shù)參數(shù)解構(gòu)賦值

// 函數(shù)參數(shù)支持解構(gòu)賦值 function sum([x, y]) {     return x + y; }  // 傳入?yún)?shù)時(shí)，數(shù)組參數(shù)解構(gòu)為x與y sum([1, 2]);

圓括號使用注意

• 函數(shù)參數(shù)禁用圓括號。
• 變量聲明語句禁用圓括號。
• 賦值語句的模式匹配部分禁用圓括號。
• 只有賦值語句的非模式匹配部分，可以使用圓括號。

4、For…of 循環(huán)

• 優(yōu)點(diǎn)，支持Break，Continue 和 Return關(guān)鍵字， for-of循環(huán)用于遍歷數(shù)據(jù)、數(shù)組、類數(shù)組對象。
• 缺點(diǎn)，沒有提供下標(biāo)，不能修改原數(shù)組，只能遍歷索引數(shù)組，不能遍歷 Hash 數(shù)組（對象）。

for (value of arr) {     執(zhí)行操作; }

Iterator

一種新的遍歷機(jī)制，擁有兩個(gè)核心。

1. 迭代器是一個(gè)接口，能快捷的訪問數(shù)據(jù)，通過Symbol.iterator來創(chuàng)建迭代器，通過迭代器的next()方法獲取迭代之后的結(jié)果。
2. 迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)的一個(gè)指針（類似于數(shù)據(jù)庫的游標(biāo)）

5、數(shù)值新增方法

Number.isInteger()

• Number.isInteger()，用來判斷數(shù)值是否為整數(shù)。
• 如果參數(shù)不是數(shù)值返回false。
• JavaScript內(nèi)部整數(shù)和浮點(diǎn)數(shù)采用同樣的儲存方法，所以25和25.0被視為同一個(gè)值。
• JavaScript數(shù)值存儲為64位雙精度格式，數(shù)值精度最多可以達(dá)到53個(gè)二進(jìn)制位(1個(gè)隱藏位與52個(gè)有效位)，如果數(shù)值的精度超過這個(gè)限度，第54位及后面的位就會被丟棄，方法失效。

Math.trunc()

• Math.trunc()方法用于去除一個(gè)數(shù)的小數(shù)部分，返回整數(shù)部分。
• 對于非數(shù)值，Math.trunc()內(nèi)部使用Number方法將其先轉(zhuǎn)為數(shù)值。
• 對于空值和無法截取整數(shù)的值，返回NaN。

// 低版本瀏覽器兼容語法 Math.trunc = Math.trunc || function (x) {     return x < 0 ? Math.ceil(x) : Math.f1oor(x); };

Math.sign()

• Math. sign()方法用來判斷一個(gè)數(shù)到底是正數(shù)、負(fù)數(shù)、還是零。
• 如果參數(shù)是非數(shù)值，會自動轉(zhuǎn)為數(shù)值，對于無法轉(zhuǎn)為數(shù)值的值，會返回NaN。
• 它會返回五種值，參數(shù)為正數(shù)返回+1，參數(shù)為負(fù)數(shù)返回-1，參數(shù)為0返回0，參數(shù)為-0返回-0，其他值返回NaN。

6、字符串新增方法

模板字符串

模板字符串用于簡化字符串拼接，模板字符串支持解析變量、換行、調(diào)用函數(shù)。

模板字符串（template string）是增強(qiáng)版的字符串，用反引號標(biāo)識，可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

`文本${變量}文本${變量}文本`

includes()、startsWith()、endsWith()

• includes()，返回布爾值，表示是否找到了參數(shù)字符串。
• startsWith()，返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
• endsWith()，返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。
  -【注】這三個(gè)方法都支持第二個(gè)參數(shù)，表示開始搜索的位置。

padStart()、padEnd()

ES2017引入了字符串補(bǔ)全長度功能，padstart() 用于頭部補(bǔ)全，padEnd() 用于尾部補(bǔ)全。

• padstart() 和 padEnd() 共接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是字符串補(bǔ)全生效的最大長度第二個(gè)參數(shù)是用來補(bǔ)全的字符串，如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長度。
• 如果原字符串的長度等于或大于最大長度，則字符串補(bǔ)全不生效，返回原字符串。
• 如果用來補(bǔ)全的字符串與原字符串兩者的長度之和超過了最大長度，則會截去超出位數(shù)的補(bǔ)全字符串。
• padstart()的常見用途是為數(shù)值補(bǔ)全指定位數(shù)，也可以用于提示字符串格式。

// 補(bǔ)全長度方法提示字符串格式 '12'.padStart(10, 'YYYY-MM-DD'); // "YYYY-MM-12" '08-31'.padStart(10, 'YYYY-MM-DD'); // "YYYY-08-31"

trimStart()、trimEnd()

trimStart()消除字符串頭部的空格，trimEnd()消除字符串尾部的空格，它們返回的都是新字符串，不會修改原始字符串，兩個(gè)方法對字符串頭部（尾部）的tab鍵、換行符等不可見的空白符號也有效。

repeat()

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

replaceAll()

ES2021引入了replaceAll()方法，可以一次性替換所有匹配，它的用法與 replace()相同，返回一個(gè)新字符串，不會改變原字符串。

7、對象新增方法

• 在ES6中，可以直接在對象中寫入變量，key相當(dāng)于變量名，value相當(dāng)于變量值，并且可以直接省略value，通過key表示一個(gè)對象的完整屬性。
• 除了屬性可以簡寫，函數(shù)也可以簡寫，即省略掉關(guān)鍵字function。

Object.is()

它用來比較兩個(gè)值是否嚴(yán)格相等，與嚴(yán)格比較運(yùn)算符(===) 的行為基本- -致。

console.log(Object.is(+0, -0)); //false console.log(Object.is(NaN, NaN)); //true

Object.assign()

• object. assign()方法用于對象的合并,將源對象(source) 的所有可枚舉屬性,復(fù)制到目標(biāo)對象(target) 。
• obiect. assign()方法的第一個(gè)參數(shù)是目標(biāo)對象.后面的參數(shù)都是源對象。注意，如果目標(biāo)對象與源對象有，同名屬性，或多個(gè)源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。

8、數(shù)組新增方法

Array.from()

• Array.from()用于將類數(shù)組對象和可遍歷對象（包括Set和Map）轉(zhuǎn)為真正的數(shù)組。
• Array.from()方法還可以接受第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來對每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組。

Array.of()

• Array.of()用于將一組值轉(zhuǎn)換為數(shù)組。
• Array. of()返回參數(shù)值組成的數(shù)組，如果沒有參數(shù)就返回一個(gè)空數(shù)組。
• 此方法可以彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()因?yàn)閰?shù)個(gè)數(shù)的不同的差異。
• Array.of()基本上可以替代Array()或new Array()，它不存在由于參數(shù)不同而導(dǎo)致的重載。

// 兼容版本Arrayof()方法 function Arrayof() {     return Array.prototype.slice.call(arguments); }

數(shù)組實(shí)例的fill()

• fill()方法使用給定值，填充一個(gè)數(shù)組。
• 用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素，會被全部抹去。
• 方法支持第二個(gè)和第三個(gè)參數(shù)，用于指定填充的起始位置和結(jié)束位置。
• 如果填充的類型為對象，那被賦值的是同一個(gè)內(nèi)存地址的對象，而不是深拷貝對象。

數(shù)組實(shí)例的find()

• 用于找出第一個(gè)符合條件的數(shù)組成員，如果沒有找到返回undefined。

findIndex()

• 用于找出第一個(gè)符合條件的數(shù)組成員的位置，如果沒有找到返回-1。

includes()

• 表示某個(gè)數(shù)組是否包含給定的值，返回布爾值。

9、Let & Const

ES6中，除了全局和局部作用域，新增了塊級作用域。

Let

• 語法：let 變量名 = 變量值;
• let禁止在相同作用域內(nèi)重復(fù)聲明同一個(gè)變量，所以不能在函數(shù)內(nèi)部重新聲明參數(shù)。
• let聲明的變量只在 let 命令所在的代碼塊內(nèi)有效，帶有{塊級作用域}，不會導(dǎo)致聲明提升，可以記錄觸發(fā)鼠標(biāo)事件元素的下標(biāo)。

Const

• 語法：const 常量名 = 常量值;
• 常量不占內(nèi)存空間，常量名一般使用純大寫。
• const聲明變量必須立即初始化，不能留到以后賦值。
• const聲明的常量只在所在的塊級作用域內(nèi)有效，帶有{塊級作用域}，不會導(dǎo)致聲明提升，同樣存在暫時(shí)性死區(qū)，且同一常量禁止重復(fù)聲明，常量值無法改變。
• const聲明的變量，可以保證變量的內(nèi)存地址不變，對于簡單類型的數(shù)據(jù)來說相當(dāng)于常量，對于引用類型的數(shù)據(jù)只能保證其內(nèi)存地址中指向?qū)嶋H數(shù)據(jù)的指針不變，而無法保證數(shù)據(jù)結(jié)構(gòu)不變，將對象聲明為常量需要特別注意！

暫時(shí)性死區(qū)

暫時(shí)性死區(qū)（TDZ）一種語法規(guī)則，只要塊級作用域內(nèi)存在 let 或 const 命令，內(nèi)部聲明的變量就會"綁定"這個(gè)區(qū)域，形成封閉作用域，即代碼塊內(nèi)的變量必須先聲明再使用。

10、模塊化開發(fā)

• 用于分工合作，每一個(gè)js都是一個(gè)模塊，每個(gè)工程師都可以單獨(dú)開發(fā)自己的模塊，主模塊最后引入調(diào)用
• 1、子模塊要公開暴露
  export var obj={};
  2、主模塊引入并且使用
  import {obj as 別名} from “./文件路徑”
  3、HTML頁面引入時(shí)需要將type更換為module
• ES6模塊功能主要有兩個(gè)命令構(gòu)成，export和import，export用于規(guī)定獨(dú)立的對外接口，import用于輸入其他模塊提供的功能，一個(gè)模塊就是一個(gè)獨(dú)立的文件，引入模塊的script標(biāo)簽的type要設(shè)置為module。

11、擴(kuò)展運(yùn)算符 & Rest運(yùn)算符

ES6中新增了擴(kuò)展運(yùn)算符和 Rest運(yùn)算符，它們可以很好地解決函數(shù)參數(shù)和數(shù)組元素長度未知情況下的編碼問題，使得代碼能更加健壯簡潔。

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

• 擴(kuò)展運(yùn)算符用3個(gè)點(diǎn)表示...。
• 作用：將數(shù)組或類數(shù)組對象轉(zhuǎn)換為用逗號分隔的值序列，基本用法是拆解數(shù)組和字符串。

// 1.擴(kuò)展運(yùn)算符代替apply()函數(shù)獲取數(shù)組最大值 let arr = [1, 4, 2, 5, 3];  // apply()方法 Math.max.apply(null, arr); // 擴(kuò)展運(yùn)算符方法 Math.max(...arr);  // 2.擴(kuò)展運(yùn)算符代替concat()函數(shù)合并數(shù)組 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6];  // concat()方法 arr1.concat(arr2); // 擴(kuò)展運(yùn)算符方法 [...arr1, ...arr2];

Rest運(yùn)算符（剩余參數(shù)）

• Rest運(yùn)算符使用3個(gè)點(diǎn)表示...。
• 作用：與擴(kuò)展運(yùn)算符相反，用于將以逗號分隔的值序列轉(zhuǎn)換成數(shù)組。
• 使用rest運(yùn)算符進(jìn)行解構(gòu)時(shí)，res運(yùn)算符對應(yīng)的變量必須放在最后一位，否則變量無法識別讀取多少個(gè)數(shù)值，就會拋出錯(cuò)誤。
• 函數(shù)的參數(shù)是一個(gè)使用逗號分隔的值序列，可以使用rest運(yùn)算符轉(zhuǎn)換成數(shù)組以代替arguments的使用。

// 1.Rest運(yùn)算符與解構(gòu)組合使用拆分?jǐn)?shù)組 let arr = [1, 2, 3, 4, 5]; // 將數(shù)組拆分，第一個(gè)元素賦值到arr1，其余元素賦值到arr2 let [arr1, ...arr2] = arr; // 將數(shù)組拆分，前兩個(gè)元素賦值到arr1與arr2，其余元素賦值到arr3 let [arr1, arr2, ...arr3] = arr;  // 2.Rest運(yùn)算符代替arguments function sum(...arg) {     // 獲取形參數(shù)組     console.log(arg); } // 傳入形參 sum(形參1, 形參2, ...);

區(qū)分兩種運(yùn)算符

• 擴(kuò)展運(yùn)算符和rest運(yùn)算符互為逆運(yùn)算，擴(kuò)展運(yùn)算符是將數(shù)組分割成獨(dú)立的序列，而rest運(yùn)算符是將獨(dú)立的序列合并成一個(gè)數(shù)組。
• 當(dāng)三個(gè)點(diǎn)出現(xiàn)在函數(shù)形參上或賦值等號左側(cè)，則為rest運(yùn)算符。
• 當(dāng)三個(gè)點(diǎn)出現(xiàn)在函數(shù)實(shí)參上或賦值等號右側(cè)，則為擴(kuò)展運(yùn)算符。

拓展 | Let、Var、Const區(qū)別

• Let聲明的變量，存在塊級作用域，不存在變量提升，值可更改。
• Var聲明的變量，存在函數(shù)作用域，存在變量提升，值可更改。
• Const聲明的常量，存在塊級作用域，值不可更改。

拓展 | ES6遍歷對象屬性五種方法

• for…in

for…in用于遍歷對象和自身和繼承的可枚舉屬性(不包含Symbol屬性)。

• Object.keys(obj)

Object.keys()函數(shù)返回一個(gè)數(shù)組，包含對象自身所有可枚舉屬性,不包含繼承屬性和Symbol屬性。

• Reflect.ownKeys(obj)

Reflect.ownKeys(obj)函數(shù)返回一個(gè)數(shù)組，可包含枚舉屬性,不可枚舉屬性以及Symbol屬性,不包含繼承屬性。

• Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj)函數(shù)返回一個(gè)數(shù)組，包含對象自身的可枚舉屬性和不可枚舉屬性，不包含繼承屬性和Symbol屬性。

• Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj)函數(shù)返回一個(gè)數(shù)組，包含對象自身所有Symbol屬性,不包含其他屬性。

【