ES5 和 ES6 的區(qū)別，ES6 的新增方法

ES5 和 ES6 的區(qū)別

ECMAScript5，即 ES5，是 ECMAScript 的第五次修訂，于 2009 年完成標(biāo)準(zhǔn)化

ECMAScript6，即 ES6，是 ECMAScript 的第六次修訂，于 2015 年完成，也稱 ES2015

ES6 是繼 ES5 之后的一次改進(jìn)，相對于 ES5 更加簡潔，提高了開發(fā)效率

ES6 的新增方法

1、新增聲明命令 let 和 const

在 ES6 中通常用 let 和 const 來聲明，let 表示變量、const 表示常量

1.1）特點(diǎn)

let 和 const 都是塊級作用域。以{}代碼塊作為作用域范圍 只能在代碼塊里面使用

不存在變量提升，只能先聲明再使用，否則會報(bào)錯。在代碼塊內(nèi)，在聲明變量之前，

該變量

都是不可用的。這在語法上，稱為“暫時性死區(qū)（”

temporal dead zone，簡稱 TDZ），

在同一個代碼塊內(nèi)，不允許重復(fù)聲明北京市順義區(qū)京順路 99 號·黑馬程序員 www.itheima.com

第 157 頁 共 349 頁

const 聲明的是一個只讀常量，在聲明時就需要賦值。（如果 const 的是一個對象，對

象所包含的值是可以被修改的。抽象一點(diǎn)兒說，就是對象所指向的地址不能改變，而

變量成員 是可以修改的。）

2、模板字符串（

Template String）

