>  기사  >  웹 프론트엔드  >  이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

青灯夜游
青灯夜游앞으로
2022-08-24 10:32:562012검색

이 기사는 ES6에 대한 심층적인 이해를 제공하고 ES6의 새로운 기능에 대해 배우는 데 도움이 되기를 바랍니다.

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 이해하기

ECMAScript는 Netscape에서 공식화한 스크립팅 언어 표준화 사양이며 원래 이름은 Mocha 이며 나중에 이름이 변경되었습니다. LiveScript, 최종적으로 JavaScript
로 이름이 변경됨 ECMAScript 2015(ES2015), 6판, 처음에는 ECMAScript 6(ES6)로 알려짐, 추가 새로운 기능. ECMAScript ,是由网景公司制定的一种脚本语言的标准化规范;最初命名为 Mocha ,后来改名为 LiveScript ,最后重命名为 JavaScript
ECMAScript 2015(ES2015),第 6 版,最早被称作 ECMAScript 6(ES6),添加了新的特性。

ES6 块级作用域 let

首先,什么是作用域?作用域简单讲就是声明一个变量,这个变量的有效范围,在 let 没来之前。js 只有 var全局作用域函数作用域ES6 为 js 带来了块级作用域。【相关推荐:javascript学习教程

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

{
    var a = "?";
    let b = "⛳";
}
console.log(a);
console.log(b);
?
Uncaught ReferenceError: b is not defined

可以看到,我们使用 var 关键字在块中定义了变量 a,其实全局可以访问到,所以说,var声明的变量是全局的,但我们想让变量就在块中生效,出了块就访问不了了,这时就可以使用 ES6 新增的块级作用域关键字 let 来声明这个变量 a,当我再次访问,报错了,说 a is not defined ,a 没有定义

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 解构数组

如下所示,首先定义了一个函数,返回一个数组,在未使用解构数组前,调用数组并把返回值赋值给 temp ,然后打印 temp 数组,使用了解构数组后,直接定义一个数组变量,然后将函数返回值指向该变量,他会自动把第一项的值赋值给第一个数组变量,第二项赋值给第二个数组变量,以此类推,最后打印三个变量,看到没有问题

function breakfast() {
    return ['?', '?', '?'];
}
var temp = breakfast();
console.log(temp[0], temp[1], temp[2]);

let [a, b, c] = breakfast();
console.log(a, b, c);
? ? ?
? ? ?

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 解构对象

首先 breakfast 函数返回一个对象,使用解构对象,定义对象,键值对中键表示映射的实际对象的键名,值就是自定义变量,解构完成,会自动完成赋值,然后调用 breakfast 函数,返回对象,随后打印变量 a,b,c ,可以看到没问题

function breakfast() {
    return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);
? ? ?

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 模板字符串

在使用模板字符串前,我们拼接字符串变量使用 +

使用 ES6 提供的模板字符串,首先使用 `` 把字符串包起来,当要使用变量时 ,使用 ${变量}

let a = '?',
    b = '?️';

let c = '今天吃' + a + '吃完看' + b;
console.log(c);

let d = `今天吃 ${a} 吃完看 ${b}`;
console.log(d);
今天吃?吃完看?️
今天吃 ? 吃完看 ?️

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 判断字符串里是否包含其他字符串

使用这些函数,可以轻松的完成是不是以什么开头的字符串,是不是以什么结尾的字符串,是不是包含了什么字符串等的操作

