vue中怎么使用es6特性

本篇內容主要講解“vue中怎么使用es6特性”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中怎么使用es6特性”吧!

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

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

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

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

let/const

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

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

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

if (true) {
    let foo = "word";
}

console.log(foo); // error

在這里，錯誤是一件好事，因為它可以防止在生產過程中發生潛在的錯誤。

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

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

例如：

const a = 2021
a = 2020 // error

有幾種創建變量的方法，我們應該使用哪一種?

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

for…of

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

例如，一個傳統的for循環是這樣的：

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將獲得數組/對象中的屬性，而for..of將獲得實際想要迭代的數據。

Iterable

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

例如，下面是一個實現了iterable協議的對象：

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;
    },
};

現在可以在for..of循環中使用此twice對象：

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

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

為了創建一個可迭代對象，實際上實現了兩個協議，iterable協議和iterator協議。

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

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

方法名中應用了兩個新的ES6技巧。

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

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

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

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

這是示例中的迭代器：

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

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

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;
    },
};

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

Generator：生成器

與迭代相關的另一個功能是生成器。

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

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

const twice = twiceGen();

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

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

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

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

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

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

const twice = twiceGen();

twice.next().value; // 0

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

twice.next().value; // 1

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

Default Parameter：默認參數

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

就像許多其他編程語言一樣，現在可以為函數參數設置默認值。

過去是這樣實現默認值的：

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

addOne();

現在可以這樣：

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

addOne();

Destructuring Syntax：解構語法

解構賦值語法是一種 Javascript 表達式。通過解構賦值, 可以將屬性/值從對象/數組中取出，賦值給其他變量。

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

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

foo({ a: 1, b: 2 });

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

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

同樣，還可以在解構語法中設置默認值：

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

foo({ b: 2 });

解構語法也適用于賦值：

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

當從參數以外的地方獲取對象時，這也很有用。

function getObj() {
    return { a: 1, b: 2 };
}

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

解構技巧同樣也適用數組。

解構參數：

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

foo([1, 2, 3]);

解構賦值：

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

Rest / Spread ：剩余 / 展開參數

在解構數組時，可以使用 ... 語法來獲取數組中的所有其他項。

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

foo([1, 2, 3, 4, 5]);

c現在是一個包含自己的數組，包含了其余的元素：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操作符也可以單獨使用，無需解構：

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

foo(1, 2, 3, 4, 5);

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

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

例如，如果要將兩個數組合并為一個：

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

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

spread也適用于對象：

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

現在，第二個對象除了其自身的屬性外，還應包含第一個對象的所有內容。

Arrow Function：箭頭函數

ES6提供了創建函數，對象和類的更簡單方法。

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

使用箭頭語法來創建更簡潔的函數：

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

箭頭語法對于創建單行函數更加簡潔友好。

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

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

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

const addOne = num => num + 1;

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

const getNum = () => 1;

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

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

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

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

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

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

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

thatOrThis();

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

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

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

如果在一個對象中放入兩個項目，它們的屬性鍵與變量相同，可以用傳統的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關鍵字和冒號。

Class：類

ES6提供了類似于其他面向對象語言的類構造。現在不必依賴于混淆構造函數和原型方式。

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

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

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

它被稱為模板字符串，因為它對實現模板很有用。

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

pStr("Hello world"); // <p>Hello world</p>

一個類可以從另一個類繼承（重用現有類的代碼）：

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); // 執行 Person 的構造函數
        this.profession = profession;
    }

    introduce() {
        super.introduce(); // 調用 Person 類的方法
        console.log(`我的職業是 ${this.profession}。`);
    }
}

const devpoint = new ProfessionalPerson("DevPoint", "coding", "程序員");
devpoint.introduce();

這里使用extends關鍵字在兩個類之間創建繼承關系，其中Person為父類。代碼中用了兩次super關鍵字，第一次是在構造函數中調用父類的構造函數，第二次，像使用對象一樣使用它來調用父類的introduce方法。super關鍵字的行為會因使用的位置而異。

在構造函數中使用時，super關鍵字將單獨出現，并且必須在使用this關鍵字之前使用。如下代碼就是有異常的。

class ProfessionalPerson extends Person {
    constructor(name, hobby, profession) {
        this.profession = profession;    // 這里會出現異常
        super(name, hobby); // 執行 Person 的構造函數
    }

    introduce() {
        super.introduce(); // 調用 Person 類的方法
        console.log(`我的職業是 ${this.profession}。`);
    }
}

Map / Set / WeakMap / WeakSet

ES6新增了兩種數據結構：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對象就像一個數組，但是僅包含唯一項。Set對象是值的集合，可以按照插入的順序迭代它的元素。 Set中的元素只會出現一次，即 Set 中的元素是唯一的。

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

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

讓談談來學習一點更復雜的知識，WeakMap和WeakSet。它們分別是Map和Set的弱引用版本。

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

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

它和 Set 對象的區別有兩點:

• 與Set相比，WeakSet 只能是對象的集合，而不能是任何類型的任意值。

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

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

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

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

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

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

Promise

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

一個 Promise 必然處于以下幾種狀態之一：

• 待定（pending）: 初始狀態，既沒有被兌現，也沒有被拒絕。

• 已兌現（fulfilled）: 意味著操作成功完成。

• 已拒絕（rejected）: 意味著操作失敗。

例如，這是使用傳統回調的方式：

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);
});

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

然后，可以使用then語法將回調函數附加到這個afteronessecond對象上:

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

promise相對于傳統回調的好處是promise對象可以被傳遞。因此，在設置promise之后，可以自由地將它發送到其他地方，以處理計時器解析后要做的事情。

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

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

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

實用方法

下面就來介紹在VUE中，比較實用的ES6的方法或屬性。

Object.assign()

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

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

String.prototype.repeat()

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

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

String.prototype.startsWith()

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

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

String.prototype.endsWith()

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

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

String.prototype.includes()

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

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

Array.prototype.find()

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

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

Function.name

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

// setTimeout.name; // "setTimeout"

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

// 限制回到函數的名稱
const enter = (callback) => {
    const accessName = ["weather"];
    if (accessName.includes(callback.name)) {
        callback();
    }
};
enter(devpoint);
enter(weather);

上述代碼只執行了函數 weather。

到此，相信大家對“vue中怎么使用es6特性”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！