用一對反引號(`)標(biāo)識，它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，也可以

在字符串中嵌入變量，js 表達(dá)式或函數(shù)，變量、js 表達(dá)式或函數(shù)需要寫在${ }中。

3、函數(shù)的擴(kuò)展

3.1）函數(shù)的默認(rèn)參數(shù)

ES6 為參數(shù)提供了默認(rèn)值。在定義函數(shù)時便初始化了這個參數(shù)，以便在參數(shù)沒有被傳遞

進(jìn)去時使用。

3.2）箭頭函數(shù)

在 ES6 中，提供了一種簡潔的函數(shù)寫法，我們稱作“箭頭函數(shù)”。

3.2.1）寫法

函數(shù)名=(形參)=>{……}

當(dāng)函數(shù)體中只有一個表達(dá)式時，{}和 return 可以省

略當(dāng)函數(shù)體中形參只有一個時，()可以省略。

3.2.2）特點(diǎn)

箭頭函數(shù)中的 this 始終指向箭頭函數(shù)定義時的離 this 最近的一個函數(shù)，如果沒有最

近的函數(shù)就指向 window。

4、對象的擴(kuò)展

4.1）屬性的簡寫

ES6 允許在對象之中，直接寫變量。這時，屬性名為變量名, 屬性值為變量 的值。

var foo = 'bar';

var baz = {foo}; //等同于 var baz = {foo: foo};

方法的簡寫。省略冒號與 function 關(guān)鍵字。

var o = {

method() {

return "Hello!";

}

};

// 等同于

var o = {

method: function() {

return "Hello!";

}

};

4.2）Object.keys()方法

獲取對象的所有屬性名或方法名（不包括原形的內(nèi)容），返回一個數(shù)組。

var obj={name: "john", age: "21", getName: function () { alert(this.name)}};

console.log(Object.keys(obj));

// ["name", "age", "getName"]

console.log(Object.keys(obj).length);

//3

console.log(Object.keys(["aa", "bb", "cc"]));

//["0", "1", "2"]

console.log(Object.keys("abcdef"));

//["0", "1", "2", "3", "4", "5"]北京市順義區(qū)京順路 99 號·黑馬程序員 www.itheima.com

第 158 頁 共 349 頁

4.3）Object.assign ()

assign 方法將多個原對象的屬性和方法都合并到了目標(biāo)對象上面。可以接收多個參數(shù)，

第一個參數(shù)是目標(biāo)對象，后面的都是源對象

var target = {}; //目標(biāo)對象

var source1 = {name : 'ming', age: '19'}; //源對象 1

var source2 = {sex : '女'}; //源對象 2

var source3 = {sex : '男'}; //源對象 3，和 source2 中的對象有同名屬性 sex

Object.assign(target,source1,source2,source3);

console.log(target);

//{name : 'ming', age: '19', sex: '男'}

5、for...of 循環(huán)

var arr=["小林","小吳","小佳"];

for(var v of arr){

console.log(v);

}

//小林 //小吳 //小佳

6、import 和 export

ES6 標(biāo)準(zhǔn)中，JavaScript 原生支持模塊(module)。這種將 JS 代碼分割成不同功能的小塊進(jìn)行

模塊化，將不同功能的代碼分別寫在不同文件中，各模塊只需導(dǎo)出公共接口部分，然后通

過模塊的導(dǎo)入的方式可以在其他地方使用

export 用于對外輸出本模塊（一個文件可以理解為一個模塊）變量的接口

import 用于在一個模塊中加載另一個含有 export 接口的模塊

import 和 export 命令只能在模塊的頂部，不能在代碼塊之中

7、Promise 對象

Promise 是異步編程的一種解決方案，將異步操作以同步操作的流程表達(dá)出來，避免了層層

嵌套的回調(diào)函數(shù)，要是為了解決異步處理回調(diào)地獄(也就是循環(huán)嵌套的問題)而產(chǎn)生的

Promise 構(gòu)造函數(shù)包含一個參數(shù)和一個帶有 resolve（解析）和 reject（拒絕）兩個參數(shù)的回

調(diào)。在回調(diào)中執(zhí)行一些操作（例如異步），如果一切都正常，則調(diào)用 resolve，否則調(diào)用 reject。

對于已經(jīng)實(shí)例化過的 Promise 對象可以調(diào)用 Promise.then() 方法，傳遞 resolve 和 reject

方法作為回調(diào)。then()方法接收兩個參數(shù)：onResolve 和 onReject，分別代表當(dāng)前 Promise 對

象在成功或失敗時

Promise 的 3 種狀態(tài)

Fulfilled 為成功的狀態(tài)，Rejected 為失敗的狀態(tài)，Pending 既不是 Fulfilld

也不是

Rejected 的狀態(tài)，可以理解為 Promise 對象實(shí)例創(chuàng)建時候的初始狀態(tài)

8、解構(gòu)賦值

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

解構(gòu)賦值是對賦值運(yùn)算符的擴(kuò)展。

是一種針對數(shù)組或者對象進(jìn)行模式匹配，然后對其中的變量進(jìn)行賦值。

在代碼書寫上簡潔且易讀，語義更加清晰明了；也方便了復(fù)雜對象中數(shù)據(jù)字段獲取。

數(shù)組中的值會自動被解析到對應(yīng)接收該值的變量中，數(shù)組的解構(gòu)賦值要一一對應(yīng)如果

有對應(yīng)不上的就是 undefined

let [a, b, c] = [1, 2, 3];

// a = 1 // b = 2 // c = 3北京市順義區(qū)京順路 99 號·黑馬程序員 www.itheima.com

第 159 頁 共 349 頁

8.2）對象的解構(gòu)賦值

對象的解構(gòu)賦值和數(shù)組的解構(gòu)賦值其實(shí)類似，但是數(shù)組的數(shù)組成員是有序的

而對象的屬性則是無序的，所以對象的解構(gòu)賦值簡單理解是等號的左邊和右邊的結(jié)構(gòu)

相同

let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb'

let { baz : foo } = { baz : 'ddd' }; // foo = 'ddd'

9、Set 數(shù)據(jù)結(jié)構(gòu)

Set 數(shù)據(jù)結(jié)構(gòu)，類似數(shù)組。所有的數(shù)據(jù)都是唯一的，沒有重復(fù)的值。它本身是一個構(gòu)造函數(shù)。

9.1）Set 屬性和方法

Size（） 數(shù)據(jù)的長度

Add（） 添加某個值，返回 Set 結(jié)構(gòu)本身。

Delete（） 刪除某個值，返回一個布爾值，表示刪除是否成功。

Has（） 查找某條數(shù)據(jù)，返回一個布爾值。

Clear（）清除所有成員，沒有返回值。

9.2）主要應(yīng)用場景：數(shù)組去重

10、class

class 類的繼承 ES6 中不再像 ES5 一樣使用原型鏈實(shí)現(xiàn)繼承，而是引入 Class 這個概念

ES6 所寫的類相比于 ES5 的優(yōu)點(diǎn)：

區(qū)別于函數(shù)，更加專業(yè)化（類似于 JAVA 中的類）

寫法更加簡便，更加容易實(shí)現(xiàn)類的繼承

11、…

展開運(yùn)算符可以將數(shù)組或?qū)ο罄锩娴闹嫡归_；還可以將多個值收集為一個變量

12、async、await

使用 async/await, 搭配 Promise,可以通過編寫形似同步的代碼來處理異步流程, 提高代碼

的簡潔性和可讀性 async 用于申明一個 function 是異步的，而 await 用于等待一個異步方

法執(zhí)行完成

13、修飾器

@decorator 是一個函數(shù)，用來修改類甚至于是方法的行為。修飾器本質(zhì)就是編譯時執(zhí)行的函

數(shù)

14、Symbol

Symbol 是一種基本類型。Symbol 通過調(diào)用 symbol 函數(shù)產(chǎn)生，它接收一個可選的名字參數(shù)，

該函數(shù)返回的 symbol 是唯一的

15、Proxy

Proxy 代理使用代理（

Proxy）監(jiān)聽對象的操作，然后可以做一些相應(yīng)事情