let str = '你好,我是小周 ❤️';
console.log(str.startsWith('你好'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('你好'));
console.log(str.includes(" "));
true
true
false
true

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 默认参数

ES6里,可以使用默认参数,当调用函数时,没有给参数进行赋值时,就使用设置的默认参数执行,当给参数赋值时,就会使用新赋的值执行,覆盖默认值,使用如下:

function say(str) {
    console.log(str);
}
function say1(str = '嘿嘿') {
    console.log(str);
}
say();
say1();
say1('❤️');
undefined
嘿嘿
❤️

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 展开操作符

使用 ... 可以展开元素,方便操作,使用如下:

let arr = ['❤️', '?', '?'];
console.log(arr);
console.log(...arr);
let brr = ['王子', ...arr];
console.log(brr);
console.log(...brr);
[ '❤️', '?', '?' ]
❤️ ? ?
[ '王子', '❤️', '?', '?' ]
王子 ❤️ ? ?

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 剩余操作符

...

ES6 블록 범위 let이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

🎜먼저 범위란 무엇입니까? 범위는 단순히 변수를 선언하는 것을 의미합니다. 이 변수의 유효한 범위는 let가 오기 전입니다. js에는 var전역 범위함수 범위만 있고 ES6 블록을 js 수준 범위로 가져옵니다. . [관련 권장사항: 자바스크립트 학습 튜토리얼🎜]🎜🎜🎜여기에 이미지 설명 삽입🎜
function f1(a, b, ...c) {
    console.log(a, b, c);
    console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');
? ? [ '☃️', '㊙️' ]
? ? ☃️ ㊙️
🎜보시다시피, 우리는 var 키워드를 사용합니다 a 변수는 블록에 정의되어 있으며 전역적으로 액세스할 수 있습니다. 따라서 var에 의해 선언된 변수는 전역이지만 변수가 블록 내에서 적용되기를 원하며 블록 외부에서는 액세스할 수 없습니다. 이때 ES6에서 새로운 블록 수준 범위 키워드 let를 사용하여 변수 a를 선언할 수 있습니다. 다시 액세스하면 a는 정의되지 않았습니다, a는 정의되지 않았습니다🎜🎜🎜🎜🎜🎜ES6 구조 분해 배열🎜🎜🎜 아래와 같이 먼저 함수를 정의하고 배열을 반환한 후 구조 분해 배열을 사용하기 전에 배열을 호출하고 반환 값 할당 temp를 지정한 다음 임시 배열을 인쇄합니다. 구조화 배열을 사용한 후 배열 변수를 직접 정의한 다음 함수 반환 값을 변수에 자동으로 할당합니다. 첫 번째 항목은 첫 번째 배열 변수에 할당되고, 두 번째 항목은 두 번째 배열 변수에 할당되는 식입니다. 마지막으로 세 개의 변수를 인쇄하여 문제가 없는지 확인하세요🎜
function f1() { }
console.log(f1.name);
let f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);
f1
f2
f4
🎜🎜🎜🎜🎜ES6 객체를 구조화하는 중🎜🎜 🎜먼저 이 함수는 객체를 반환합니다. 객체 분해를 사용하여 객체를 정의합니다. 키-값 쌍의 키는 매핑된 실제 객체의 키 이름을 나타냅니다. 값은 사용자 정의 변수입니다. 분해가 완료되면 자동으로 할당이 완료되고, 아침 식사 함수를 호출하고, 개체를 반환한 다음, 변수 a, b, c를 인쇄하면 문제가 없는 것을 볼 수 있습니다. 🎜
let f1 = a => a;

let f2 = (a, b) => {
    return a + b;
}

console.log(f1(10));
console.log(f2(10, 10));
10
20
🎜🎜🎜🎜🎜ES6 템플릿 문자열🎜🎜🎜템플릿 문자열을 사용하기 전에 문자를 이어붙입니다. 문자열 변수를 사용합니다. +🎜🎜ES6에서 제공하는 템플릿 문자열을 사용합니다. 먼저 ``를 사용하여 문자열을 래핑합니다. 변수를 사용하고, ${변수}를 사용하세요🎜
let a = '㊙️';
let b = '☃️';

const obj = {
    a: a,
    b: b,
    say: function () {

    }
}

const es6obj = {
    a,
    b,
    say() {

    }
}

console.log(obj);
console.log(es6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }
🎜🎜🎜🎜🎜ES6 문자열에 다른 문자열이 포함되어 있는지 확인🎜🎜🎜이 함수를 사용하면 문자열이 무엇으로 시작하는지, 무언가로 끝나는지, 문자열이 포함되어 있는지 등.🎜
const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
app = 10;
☃️ ?
☃️ ? ?
app = 10;
    ^
TypeError: Assignment to constant variable.
🎜🎜🎜🎜🎜ES6 기본 매개변수 🎜🎜🎜 ES6에서는 함수 호출 시 매개변수에 값이 할당되지 않은 경우 기본 매개변수를 사용할 수 있습니다. , 설정된 기본 매개변수가 사용됩니다. 매개변수에 값이 할당되면 새 할당이 사용되며 기본값을 덮어쓰며 다음과 같이 사용됩니다. 🎜
let obj = {};
let a = 'little name';
obj.name = '王子';
// 使用点定义属性中间有空格是不合法的
// obj.little name = '小王子';
obj[a] = '小王子';
console.log(obj);
{ name: '王子', 'little name': '小王子' }
🎜🎜🎜🎜🎜ES6 확장 연산자 🎜🎜🎜쉬운 작업을 위해 요소를 확장하려면 ...를 사용하고 다음과 같이 사용됩니다: 🎜
console.log(NaN == NaN);
console.log(+0 == -0);
console.log(Object.is(NaN, NaN));
console.log(Object.is(+0, -0));
false
true
true
false
🎜🎜 🎜🎜🎜ES6 나머지 연산자🎜🎜🎜... 연산자는 함수 매개변수에 사용되며 매개변수 배열을 받습니다. 🎜
let obj = {};
Object.assign(
    // 源
    obj,
    // 复制目标对象
    { a: '☃️' }
);
console.log(obj);
{ a: '☃️' }
🎜🎜🎜

ES6 函数名字

使用 .name 可以获取函数的名字,具体使用如下:

function f1() { }
console.log(f1.name);
let f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);
f1
f2
f4

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 箭头函数

