vue에서 사용되는 es6 기능은 무엇입니까?

기능: 1. 변수를 선언하는 데 Let 및 const 키워드가 사용됩니다. 2. "for...of" 루프, 반복 가능한 데이터 3. 반복 가능한 프로토콜을 구현하는 모든 개체입니다. 기본 매개변수 6. 객체/배열에서 속성/값을 제거할 수 있는 구조화 할당 구문 7. 나머지/확장 매개변수 9. 객체 리터럴 11. 클래스; / WeakSet 데이터 구조 12. 약속.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

ECMAScript 6.0(이하 ES6)은 2015년 6월 공식 출시된 Javascript 언어의 차세대 표준입니다. 그 목표는 Javascript 언어를 사용하여 복잡한 대규모 애플리케이션을 작성하고 엔터프라이즈 수준의 개발 언어가 되도록 하는 것입니다.

소위 최신 Javascript라고 불리는 ECMAScript 6에는 블록 범위 지정, 클래스, 화살표 함수, 생성기 및 기타 여러 유용한 기능과 같은 강력한 기능이 포함되어 있습니다.

프로그래밍 경험, 개발 효율성 및 코드 품질을 향상시키기 위해 Vue 애플리케이션 개발에 사용되는 모든 필수 기능입니다. Vue CLI의 Babel 또는 core-js 통합을 통해 개발 중인 코드를 구성 사양에 따라 엄격하게 반복할 수 있습니다. 팀 협업에 도움이 됩니다. 이 기사에서는 Vue 애플리케이션 개발에 일반적으로 사용되는 몇 가지 ES6 기능을 소개합니다. 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}

let/const

ES6의 가장 기본적인 기능: let 및 const.

let는 var와 유사하지만 let를 사용하여 선언된 변수는 선언된 블록 내에서 범위가 지정됩니다. (블록은 조건부 블록, for 루프 블록 등을 참조합니다.) 🎜🎜예를 들어, 조건부 블록에서 let을 사용하면 블록 내의 변수 범위가 지정되지만 블록 밖에서도 사용 가능합니다. 🎜

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

🎜 실수는 생산 과정에서 발생할 수 있는 실수를 방지하기 때문에 좋은 것입니다. 🎜🎜위의 예에서 let 대신 var(기존 Javascript 코드와 동일)를 사용하면 오류가 발생하지 않습니다. 🎜🎜const는 변수를 선언하는 데 사용되는 또 다른 ES6 키워드입니다. 차이점은 const로 생성된 변수는 선언 후에는 변경할 수 없다는 점입니다. 이 기능을 사용하면 🎜BUG🎜 발생을 효과적으로 방지할 수 있으므로 코드 작성 시 최대한 순수 함수를 작성하는 것이 좋습니다. (순수 함수는 함수에 고정된 입력이 주어지면 출력 결과는 고정되며 함수 외부의 변수 등에 의해 영향을 받지 않습니다.) 🎜🎜예: 🎜

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

🎜변수를 만드는 방법에는 여러 가지가 있는데 어떤 것을 사용해야 할까요?🎜🎜가장 좋은 방법은 가능할 때마다 const를 사용하는 것입니다. for 루프와 같이 나중에 변경해야 하는 변수가 필요한 경우에만 let를 사용하세요. 🎜

🎜for…of🎜

🎜루프에 관해 말하자면, ES6 구문에서 for 루프를 작성하는 더 쉬운 방법이 있습니다. let을 사용할 필요가 없습니다. 🎜🎜예를 들어 전통적인 for 루프는 다음과 같습니다. 🎜

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

const twice = twiceGen();

🎜ES6에서는 매우 간단합니다. 🎜

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

🎜for..in과 혼동하지 마세요. 구문; 완전히 다른 것입니다. for..in은 배열/객체의 속성을 가져오는 반면, for..of는 반복하려는 실제 데이터를 가져옵니다. 🎜

🎜Iterable🎜

🎜반복 가능한 객체는 반복 가능한 프로토콜을 구현하는 모든 객체입니다. (프로토콜은 단순히 객체에서 특정 이름을 가진 특정 메서드를 사용하여 충족해야 하는 요구 사항을 나타냅니다.) 🎜🎜예를 들어, 다음은 iterable 프로토콜을 구현하는 개체입니다. 🎜

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

const twice = twiceGen();

twice.next().value; // 0

🎜이제 for..of에서 이 두 번을 사용할 수 있습니다. > 루프 개체: 🎜

twice.next().value; // 1

🎜이는 두 번 개체를 두 번 반복하여 각각 0 및 1을 얻습니다. 🎜🎜반복 가능한 객체를 생성하기 위해 실제로 반복 가능 프로토콜과 반복자 프로토콜이라는 두 가지 프로토콜이 구현됩니다. 🎜🎜반복 가능한 객체라는 요구 사항을 충족하려면 [Symbol.iterator]라는 메서드가 필요합니다. 🎜

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

addOne();

🎜메서드 이름에 두 가지 새로운 ES6 트릭이 적용되었습니다. 🎜🎜우선, Symbol.iterator는 내장된 기호 값이고, Symbol은 고유한 태그/식별자를 생성하기 위한 ES6의 기본 유형입니다. 🎜🎜둘째, 속성 키를 대괄호로 묶으면 동적으로 계산된 키가 됩니다. 여기서 핵심은 표현 표기법입니다. 반복자는 다음과 같이 평가됩니다. 일반적으로 실제 평가가 무엇인지는 중요하지 않습니다. 이 중요하지 않은 세부 사항은 추상화됩니다. 🎜🎜이것은 반복 가능한 프로토콜입니다. 이제 반복 가능한 객체를 생성하려면 반복자 프로토콜을 처리해야 합니다. 반복자는 [Symbol.iterator] 함수에서 반환되어야 하기 때문입니다. 🎜🎜반복자 프로토콜이 더 간단합니다. 필요한 것은 value와 done이라는 두 개의 키가 있는 객체를 반환하는 next 메서드를 갖는 객체뿐입니다. 반복을 중지하려면 {값: 정의되지 않음, 완료: true} 개체를 반환하면 됩니다. 🎜🎜예제의 iterator는 다음과 같습니다. 🎜

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

addOne();

🎜요약하면 iterable 프로토콜과 iterator 프로토콜을 모두 만족하는 객체가 있습니다. 다음 코드와 같습니다: 🎜

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!