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。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

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，下面我们可以看看他们的比较：

	Map	Object
意外的键	Map 默认情况不包含任何键，只包含显式插入的键。	一个 Object 有一个原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
键的类型	Map 的键可以是任意值，包括函数、对象或任意基本类型。	一个 Object 的键必须是一个 String 或是 Symbol。
键的顺序	Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。	一个 Object 的键是无序的
Size	Map 的键值对个数可以轻易地通过 size 属性获取	Object 的键值对个数只能手动计算，需要自己构建方法
迭代	Map 是 iterable 的，所以可以直接被迭代。	迭代一个 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。

总结

ES6的新特征，某种程度上代表的Javascript在未来的态度，这些新的特征让我迫不及待应用到项目中，不断接受新挑战，提升自己技能。

（学习视频分享：vuejs入门教程、编程基础视频）

以上是vue中用到es6特性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！