我們都知道JavaScript是由三部分組成：

1. ECMAScript(核心)：規(guī)定了語言的組成部分=>語法、類型、語句、關(guān)鍵字、保留字、操作符、對(duì)象

2. BOM(瀏覽器對(duì)象模型): 支持訪問和操作瀏覽器窗口，可以控制瀏覽器顯示頁面以外的部分。

3. DOM(文檔對(duì)象模型): 把整個(gè)頁面映射為一個(gè)多層節(jié)點(diǎn)結(jié)果，可借助DOM提供的API，可刪除、添加和修改任何節(jié)點(diǎn)

什么是ES5？

ES5全稱ECMAScript5，即 ES5，是ECMAScripts的第五次修訂（第四版因?yàn)檫^于復(fù)雜廢棄了），又稱ECMAScript2009，于 2009 年完成標(biāo)準(zhǔn)化。

什么是ES6？

ES6， 全稱 ECMAScript 6.0 ，即 ES6，是ECMAScripts的第六次修訂，又稱 ES2015，于2015年06 月發(fā)版，是 JavaScript 的下一個(gè)版本標(biāo)準(zhǔn)。

ES6 主要是為了解決 ES5 的先天不足，目前瀏覽器的 JavaScript 是 ES5 版本，大多數(shù)高版本的瀏覽器也支持 ES6，不過只實(shí)現(xiàn)了 ES6 的部分特性和功能。ES6 是繼 ES5 之后的一次改進(jìn)，相對(duì)于 ES5 更加簡(jiǎn)潔，提高了開發(fā)效率

首先，說說ES5的特性：

1. strict模式：嚴(yán)格模式，限制一些用法。

2. Array增加方法：有every、some、forEach、filter、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法。

3. Object方法： Object.getPrototypeOf、Object.create等方法。

• Object.getPrototypeOf
• Object.create
• Object.getOwnPropertyNames
• Object.defineProperty
• Object.getOwnPropertyDescriptor
• Object.defineProperties
• Object.keys
• Object.preventExtensions / Object.isExtensible
• Object.seal / Object.isSealed
• Object.freeze / Object.isFrozen

其次，談?wù)凟S6的特性：

1. 塊級(jí)作用域 => 關(guān)鍵字let，常量const

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

?? 特點(diǎn)

let 和 const 都是塊級(jí)作用域。以{}代碼塊作為作用域范圍 只能在代碼塊里面使用，不存在變量提升，只能先聲明再使用，否則會(huì)報(bào)錯(cuò)。在代碼塊內(nèi)，在聲明變量之前，該變量 都是不可用的。這在語法上，稱為“暫時(shí)性死區(qū)”（temporal dead zone，簡(jiǎn)稱 TDZ），在同一個(gè)代碼塊內(nèi)，不允許重復(fù)聲明。

const 聲明的是一個(gè)只讀常量，在聲明時(shí)就需要賦值。（如果 const 的是一個(gè)對(duì)象，

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

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

2. 對(duì)象的擴(kuò)展

?? 屬性和方法的簡(jiǎn)寫

對(duì)象字面量屬性的簡(jiǎn)寫

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

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

對(duì)象字面量方法的簡(jiǎn)寫。省略冒號(hào)與 function 關(guān)鍵字

var o = {
  method() {
    return "Hello!";
  }
};
// 等同于
var o = {
  method: function () {
    return "Hello!";
  }
};

?? Object.keys()方法

