Vue开发中可以使用的ES6特征

原创

天行无忌 2022-01-14 10:38:52 ©著作权

©著作权归作者所有：来自51CTO博客作者天行无忌的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue开发中可以使用的ES6特征_Vue.js

ECMAScript 6.0（以下简称 ES6）是 Javascript 语言的下一代标准，正式发布与2015年6月。它的目标，是使得Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 6，即所谓的现代 Javascript，具有强大的功能，例如块作用域、类、箭头功、生成器以及许多其他有用的功能。

在Vue应用开发中使用的所有必要功能来改善编程体验，提高开发效率及代码质量。通过Vue CLI的Babel或core-js集成，使开发中的代码严格按照配置规范进行迭代，有助于团队协作。本文介绍几个再Vue应用开发中常用的ES6的特征，之前在文章《分享18个常用的ECMAScript 6代码片段》和《读 2020 年 Javascript 趋势报告展望 ES2020》有介绍部分新特征，未来可期。

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 = 2021a = 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。