let/const

if (true) {    let foo = "word";}
console.log(foo); // error

在這里，錯(cuò)誤是一件好事，因?yàn)樗梢苑乐乖谏a(chǎn)過程中發(fā)生潛在的錯(cuò)誤。

如果在上面的例子中使用var（就像在傳統(tǒng)的Javascript代碼中那樣)而不是let，就不會(huì)出現(xiàn)錯(cuò)誤。

const是另一個(gè)用于聲明變量的ES6關(guān)鍵字。不同之處在于const創(chuàng)建的變量在聲明之后不能更改，這個(gè)特點(diǎn)可以有效的避免BUG的出現(xiàn)，因此在編寫代碼過程中，建議盡量寫純函數(shù)（純函數(shù)，就是給定函數(shù)固定的輸入，輸出的結(jié)果就是固定的，不會(huì)受函數(shù)外的變量等的影響）。

例如：

const a = 2021a = 2020 // error

有幾種創(chuàng)建變量的方法，我們應(yīng)該使用哪一種?

最好的做法是盡可能使用const。只有當(dāng)你需要一個(gè)以后需要更改的變量時(shí)才使用let，比如在for循環(huán)中。

for…of

說到循環(huán)，在ES6語法中有一種更簡(jiǎn)單的方法來編寫for循環(huán)，甚至不需要使用let。

例如，一個(gè)傳統(tǒng)的for循環(huán)是這樣的：

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {    const item = arr[i];    console.log(item);}

在ES6中，非常簡(jiǎn)單：

const arr = [1, 2, 3];
for (const item of arr) {    console.log(item);}

不要與for..in語法混淆；他們是完全不同的東西。for..in將獲得數(shù)組/對(duì)象中的屬性，而for..of將獲得實(shí)際想要迭代的數(shù)據(jù)。

Iterable

可迭代對(duì)象是實(shí)現(xiàn)可迭代協(xié)議的任何對(duì)象。(協(xié)議只是指需要通過在對(duì)象中使用特定名稱的特定方法來滿足的需求。)

例如，下面是一個(gè)實(shí)現(xiàn)了iterable協(xié)議的對(duì)象：

const twice = {    [Symbol.iterator]() {        let i = 0;        const iterator = {            next() {                if (i < 2) {                    return { value: i++, done: false };                } else {                    return { value: undefined, done: true };                }            },        };        return iterator;    },};

現(xiàn)在可以在for..of循環(huán)中使用此twice對(duì)象：

for(const x of twice){  console.log(x)}

這會(huì)對(duì)twice對(duì)象進(jìn)行兩次循環(huán)，分別得到0和1。

為了創(chuàng)建一個(gè)可迭代對(duì)象，實(shí)際上實(shí)現(xiàn)了兩個(gè)協(xié)議，iterable協(xié)議和iterator協(xié)議。

為了滿足作為可迭代對(duì)象的要求，需要一個(gè)名為[Symbol.iterator]的方法。

const twice = {  [Symbol.iterator]() {    ...  }}

方法名中應(yīng)用了兩個(gè)新的ES6技巧。

首先，Symbol.iterator 一個(gè)內(nèi)置的符號(hào)值，而Symbol是ES6中用于創(chuàng)建唯一標(biāo)簽/標(biāo)識(shí)符的基本類型。

其次，包裝屬性鍵的方括號(hào)使它成為一個(gè)動(dòng)態(tài)計(jì)算的鍵。這里的關(guān)鍵是表達(dá)式符號(hào)。迭代器將被求值為，通常不關(guān)心實(shí)際的求值是什么。這個(gè)不重要的細(xì)節(jié)被抽象掉了。

這就是可迭代的協(xié)議。現(xiàn)在仍然需要處理迭代器協(xié)議來創(chuàng)建可迭代的對(duì)象，因?yàn)楸仨殢?nbsp;[Symbol.iterator] 函數(shù)返回一個(gè)迭代器