使用箭头函数可以让代码更简洁,但是也要注意箭头函数的局限性,以及箭头函数中自身没有 this,this指向父级

let f1 = a => a;

let f2 = (a, b) => {
    return a + b;
}

console.log(f1(10));
console.log(f2(10, 10));
10
20

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 对象表达式

使用es6的对象表达式,如果对象属性和值一样,可以省略值,函数写法可以省去function,用法如下:

let a = '㊙️';
let b = '☃️';

const obj = {
    a: a,
    b: b,
    say: function () {

    }
}

const es6obj = {
    a,
    b,
    say() {

    }
}

console.log(obj);
console.log(es6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 恒量

使用 const 关键字定义衡量,const 限制的是给衡量分配值的动作,并不限制衡量中的值,使用如下:

const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
app = 10;

可以看到当再次给衡量分配值就报错了

☃️ ?
☃️ ? ?
app = 10;
    ^
TypeError: Assignment to constant variable.

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 对象属性名

使用点定义对象属性时,如果属性名中含有空格字符,是不合法的,语法通不过的,使用 [属性名] 可以完美解决,并且不仅可以直接写明属性名,还可以使用变量来指定,具体使用如下:

let obj = {};
let a = 'little name';
obj.name = '王子';
// 使用点定义属性中间有空格是不合法的
// obj.little name = '小王子';
obj[a] = '小王子';
console.log(obj);
{ name: '王子', 'little name': '小王子' }

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 判断两个值是否相等

一些特殊值使用 ===== 进行比较的结果,可能不满足你的需求,这是你可以使用Object.is(第一个值,第二个值) 来进行判断,可能你就开心的笑了

console.log(NaN == NaN);
console.log(+0 == -0);
console.log(Object.is(NaN, NaN));
console.log(Object.is(+0, -0));
false
true
true
false

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 复制对象

使用 Object.assign() 可以把一个对象复制到另一个对象,使用如下:

let obj = {};
Object.assign(
    // 源
    obj,
    // 复制目标对象
    { a: '☃️' }
);
console.log(obj);
{ a: '☃️' }

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 设置对象的 prototype

使用es6可以设置对象的 prototype,使用如下:

let obj1 = {
    get() {
        return 1;
    }
}
let obj2 = {
    a: 10,
    get() {
        return 2;
    }
}
let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);
1
true
2
true

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 proto

let obj1 = {
    get() {
        return 1;
    }
}
let obj2 = {
    a: 10,
    get() {
        return 2;
    }
}
let test = {
    __proto__: obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);
