vue中用到es6特性有哪些

特性：1、let和const關(guān)鍵字，用于聲明變量；2、“for…of”循環(huán)，可迭代數(shù)據(jù)；3、Iterable，是實現(xiàn)可迭代協(xié)議的任何對象；4、Generator；5、默認參數(shù)；6、解構(gòu)賦值語法，可以將屬性/值從對象/數(shù)組中取出；7、剩余/展開參數(shù)；8、箭頭函數(shù)；9、對象字面量；10、Class；11、Map/Set/WeakMap/WeakSet數(shù)據(jù)結(jié)構(gòu)；12、Promise。

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

ECMAScript 6.0（以下簡稱 ES6）是 Javascript 語言的下一代標準，正式發(fā)布與2015年6月。它的目標，是使得Javascript語言可以用來編寫復雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。

ECMAScript 6，即所謂的現(xiàn)代 Javascript，具有強大的功能，例如塊作用域、類、箭頭功、生成器以及許多其他有用的功能。

在Vue應(yīng)用開發(fā)中使用的所有必要功能來改善編程體驗，提高開發(fā)效率及代碼質(zhì)量。通過Vue CLI的Babel或core-js集成，使開發(fā)中的代碼嚴格按照配置規(guī)范進行迭代，有助于團隊協(xié)作。本文介紹幾個再Vue應(yīng)用開發(fā)中常用的ES6的特征。

let/const

ES6最基本的功能：let和const。

let與var類似，但使用let聲明的變量的作用域是在聲明它們的塊中。（Block指條件塊，for循環(huán)塊等）

例如，在條件塊中使用let將在塊內(nèi)作用域變量，在塊外不可用。

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

在這里，錯誤是一件好事，因為它可以防止在生產(chǎn)過程中發(fā)生潛在的錯誤。

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

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

例如：

const a = 2021 a = 2020 // error

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

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

for…of

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

例如，一個傳統(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中，非常簡單：

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

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

Iterable

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

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

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對象：

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

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

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

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

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

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

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

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

這就是可迭代的協(xié)議。現(xiàn)在仍然需要處理迭代器協(xié)議來創(chuàng)建可迭代的對象，因為必須從 [Symbol.iterator] 函數(shù)返回一個迭代器

迭代器協(xié)議更簡單。只需要一個對象有一個next方法即可返回帶有兩個鍵的對象：value和done。當要停止迭代時，只需返回對象{value：undefined，done：true}。

這是示例中的迭代器：

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

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

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，進行迭代。這意味著這些內(nèi)置類型包含與上面的類似的[Symbol.iterator]方法。

Generator：生成器

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

上面的可迭代代碼依靠閉包來存儲 i 變量。使用 generator 時，不必擔心自己構(gòu)造閉包：

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

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

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

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

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

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

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

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

twice.next().value; // 1

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

Default Parameter：默認參數(shù)

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

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

過去是這樣實現(xià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 表達式。通過解構(gòu)賦值, 可以將屬性/值從對象/數(shù)組中取出，賦值給其他變量。

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

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è)置默認值：

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 }

當從參數(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ù)組中的所有其他項。

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

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

這個語法同樣適用于賦值：

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

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

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

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

rest語法 ... 與另一個ES6特性操作符擴展完全相同。

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

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

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

spread也適用于對象：

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

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

Arrow Function：箭頭函數(shù)

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

箭頭函數(shù)表達式的語法比函數(shù)表達式更簡潔，并且沒有自己的this，arguments，super或new.target。箭頭函數(shù)表達式更適用于那些本來需要匿名函數(shù)的地方，并且它不能用作構(gòu)造函數(shù)。

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

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

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

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

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

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

const addOne = num => num + 1;

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

const getNum = () => 1;

但是，此語法有一個警告，如果我們返回的是對象字面量，則無法使用，會報錯：

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

這將產(chǎn)生語法錯誤，因為解析器將假定花括號用于函數(shù)塊，而不是對象字面量。

為了避免這個錯誤，必須將對象字面量包裝在一對括號中：

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

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

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

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

Object literal extensions：對象字面量的擴展

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

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

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

但是在ES6中，語法可以更簡單：

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

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

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

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

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方法中的字符串稱為模板字符串，它是使用反引號而不是引號創(chuàng)建的。這樣可以使用美元符號和大括號將表達式插入字符串。

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

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

它被稱為模板字符串，因為它對實現(xiàn)模板很有用。

function pStr(text) {     return `<p>${text}</p>`; }  pStr("Hello world"); // <p>Hello world</p>

一個類可以從另一個類繼承（重用現(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)鍵字在兩個類之間創(chuàng)建繼承關(guān)系，其中Person為父類。代碼中用了兩次super關(guān)鍵字，第一次是在構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)，第二次，像使用對象一樣使用它來調(diào)用父類的introduce方法。super關(guān)鍵字的行為會因使用的位置而異。

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

class ProfessionalPerson extends Person {     constructor(name, hobby, profession) {         this.profession = profession;    // 這里會出現(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是鍵-值對的集合，并且能夠記住鍵的原始插入順序。

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

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

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

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

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

讓談?wù)剚韺W習一點更復雜的知識，WeakMap和WeakSet。它們分別是Map和Set的弱引用版本。

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

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

它和 Set 對象的區(qū)別有兩點:

• 與Set相比，WeakSet 只能是對象的集合，而不能是任何類型的任意值。
• WeakSet持弱引用：集合中對象的引用為弱引用。 如果沒有其他的對WeakSet中對象的引用，那么這些對象會被當成垃圾回收掉。 這也意味著WeakSet中沒有存儲當前對象的列表。 正因為這樣，WeakSet 是不可枚舉的。

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

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

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

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

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

Promise

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

一個 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);

這是一個計時器，顯示一秒鐘后的時間。

這是一個使用相同setTimeout邏輯的Promise對象：

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

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

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

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

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

另一個很酷的事情是，promise可以與多個then子句鏈接在一起，即promise的鏈式調(diào)用。

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

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

實用方法

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

Object.assign()

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

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

String.prototype.repeat()

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

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

String.prototype.startsWith()

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

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

String.prototype.endsWith()

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

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

String.prototype.includes()

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

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

Array.prototype.find()

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

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

Function.name

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

// setTimeout.name; // "setTimeout"  const weather = () => {     console.log("今天天氣真好！"); }; const devpoint = () => {};  // 限制回到函數(shù)的名稱 const enter = (callback) => {     const accessName = ["weather"];     if (accessName.includes(callback.name)) {         callback();     } }; enter(devpoint); enter(weather);

上述代碼只執(zhí)行了函數(shù) weather。

總結(jié)

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

（學習視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）