迭代器協(xié)議更簡(jiǎn)單。只需要一個(gè)對(duì)象有一個(gè)next方法即可返回帶有兩個(gè)鍵的對(duì)象：value和done。當(dāng)要停止迭代時(shí)，只需返回對(duì)象{value：undefined，done：true}。

這是示例中的迭代器：

const iterator = {    next() {        if (i < 2) {            return { value: i++, done: false };        } else {            return { value: undefined, done: true };        }    },};

總之，有一個(gè)同時(shí)滿足可迭代協(xié)議和迭代器協(xié)議的對(duì)象。如以下代碼：

const twice = {    [Symbol.iterator]() {        let i = 0;        const iterator = {            next() {                if (i < 2) {                    return { value: i++, done: false };                } else {                    return { value: undefined, done: true };                }            },        };        return iterator;    },};

數(shù)組和字符串可以使用for..of，進(jìn)行迭代。這意味著這些內(nèi)置類型包含與上面的類似的[Symbol.iterator]方法。

Generator：生成器

與迭代相關(guān)的另一個(gè)功能是生成器。

上面的可迭代代碼依靠閉包來存儲(chǔ) i 變量。使用 generator 時(shí)，不必?fù)?dān)心自己構(gòu)造閉包：

function* twiceGen() {    let i = 0;    while (i < 2) {        yield i;        i++;    }}
const twice = twiceGen()

該代碼實(shí)現(xiàn)了與可迭代示例相同的行為，但更為簡(jiǎn)單。

可以與for..of完全相同地使用它：

for(const item of twice){  console.log(item)}

如你所見，它是一個(gè)帶有星號(hào)（*）聲明的函數(shù)。它使用yield關(guān)鍵字逐個(gè)抽取值，就像迭代器的next方法一樣。

生成器是一種多功能工具，基本上，它是一種允許暫停/恢復(fù)功能的機(jī)制。不必在for..of中使用上述twice對(duì)象。可以調(diào)用它的next方法。

function* twiceGen() {    const i = 0;    while (i < 2) {        yield i;    }}
const twice = twiceGen();
twice.next().value; // 0

此時(shí)，twiceGen函數(shù)在第一次運(yùn)行while循環(huán)后暫停。如果再次運(yùn)行相同的操作，它將恢復(fù)并播放循環(huán)的第二次運(yùn)行。

twice.next().value; // 1

生成器的妙處在于它還創(chuàng)建了一個(gè)可迭代的迭代器對(duì)象。這就是為什么我們能夠使用for..of（可迭代特權(quán)）迭代兩次并直接調(diào)用其next方法（迭代器特權(quán)）的原因。

Default Parameter：默認(rèn)參數(shù)

可能不會(huì)立即創(chuàng)建自己的迭代器、生成器，所以讓我們來看看其他一些ES6的獨(dú)創(chuàng)性，它們可以立即使你的代碼更加友好。

就像許多其他編程語言一樣，現(xiàn)在可以為函數(shù)參數(shù)設(shè)置默認(rèn)值。

過去是這樣實(shí)現(xiàn)默認(rèn)值的：

function addOne(num) {    if (num === undefined) {        num = 0;    }    return num + 1;}
addOne();

現(xiàn)在可以這樣：

function addOne(num = 0) {    return num + 1;}
addOne();

Destructuring Syntax：解構(gòu)語法

解構(gòu)賦值語法是一種 Javascript 表達(dá)式。通過解構(gòu)賦值, 可以將屬性/值從對(duì)象/數(shù)組中取出，賦值給其他變量。

如果要將對(duì)象傳遞給函數(shù)，則可以輕松選擇對(duì)象的屬性，然后使用ES6分解語法將它們放在單獨(dú)的變量中：