1
true
2
true

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 super

let obj1 = {
    get() {
        return 1;
    }
}
let test = {
    __proto__: obj1,
    get() {
        return super.get() + ' ☃️';
    }
}
console.log(test.get());
1 ☃️

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 生成迭代器

在学习前,先首写一个迭代器

function die(arr) {
    let i = 0;

    return {
        next() {
            let done = (i >= arr.length);
            let value = !done ? arr[i++] : undefined;

            return {
                value: value,
                done: done
            }
        }
    }
}
let arr = ['☃️', '?', '?'];

let dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
{ value: '☃️', done: false }
{ value: '?', done: false }
{ value: '?', done: false }
{ value: undefined, done: true }

OK,看看简化的生成器

function* die(arr) {
    for (let i = 0; i <pre class="brush:php;toolbar:false">{ value: '?', done: false }
{ value: '☃️', done: false }
{ value: undefined, done: true }

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 类

使用es6可以快速方便的构建类,好耶

class stu {
    constructor(name) {
        this.name = name;
    }
    say() {
        return this.name + '说奥里给';
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());
小明说奥里给

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 get set

定义get/set方法,用于获取或者修改类的属性

class stu {
    constructor(name) {
        this.name = name;
    }
    get() {
        return this.name;
    }
    set(newStr) {
        this.name = newStr;
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());
小明
大明

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 static

使用static关键字修饰的方法,不用实例化对象也可以直接使用

class stu {
    static say(str) {
        console.log(str);
    }
}
stu.say("奥里给 静态方法");
奥里给 静态方法

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 extends

使用继承,可以减少代码冗余,比如:

class Person {
    constructor(name, bir) {
        this.name = name;
        this.bir = bir;
    }
    showInfo() {
        return '姓名:' + this.name + '生日:' + this.bir;
    }
}
class A extends Person {
    constructor(name, bir) {
        super(name, bir);
    }
}
let zhouql = new A("周棋洛", "2002-06-01");
// 周棋洛本身是没有showInfo方法的,是继承自Person的
console.log(zhouql.showInfo());
姓名:周棋洛生日:2002-06-01

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 Set

Set 集合,与数组不同,Set 集合中不允许有重复元素

// 创建Set集合
let food = new Set('??');
// 重复添加,只有一个能进去
food.add('?');
food.add('?');

console.log(food);
// 当前集合大小
console.log(food.size);
// 判断集合中是否存在某一元素
console.log(food.has('?'));
// 删除集合中某一元素
food.delete('?');
console.log(food);
// 循环遍历集合
food.forEach(f => {
    console.log(f);
});
// 清空集合
food.clear();
console.log(food);
Set(3) { '?', '?', '?' }
3
true
Set(2) { '?', '?' }
?
?
Set(0) {}

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 Map

Map结合存储键值对

let food = new Map();
let a = {}, b = function () { }, c = "name";

food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, '米饭');

console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));

food.forEach((v, k) => {
    console.log(`${k} + ${v}`);
});
food.clear();
console.log(food);
Map(3) { {} => '?', [Function: b] => '?', 'name' => '米饭' }
3
?
Map(2) { {} => '?', [Function: b] => '?' }
true
[object Object] + ?
function () { } + ?
Map(0) {}

이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!

ES6 模块化

使用模块化开发,es6可以方便的导入和导出一些内容,还有默认导出等等细节

let a = '?';
let f1 = function (str = '你丫的写参数') {
    console.log(str);
}
export { a, f1 };
import {a, f1} from './27模块测试.js';
console.log(a);
f1();
f1('知道了');

恭喜你,读完了本篇文章,能力 + 100 ,颜值 + 10,欢迎下次再来。先别走,如果觉得文章写的不错,还请点赞,收藏,关注帅气的博主啊,手动狗头,我会继续努力,原创不易,你的支持就是小周的动力

(学习视频分享:web前端开发编程基础视频

위 내용은 이 글에서는 ES6에 대한 빠르고 자세한 설명을 제공하고 새로운 기능에 대해 알아볼 것입니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제