獲取對(duì)象的所有屬性名或方法名（不包括原形的內(nèi)容），返回一個(gè)數(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"]

?? Object.assign ()

assign 方法將多個(gè)原對(duì)象的屬性和方法都合并到了目標(biāo)對(duì)象上面?？梢越邮斩鄠€(gè)參

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

var target = {}; //目標(biāo)對(duì)象
var source1 = {name : 'ming', age: '19'}; //源對(duì)象 1
var source2 = {sex : '女'}; //源對(duì)象 2
var source3 = {sex : '男'}; //源對(duì)象 3，和 source2 中的對(duì)象有同名屬性 sex
Object.assign(target,source1,source2,source3);
console.log(target); //{name : 'ming', age: '19', sex: '男'}

3. 解構(gòu)賦值

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

解構(gòu)賦值是對(duì)賦值運(yùn)算符的擴(kuò)展。是一種針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配，然后對(duì)其中的變量進(jìn)行賦值。在代碼書寫上簡(jiǎn)潔且易讀，語義更加清晰明了；也方便了復(fù)雜對(duì)象中數(shù)據(jù)字段獲取。數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中，數(shù)組的解構(gòu)賦值要一一對(duì)應(yīng)如果

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

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

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

對(duì)象的解構(gòu)賦值和數(shù)組的解構(gòu)賦值其實(shí)類似，但是數(shù)組的數(shù)組成員是有序的，而對(duì)象的屬性則是無序的，所以對(duì)象的解構(gòu)賦值簡(jiǎn)單理解是等號(hào)的左邊和右邊的結(jié)構(gòu)相同。

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

4. 展開運(yùn)算符（Spread operator）

展開運(yùn)算符（spread operator）允許一個(gè)表達(dá)式在某處展開。展開運(yùn)算符在多個(gè)參數(shù)（用于函數(shù)調(diào)用）或多個(gè)元素（用于數(shù)組字面量）或者多個(gè)變量（用于解構(gòu)賦值）的地方可以使用。

let obj1 = {
 value1: 1,
 value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}

上面的用法實(shí)際相當(dāng)于

obj2 = {value1: 1, value2: 2}

展開運(yùn)算符的寫法與obj2 = obj1直接賦值的寫法的區(qū)別在于如果直接賦值的話，對(duì)于引用類型來說，相當(dāng)于只是賦值了obj1的內(nèi)存空間地址，當(dāng)obj2發(fā)生改變的時(shí)候，obj1也會(huì)隨著發(fā)生改變。而是用展開運(yùn)算符寫法的話，由于obj1對(duì)象中的屬性類型都是基本類型，相當(dāng)于重新創(chuàng)建了一個(gè)對(duì)象，此時(shí)obj2發(fā)生改變的時(shí)候，并不會(huì)影響obj1這個(gè)對(duì)象。但是僅限于其屬性都為基本類型的情況（或者說只進(jìn)行了一層的深拷貝）。如果該對(duì)象中的屬性還有引用類型的話，修改屬性中引用類型的值，則兩個(gè)對(duì)象的屬性值都會(huì)被修改。

let obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
let obj2 = {...obj1
};
obj2.attri2 = 888;
obj2.attri1[0] = 7;
console.log('obj1:', obj1);
console.log('obj2:', obj2);

展開運(yùn)算符的應(yīng)用

1.在函數(shù)中使用展開運(yùn)算符

function test(a, b, c){};
let arr = [1, 2, 3];
test(...arr);

2.數(shù)組字面量中使用展開運(yùn)算符

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
// 使用push方法
let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]

3.用于解構(gòu)賦值，解構(gòu)賦值中展開運(yùn)算符只能用在最后，否則會(huì)報(bào)錯(cuò)。

// 解構(gòu)賦值中展開運(yùn)算符只能用在最后。
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4.類數(shù)組變成數(shù)組

let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];

5.對(duì)象中使用展開運(yùn)算符

ES7中的對(duì)象展開運(yùn)算符符可以讓我們更快捷地操作對(duì)象：

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}

將一個(gè)對(duì)象插入另外一個(gè)對(duì)象當(dāng)中：

let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

合并兩個(gè)對(duì)象:

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

5. 函數(shù)的擴(kuò)展

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

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

遞進(jìn)去時(shí)使用。

?? 箭頭函數(shù)

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

寫法：函數(shù)名=(形參)=>{……} 當(dāng)函數(shù)體中只有一個(gè)表達(dá)式時(shí)，{}和 return 可以省 略

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

特點(diǎn)：箭頭函數(shù)中的 this 始終指向箭頭函數(shù)定義時(shí)的離 this 最近的一個(gè)函數(shù)，如果沒有最

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

