ES6(ECMAScript 6)是JavaScript語言的最新版本,它在ES5的基礎(chǔ)上做了很多增強(qiáng)和擴(kuò)展，使JavaScript的編程模式更加現(xiàn)代化和優(yōu)雅,不僅拓展了語言表達(dá)能力,也為編程帶來了全新的編程范式和思維方式。在項(xiàng)目中使用ES6,讓代碼更加簡(jiǎn)潔、方便模塊化和面向?qū)ο髮?shí)現(xiàn)等，進(jìn)而提高開發(fā)效率、減少代碼量。

ES6 常用新特性如下：

• let/const
• 箭頭函數(shù)
• 模板字符串
• 解構(gòu)賦值
• 模塊化
• 類和繼承
• 默認(rèn)參數(shù)
• rest參數(shù)
• 擴(kuò)展運(yùn)算符
• Promise
• 迭代器等
• Symbol
• Iterator
• Generator
• Proxy

以下是一些ES6常見的知識(shí)點(diǎn)和示例代碼：

1. let和const
   • let用于聲明塊級(jí)作用域變量
   • const用于聲明常量,常量必須初始化

let x = 1;
if (x === 1) {let x = 2; // 這個(gè)x只在If語句塊內(nèi)有效console.log(x); // 輸出2
}
console.log(x); // 輸出1const PI = 3.14159;
PI = 1; // 錯(cuò)誤,PI是常量

2. 箭頭函數(shù)
   • 更簡(jiǎn)潔的函數(shù)書寫方式
   • 繼承當(dāng)前上下文的this關(guān)鍵字

const add = (a, b) => a + b;const obj = {value: 1,getPlusValue: function(b) {return this.value + b; // this綁定到obj},getPlusValueES6: (b) => {return this.value + b; // this繼承外層上下文}
}

3. 模板字符串
   • 用反引號(hào) `` 標(biāo)識(shí)
   • 可以當(dāng)作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量/表達(dá)式

let name = "Bruce";
console.log(`Hello ${name}`); // Hello Brucelet str = `This 
is 
a 
multi-line
string`; // 多行字符串

4. 解構(gòu)賦值
   • 可以從數(shù)組或?qū)ο笾刑崛≈?對(duì)變量進(jìn)行賦值

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3let obj = {name: "Bruce", age: 30};
let {name, age} = obj;
console.log(name, age); // Bruce 30

5. 模塊導(dǎo)入導(dǎo)出
   • 使用 export 導(dǎo)出模塊中的變量、函數(shù)或類
   • 使用 import 導(dǎo)入其他模塊中的部分或全部

// module.js
export const name = "Bruce";
export function sayHi() {console.log("Hi");
}// app.js 
import { name, sayHi } from "./module.js";
console.log(name); // Bruce
sayHi(); // Hi

6. 類和繼承
   • 使用 class 關(guān)鍵字定義類
   • 使用 extends 關(guān)鍵字實(shí)現(xiàn)繼承
   • 支持靜態(tài)方法和構(gòu)造器

class Animal {constructor(name) {this.name = name;}sayName() {console.log(`My name is ${this.name}`);}
}class Dog extends Animal {constructor(name) {super(name); // 調(diào)用父類構(gòu)造函數(shù)}bark() {console.log("Woof Woof!");}
}let dog = new Dog("Buddy");
dog.sayName(); // My name is Buddy
dog.bark(); // Woof Woof!

7. 默認(rèn)參數(shù)值
   • 在定義函數(shù)時(shí)可以為參數(shù)設(shè)置默認(rèn)值

function say(message="Hi") {console.log(message);
}say(); // Hi
say("Hello"); // Hello

8. rest參數(shù)
   • 用于獲取函數(shù)的實(shí)參,存入數(shù)組中

function add(...nums) {let sum = 0;for(let n of nums) {sum += n;}return sum;
}console.log(add(1,2,3)); // 6
console.log(add(4,5,6,7,8,9)); // 39

9. spread操作符
   • 可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時(shí)將數(shù)組表達(dá)式展開

let params = [3,5,1];
console.log(Math.max(...params)); // 5 
console.log([...'hello']); // ['h','e','l','l','o']

10. 對(duì)象字面量擴(kuò)展
    • 可以直接在對(duì)象中添加函數(shù)
    • 屬性名可以是變量/表達(dá)式
    • 可通過擴(kuò)展運(yùn)算符復(fù)制對(duì)象的可枚舉屬性

let obj = {name: "Bruce",sayName() {console.log(this.name);},[Symbol.iterator]: function() {// ...}
}let obj2 = { ...obj, age: 30 }; // 復(fù)制obj所有可枚舉屬性到obj2

11. Promise
    • 異步編程的一種解決方案
    • 代表一個(gè)異步操作的最終結(jié)果

let promise = new Promise(function(resolve, reject) {setTimeout(function() {resolve("Hello World");}, 2000);
});promise.then(function(value) {console.log(value); // Hello World
});

12. for…of循環(huán)
    • 可以遍歷各種可迭代對(duì)象(Array、Map、Set等)

let arr = ['a', 'b', 'c'];
for(let x of arr) {console.log(x); // 依次輸出a, b, c
}

13. Map和Set
    • Map是存儲(chǔ)key-value對(duì)的有序集合
    • Set是不重復(fù)值的有序集合

let map = new Map();
map.set('name', 'Bruce');
map.set('age', 30);
console.log(map.get('name')); // Brucelet set = new Set();
set.add(1);
set.add(5);
set.add(5); // 重復(fù)的5會(huì)被忽略
console.log(set.size); // 2

好的,我繼續(xù)介紹一些ES6其他常見的知識(shí)點(diǎn):

14. Symbol
    • 一種新的原始數(shù)據(jù)類型,可作為對(duì)象屬性的標(biāo)識(shí)符
    • 每個(gè)Symbol值都是不相等的

let symbol1 = Symbol("id");
let symbol2 = Symbol("id");
console.log(symbol1 === symbol2); // falselet obj = {};
obj[symbol1] = "Hello";
console.log(obj[symbol1]); // Hello

15. 迭代器Iterator
    • 為各種數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問接口
    • 支持對(duì)象實(shí)現(xiàn)Iterator接口,從而可以用for…of遍歷

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();console.log(iter.next()); // { value: 'a', done: false }
console.log(iter.next()); // { value: 'b', done: false }
console.log(iter.next()); // { value: 'c', done: false }
console.log(iter.next()); // { value: undefined, done: true }

16. 生成器Generator
    • 可以暫停執(zhí)行的函數(shù)
    • 通過yield關(guān)鍵字交還控制權(quán)
    • 配合Iterator可實(shí)現(xiàn)惰性運(yùn)算

function* idGen() {let id = 0;while(true) {yield id++;}
}let gen = idGen();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1

17. 代理Proxy
    • 用于修改某些操作的默認(rèn)行為
    • 等同于在語言層面做出修改,可以對(duì)編程語言進(jìn)行拓展

let obj = { name: "Bruce" };
let proxy = new Proxy(obj, {get(target, prop) {console.log(`Reading ${prop}`);return target[prop];},set(target, prop, value) {console.log(`Setting ${prop} to ${value}`);target[prop] = value;}
});proxy.name; // Reading name, Bruce
proxy.name = "Clark"; // Setting name to Clark

18. 反射Reflection
    • 將對(duì)象內(nèi)部特征反射于外部可操作,與Proxy形成映射
    • ES6新增Reflect對(duì)象與Proxy相呼應(yīng)

Reflect.getPrototypeOf({}) === Object.getPrototypeOf({});
Reflect.get(obj, 'name') === obj.name;