function foo({ a, b }) {    console.log(a, b); // 1, 2}
foo({ a: 1, b: 2 });

這種解構(gòu)語法的好處是可以避免創(chuàng)建帶有附加代碼行的變量。因此不需要像下面這樣：

function foo(obj) {    const a = obj.a;    const b = obj.b;    console.log(a, b); // 1, 2}

同樣，還可以在解構(gòu)語法中設(shè)置默認(rèn)值：

function foo({ a = 0, b }) {    console.log(a, b); // 0, 2}
foo({ b: 2 });

解構(gòu)語法也適用于賦值：

function foo(obj) {    const { a, b } = obj;    console.log(a, b); // 1, 2}

當(dāng)從參數(shù)以外的地方獲取對(duì)象時(shí)，這也很有用。

function getObj() {    return { a: 1, b: 2 };}
function foo() {    const { a, b } = getObj();    console.log(a, b); // 1, 2}

解構(gòu)技巧同樣也適用數(shù)組。

解構(gòu)參數(shù)：

function foo([a, b]) {    console.log(a, b); // 1, 2}
foo([1, 2, 3]);

解構(gòu)賦值：

function foo(arr) {    const [a, b] = arr;    console.log(a, b); // 1, 2}

Rest / Spread ：剩余 / 展開參數(shù)

在解構(gòu)數(shù)組時(shí)，可以使用 ... 語法來獲取數(shù)組中的所有其他項(xiàng)。

function foo([a, b, ...c]) {    console.log(c); // [3, 4, 5]}
foo([1, 2, 3, 4, 5]);

c現(xiàn)在是一個(gè)包含自己的數(shù)組，包含了其余的元素：3，4，5。這里的操作就是Rest操作。

這個(gè)語法同樣適用于賦值：

function foo(arr) {    const [a, b, ...c] = arr;    console.log(c); // [3, 4, 5]}
foo([1, 2, 3, 4, 5]);

rest操作符也可以單獨(dú)使用，無需解構(gòu)：

function foo(...nums) {    console.log(nums); // [1, 2, 3, 4, 5]}
foo(1, 2, 3, 4, 5);

在這里，我們將數(shù)字作為獨(dú)立參數(shù)傳遞，而不是作為單個(gè)數(shù)組傳遞。但是在函數(shù)內(nèi)部，使用rest運(yùn)算符將數(shù)字作為單個(gè)數(shù)組收集。當(dāng)遍歷這些參數(shù)時(shí)，這很有用。

rest語法 ... 與另一個(gè)ES6特性操作符擴(kuò)展完全相同。

例如，如果要將兩個(gè)數(shù)組合并為一個(gè)：

const a = [1, 2];const b = [3, 4];const c = [...a, ...b];console.log(c); // [1, 2, 3, 4]

spread操作符用于將所有項(xiàng)展開，并將它們放入不同的數(shù)組中。

spread也適用于對(duì)象：

const obj = { a: 1, b: 2 };const obj2 = { ...obj, c: 3 };console.log(obj2); // { a: 1, b: 2, c: 3 }

現(xiàn)在，第二個(gè)對(duì)象除了其自身的屬性外，還應(yīng)包含第一個(gè)對(duì)象的所有內(nèi)容。

Arrow Function：箭頭函數(shù)

ES6提供了創(chuàng)建函數(shù)，對(duì)象和類的更簡(jiǎn)單方法。

箭頭函數(shù)表達(dá)式的語法比函數(shù)表達(dá)式更簡(jiǎn)潔，并且沒有自己的this，arguments，super或new.target。

箭頭函數(shù)表達(dá)式更適用于那些本來需要匿名函數(shù)的地方，并且它不能用作構(gòu)造函數(shù)。

使用箭頭語法來創(chuàng)建更簡(jiǎn)潔的函數(shù)：

const addOne = (num) => {    return num + 1;};

箭頭語法對(duì)于創(chuàng)建單行函數(shù)更加簡(jiǎn)潔友好。

const addOne = (num) => num + 1;

此函數(shù)將自動(dòng)返回表達(dá)式num +1的求值作為返回值，不需要顯式的使用return關(guān)鍵字。

如果函數(shù)僅接受一個(gè)參數(shù)，甚至可以省略括號(hào)（但是在嚴(yán)格語法上還是建議加上括號(hào)）：

const addOne = num => num + 1;

但是如果沒有任何參數(shù)，仍然需要一對(duì)空括號(hào)：

const getNum = () => 1;

但是，此語法有一個(gè)警告，如果我們返回的是對(duì)象字面量，則無法使用，會(huì)報(bào)錯(cuò)：

const getObj = () => { a: 1, b: 2 } // error

這將產(chǎn)生語法錯(cuò)誤，因?yàn)榻馕銎鲗⒓俣ɑɡㄌ?hào)用于函數(shù)塊，而不是對(duì)象字面量。

為了避免這個(gè)錯(cuò)誤，必須將對(duì)象字面量包裝在一對(duì)括號(hào)中：

const getObj = () => ({ a: 1, b: 2 });

另一件需要記住的事情是，this關(guān)鍵字不能在箭頭函數(shù)中使用。它不會(huì)出現(xiàn)錯(cuò)誤；相反，它只會(huì)從周圍的范圍提供相同的this引用。

function thatOrThis() {    const that = this;    const compare = () => {        console.log(that === this); // true    };    compare();}
thatOrThis();

以上代碼給出的值則為：true

Object literal extensions：對(duì)象字面量的擴(kuò)展

ES6也提供了一種更簡(jiǎn)單的方法來創(chuàng)建對(duì)象字面量。

如果在一個(gè)對(duì)象中放入兩個(gè)項(xiàng)目，它們的屬性鍵與變量相同，可以用傳統(tǒng)的Javascript做這樣的事情：

const a = 1;const b = 2;const obj = {    a: a,    b: b,};

但是在ES6中，語法可以更簡(jiǎn)單：

const a = 1;const b = 2;const obj = { a, b };

如果把方法放到對(duì)象字面量中，可以這樣做:

const a = 1;const b = 2;const obj = {    a,    b,    getA() {        return this.a;    },    getB() {        return this.b;    },};

基本上，沒有function關(guān)鍵字和冒號(hào)。

Class：類

ES6提供了類似于其他面向?qū)ο笳Z言的類構(gòu)造。現(xiàn)在不必依賴于混淆構(gòu)造函數(shù)和原型方式。

class Person {    constructor(name, hobby) {        this.name = name;        this.hobby = hobby;    }
    introduce() {        console.log(`大家好，我的名字叫：${this.name}，我喜歡${this.hobby}。`);    }}
const devpoint = new Person("DevPoint", "coding");devpoint.introduce();

附帶說明，introduce方法中的字符串稱為模板字符串，它是使用反引號(hào)而不是引號(hào)創(chuàng)建的。這樣可以使用美元符號(hào)和大括號(hào)將表達(dá)式插入字符串。

與常規(guī)字符串拼接相比，模板字符串的好處是它可以跨越多行：

const str = `line 1line 2line 3`;console.log(str);

它被稱為模板字符串，因?yàn)樗鼘?duì)實(shí)現(xiàn)模板很有用。

function pStr(text) {    return `

${text}

`;}
pStr("Hello world"); //

Hello world

一個(gè)類可以從另一個(gè)類繼承（重用現(xiàn)有類的代碼）：

class Person {    constructor(name, hobby) {        this.name = name;        this.hobby = hobby;    }
    introduce() {        console.log(`大家好，我的名字叫：${this.name}，我喜歡${this.hobby}。`);    }}
class ProfessionalPerson extends Person {    constructor(name, hobby, profession) {        super(name, hobby); // 執(zhí)行 Person 的構(gòu)造函數(shù)        this.profession = profession;    }
    introduce() {        super.introduce(); // 調(diào)用 Person 類的方法        console.log(`我的職業(yè)是 ${this.profession}。`);    }}
const devpoint = new ProfessionalPerson("DevPoint", "coding", "程序員");devpoint.introduce();

這里使用extends關(guān)鍵字在兩個(gè)類之間創(chuàng)建繼承關(guān)系，其中Person為父類。代碼中用了兩次super關(guān)鍵字，第一次是在構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)，第二次，像使用對(duì)象一樣使用它來調(diào)用父類的introduce方法。

super關(guān)鍵字的行為會(huì)因使用的位置而異。

在構(gòu)造函數(shù)中使用時(shí)，super關(guān)鍵字將單獨(dú)出現(xiàn)，并且必須在使用this關(guān)鍵字之前使用。如下代碼就是有異常的。

class ProfessionalPerson extends Person {    constructor(name, hobby, profession) {        this.profession = profession;    // 這里會(huì)出現(xiàn)異常        super(name, hobby); // 執(zhí)行 Person 的構(gòu)造函數(shù)    }
    introduce() {        super.introduce(); // 調(diào)用 Person 類的方法        console.log(`我的職業(yè)是 ${this.profession}。`);    }}

Map / Set / WeakMap / WeakSet

ES6新增了兩種數(shù)據(jù)結(jié)構(gòu)：Map和Set

Map是鍵-值對(duì)的集合，并且能夠記住鍵的原始插入順序。

const mapPerson = new Map();mapPerson.set("name", "DevPoint");mapPerson.set("profession", "Coding");const myName = mapPerson.get("name");console.log(myName); // DevPoint

Map對(duì)象可以使用任何對(duì)象類型作為鍵。看起來是不有點(diǎn)像Object，下面我們可以看看他們的比較：

Set對(duì)象就像一個(gè)數(shù)組，但是僅包含唯一項(xiàng)。Set對(duì)象是值的集合，可以按照插入的順序迭代它的元素。Set中的元素只會(huì)出現(xiàn)一次，即 Set 中的元素是唯一的。

const numbers = new Set();numbers.add(1);numbers.add(1);console.log(numbers); // Set { 1 }

盡管兩次add是同樣的值，程序本身不會(huì)出現(xiàn)任何異常，但該集合仍然只包含一項(xiàng)。

讓談?wù)剚韺W(xué)習(xí)一點(diǎn)更復(fù)雜的知識(shí)，WeakMap和WeakSet。它們分別是Map和Set的弱引用版本。

WeakMap其鍵必須是Object，而值可以是任意的。

WeakSet 對(duì)象是一些對(duì)象值的集合, 并且其中的每個(gè)對(duì)象值都只能出現(xiàn)一次，在WeakSet的集合中是唯一的。

它和 Set 對(duì)象的區(qū)別有兩點(diǎn):

與Set相比，WeakSet 只能是對(duì)象的集合，而不能是任何類型的任意值。
WeakSet持弱引用：集合中對(duì)象的引用為弱引用。如果沒有其他的對(duì)WeakSet中對(duì)象的引用，那么這些對(duì)象會(huì)被當(dāng)成垃圾回收掉。這也意味著WeakSet中沒有存儲(chǔ)當(dāng)前對(duì)象的列表。正因?yàn)檫@樣，WeakSet 是不可枚舉的。

一旦不再引用WeakMap的鍵，便會(huì)對(duì)其進(jìn)行垃圾回收（由Javascript運(yùn)行時(shí)從內(nèi)存中刪除）。

let key1 = {};const key2 = {};const wm = new WeakMap();wm.set(key1, 1);wm.set(key2, 2);key1 = null; // 取消引用

在key1被取消引用之后，它的對(duì)應(yīng)值將被垃圾回收，意味著它將在未來的某個(gè)時(shí)間點(diǎn)消失。

同樣，如果將一個(gè)對(duì)象添加到WeakSet中，然后再取消引用它，它也將被垃圾回收。

let item1 = {};const item2 = {};const ws = new WeakSet();ws.add(item1);ws.add(item2);item1 = null; // 取消引用

Promise

Promise 對(duì)象用于表示一個(gè)異步操作的最終完成 (或失敗)及其結(jié)果值。是ES6的一個(gè)常用功能，它是對(duì)傳統(tǒng)函數(shù)回調(diào)模式的改進(jìn)。

一個(gè) Promise 必然處于以下幾種狀態(tài)之一：

待定（pending）: 初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕。
已兌現(xiàn)（fulfilled）: 意味著操作成功完成。
已拒絕（rejected）: 意味著操作失敗。

例如，這是使用傳統(tǒng)回調(diào)的方式：

setTimeout(function () {    const currentTime = new Date();    console.log(currentTime);}, 1000);

這是一個(gè)計(jì)時(shí)器，顯示一秒鐘后的時(shí)間。

這是一個(gè)使用相同setTimeout邏輯的Promise對(duì)象：

const afterOneSecond = new Promise(function (resolve, reject) {    setTimeout(function () {        const currentTime = new Date();        resolve(currentTime);    }, 1000);});

它接受帶有兩個(gè)參數(shù)的函數(shù)：resolve和reject。這兩個(gè)都是當(dāng)有返回值時(shí)可以調(diào)用的函數(shù)。調(diào)用resolve函數(shù)返回一個(gè)值，可以調(diào)用reject函數(shù)返回一個(gè)錯(cuò)誤。

然后，可以使用then語法將回調(diào)函數(shù)附加到這個(gè)afteronessecond對(duì)象上:

afterOneSecond.then((t) => console.log(t));

promise相對(duì)于傳統(tǒng)回調(diào)的好處是promise對(duì)象可以被傳遞。因此，在設(shè)置promise之后，可以自由地將它發(fā)送到其他地方，以處理計(jì)時(shí)器解析后要做的事情。

另一個(gè)很酷的事情是，promise可以與多個(gè)then子句鏈接在一起，即promise的鏈?zhǔn)秸{(diào)用。

afterOneSecond.then((t) => t.getTime())              .then((time) => console.log(time));

每個(gè)then子句將其值作為參數(shù)返回到下一個(gè)then子句。

實(shí)用方法

下面就來介紹在VUE中，比較實(shí)用的ES6的方法或?qū)傩浴?/span>

Object.assign()

Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。提供了一種簡(jiǎn)單的方法來淺克隆現(xiàn)有對(duì)象。

const obj1 = { a: 1 }const obj2 = Object.assign({}, obj1)

String.prototype.repeat()

構(gòu)造并返回一個(gè)新字符串，該字符串包含被連接在一起的指定數(shù)量的字符串的副本。

const str = "DevPoint ".repeat(3);console.log(str); // DevPoint DevPoint DevPoint

String.prototype.startsWith()

用來判斷當(dāng)前字符串是否以另外一個(gè)給定的子字符串開頭（區(qū)分大小寫），并根據(jù)判斷結(jié)果返回 true 或 false。

const str = "DevPoint".startsWith("D");const str2 = "DevPoint".startsWith("d");console.log(str); // trueconsole.log(str2); // false

String.prototype.endsWith()

用來判斷當(dāng)前字符串是否是以另外一個(gè)給定的子字符串“結(jié)尾”的，根據(jù)判斷結(jié)果返回 true 或 false。

const str = "DevPoint".endsWith("t"); console.log(str); // true

String.prototype.includes()

用于判斷一個(gè)字符串是否包含在另一個(gè)字符串中，根據(jù)情況返回 true 或 false。

const str = "DevPoint".includes("P");console.log(str); // true

Array.prototype.find()

返回?cái)?shù)組中滿足提供的過濾函數(shù)的第一個(gè)元素的值，否則返回 undefined。

const arrNumbers = [5, 12, 8, 130, 44];const foundNumbers = arrNumbers.find((number) => number > 10);console.log(foundNumbers);   // 12是數(shù)組第一個(gè)大于10的數(shù)

Function.name

這不是方法而是屬性，返回函數(shù)實(shí)例的名稱，每個(gè)函數(shù)都有一個(gè)name屬性，該屬性提供字符串形式的函數(shù)名稱

setTimeout.name; // "setTimeout"
const weather = () => {    console.log("今天天氣真好！");};console.log(weather.name); // weather

總結(jié)

ES6的新特征，某種程度上代表的Javascript在未來的態(tài)度，這些新的特征讓我迫不及待應(yīng)用到項(xiàng)目中，不斷接受新挑戰(zhàn)，提升自己技能。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)