6. 模板字符串

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

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

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// return "Hello Bob, how are you today?"

7. for...of循環(huán)

var arr=["小林","小吳","小佳"];
for(var v of arr){
console.log(v);
}
//小林 //小吳 //小佳

8. Class類，有constructor、extends、super，本質(zhì)上是語法糖，（對(duì)語言的功能并沒有影響，但是更方便程序員使用）。

class Artist {
    constructor(name) {
        this.name = name;
    }
    perform() {
        return this.name + " performs ";
    }
}
class Singer extends Artist {
    constructor(name, song) {
        super.constructor(name);
        this.song = song;
    }
    perform() {
        return super.perform() + "[" + this.song + "]";
    }
}
let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true
james.perform(); // "Etta James performs [At last]"

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

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

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

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

9. Map + Set + WeakMap + WeakSet

四種集合類型，WeakMap、WeakSet作為屬性鍵的對(duì)象如果沒有別的變量在引用它們，則會(huì)被回收釋放掉。

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

10. Math + Number + String + Array + Object APIs

一些新的API

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })

11. proxies：使用代理（Proxy）監(jiān)聽對(duì)象的操作，然后可以做一些相應(yīng)事情。

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};
 
var p = new Proxy(target, handler);
p.world === 'Hello, world!';

可監(jiān)聽的操作： get、set、has、deleteProperty、apply、construct、getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf、enumerate、ownKeys、preventExtensions、isExtensible。 

12. Symbol： 唯一命名

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

var key = Symbol("key");
var key2 = Symbol("key");
key == key2  //false

13. Promises：處理異步操作的對(duì)象，使用了Promise對(duì)象之后可以用一種鏈?zhǔn)秸{(diào)用的方式來組織代碼，讓代碼更加直觀（類似jQuery的deferred 對(duì)象）。

function fakeAjax(url) {
  return new Promise(function (resolve, reject) {
    // setTimeouts are for effect, typically we would handle XHR
    if (!url) {
      return setTimeout(reject, 1000);
    }
    return setTimeout(resolve, 1000);
  });
}
// no url, promise rejected
fakeAjax().then(function () {
  console.log('success');
},function () {
  console.log('fail');
});

Promise 對(duì)象Promise 是異步編程的一種解決方案，將異步操作以同步操作的流程表達(dá)出來，避免了層層嵌套的回調(diào)函數(shù)，要是為了解決異步處理回調(diào)地獄(也就是循環(huán)嵌套的問題)而產(chǎn)生的。

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

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

reject。

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

reject方法作為回調(diào)。

then()方法接收兩個(gè)參數(shù)：onResolve 和 onReject，分別代表當(dāng)前Promise 對(duì)象在成功或失敗時(shí)Promise 的 3 種狀態(tài)：Fulfilled 為成功的狀態(tài)，Rejected 為失敗的狀態(tài)，Pending 既不是 Fulfilld 也不是Rejected 的狀態(tài)，可以理解為 Promise 對(duì)象實(shí)例創(chuàng)建時(shí)候的初始狀態(tài)

14. import 和 export

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

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

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

export 用于對(duì)外輸出本模塊（一個(gè)文件可以理解為一個(gè)模塊）變量的接口。

import 用于在一個(gè)模塊中加載另一個(gè)含有 export 接口的模塊。

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

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

Set是 ES6 提供的一種新的數(shù)據(jù)結(jié)構(gòu)，類似于數(shù)組。所有的數(shù)據(jù)都是唯一的，沒有重復(fù)的值。它本身是一個(gè)構(gòu)造函數(shù)。由于成員都是唯一的，不重復(fù)的特點(diǎn)，因此可以通過Set輕松實(shí)現(xiàn)對(duì)數(shù)組的 去重、交、并、補(bǔ)等操作。

?? Set 屬性和方法

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

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

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

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

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

interface Set {
    add(value): this;
    clear(): void;
    delete(value): boolean;
    forEach(callbackfn: (value, value2, set: Set) => void, thisArg?: any): void;
    has(value): boolean;
    readonly size: number;
}

?? Set主要應(yīng)用場(chǎng)景：數(shù)組去重、交集、并集、補(bǔ)集。

根據(jù)Set的特點(diǎn)，有很多場(chǎng)景可以通過Set快速實(shí)現(xiàn)。JavaScript Set 實(shí)用場(chǎng)景(數(shù)組: 去重、交、并、補(bǔ))

let arr1 = [1, 2, 3, 4, 5, 6, 7, 4, 3, 2, 1];
 
// 去重
let newArr = [...new Set(arr1)];
console.log(arr1); // [LOG]: [ 1, 2, 3, 4, 5, 6, 7, 4, 3, 2, 1 ] 
console.log(newArr); // [LOG]: [ 1, 2, 3, 4, 5, 6, 7 ] 

let arr1 = [1, 2, 3, 4, 5];
let arr2 = [3, 4, 5, 6, 7];
 
let arr1_set = new Set(arr1);
let arr2_set = new Set(arr2);
 
// 交集
let intersectionArr = [...arr1_set].filter(val => arr2_set.has(val));
 
console.log(intersectionArr );  // [LOG]: [ 3, 4, 5]
 
// 并集
let unionArr = [...new Set([...arr1, ...arr2])];
console.log(unionArr );  // [LOG]: [ 1, 2, 3, 4, 5, 6, 7 ] 
 
// 補(bǔ)集
let complementaryArr = [...arr1_set].filter(val => !arr2_set.has(val));
console.log(complementaryArr );  // [LOG]: [ 1, 2 ] 

15.  Modules

ES6的內(nèi)置模塊功能借鑒了CommonJS和AMD各自的優(yōu)點(diǎn)：

(1) 具有CommonJS的精簡(jiǎn)語法、唯一導(dǎo)出出口(single exports)和循環(huán)依賴(cyclic dependencies)的特點(diǎn)。

(2) 類似AMD，支持異步加載和可配置的模塊加載。

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
 
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
 
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
 
Module Loaders:
// Dynamic loading – ‘System' is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});
 
// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

最后，我們來看看ES5和ES6的區(qū)別：

1. 系統(tǒng)庫的引入

ES5：需要先使用require導(dǎo)入React包，成為對(duì)象，再去進(jìn)行真正引用；

ES6：可以使用import方法來直接實(shí)現(xiàn)系統(tǒng)庫引用，不需要額外制作一個(gè)類庫對(duì)象

2. 導(dǎo)出及引用單個(gè)類

ES5：要導(dǎo)出一個(gè)類給別的模塊用，一般通過module.exports來實(shí)現(xiàn)。引用時(shí)，則依然通過require方法來獲??；

ES6：可以使用用export default來實(shí)現(xiàn)相同的功能，使用import方法來實(shí)現(xiàn)導(dǎo)入

3. 定義組件

ES5：組件類的定義可以通過React.createClass實(shí)現(xiàn)

ES6：讓組件類去繼承React.Component類就可以了

4. 組件內(nèi)部定義方法

ES5：采用的是 ###:function()的形式，方法大括號(hào)末尾需要添加逗號(hào)；

ES6：省略了【: function】這一段，并且結(jié)尾不需要加逗號(hào)來實(shí)現(xiàn)分隔。

5. 定義組件的屬性類型和默認(rèn)屬性

ES5：屬性類型和默認(rèn)屬性分別通過propTypes成員和getDefaultProps方法來實(shí)現(xiàn)(這兩個(gè)方法應(yīng)該是固定名稱的)；

ES6：統(tǒng)一使用static成員來實(shí)現(xiàn)。

6. 初始化STATE

ES5：初始化state的方法是固定的getInitialState；

ES6：第一種，直接構(gòu)造state函數(shù)；第二種，相當(dāng)于OC中的方法重寫，重寫constructor方法

總結(jié)

到此這篇關(guān)于ES5和ES6的區(qū)別的文章就介紹到這了,更多相關(guān)ES5和ES6區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！