Home > Web Front-end > JS Tutorial > This article will give you a quick and detailed explanation of ES6 and get to know the new features!

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

青灯夜游
Release: 2022-08-24 10:32:56
forward
2044 people have browsed it

This article will give you an in-depth understanding of ES6 and learn about the new features of ES6. I hope it will be helpful to you!

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

Understand ES6

ECMAScript is a# developed by Netscape ## Standardized specification for scripting languages; originally named Mocha, later renamed LiveScript, and finally renamed JavaScript ECMAScript 2015 ( ES2015), the 6th edition, originally known as ECMAScript 6 (
ES6), added new features.

ES6 block-level scope let

First of all, what is a scope? Scope simply means declaring a variable. The valid scope of this variable is before

let comes. js only has global scope and function scope of var, ES6 brings block-level scope# to js ##. [Related recommendations: javascript learning tutorial]

{
    var a = "?";
    let b = "⛳";
}
console.log(a);
console.log(b);
Copy after login
?
Uncaught ReferenceError: b is not defined
Copy after login
This article will give you a quick and detailed explanation of ES6 and get to know the new features!As you can see, we use the var keyword to define it in the block Variable a can actually be accessed globally, so the variable declared by var is global

, but we want the variable to take effect in the block and cannot be accessed outside the block. In this case, we can use ES6 The new block-level scope keywordlet is used to declare this variable a. When I access it again, an error is reported, saying a is not defined, a No definition

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 destructuring array

As shown below, a function is first defined and returns an array. When destructuring is not used Before the array, call the array and assign the return value to temp, and then print the temp array. After using

destructuring the array

, directly define an array variable, and then point the function return value to the variable, and it will automatically The value of one item is assigned to the first array variable, the second item is assigned to the second array variable, and so on. Finally, the three variables are printed and there is no problem.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function breakfast() {     return ['?', '?', '?']; } var temp = breakfast(); console.log(temp[0], temp[1], temp[2]); let [a, b, c] = breakfast(); console.log(a, b, c);</pre><div class="contentsignin">Copy after login</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">? ? ? ? ? ?</pre><div class="contentsignin">Copy after login</div></div>

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 Deconstructing the object

First the

breakfast

function returns an object, use destructuring the object to define the object, The key in the key-value pair represents the key name of the actual object mapped, and the value is the custom variable. After destructuring is completed, the assignment will be completed automatically, and then the breakfast function will be called to return the object, and then the variables a, b, c will be printed. You can see that there is no problem. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function breakfast() {     return { a: '?', b: '?', c: '?' } } let { a: a, b: b, c: c } = breakfast(); console.log(a, b, c);</pre><div class="contentsignin">Copy after login</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">? ? ?</pre><div class="contentsignin">Copy after login</div></div>

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 template string

Before using the template string, we splice the string variable using

Use the template string provided by ES6. First use `` to wrap the string. When you want to use a variable, use

${variable}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let a = '?',     b = '?️'; let c = '今天吃' + a + '吃完看' + b; console.log(c); let d = `今天吃 ${a} 吃完看 ${b}`; console.log(d);</pre><div class="contentsignin">Copy after login</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">今天吃?吃完看?️ 今天吃 ? 吃完看 ?️</pre><div class="contentsignin">Copy after login</div></div>

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 Determine whether a string contains other strings

Using these functions, you can easily determine whether a string starts with something and ends with something. Does it contain any string operations? When calling a function, if no value is assigned to a parameter, it will be executed using the set default parameters. When a value is assigned to a parameter, it will be executed using the newly assigned value, overriding the default value. Use the following:

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 expansion operator

Use

...

to expand elements for easy operation. Use the following:

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 remainder operator

... The operator is used on function parameters and receives a parameter array. It is used as follows:

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 函数名字

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

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 箭头函数

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

let f1 = a => a;

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

console.log(f1(10));
console.log(f2(10, 10));
Copy after login
10
20
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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);
Copy after login
{ a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 恒量

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

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

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

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 对象属性名

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

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 判断两个值是否相等

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

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 复制对象

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

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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);
Copy after login
1
true
2
true
Copy after login
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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);
Copy after login
1
true
2
true
Copy after login
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 super

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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());
Copy after login
{ value: '☃️', done: false }
{ value: '?', done: false }
{ value: '?', done: false }
{ value: undefined, done: true }
Copy after login

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 }
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 类

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

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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());
Copy after login
小明
大明
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 static

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

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

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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());
Copy after login
姓名:周棋洛生日:2002-06-01
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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);
Copy after login
Set(3) { '?', '?', '?' }
3
true
Set(2) { '?', '?' }
?
?
Set(0) {}
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

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);
Copy after login
Map(3) { {} => '?', [Function: b] => '?', 'name' => '米饭' }
3
?
Map(2) { {} => '?', [Function: b] => '?' }
true
[object Object] + ?
function () { } + ?
Map(0) {}
Copy after login

This article will give you a quick and detailed explanation of ES6 and get to know the new features!

ES6 模块化

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

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

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

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

The above is the detailed content of This article will give you a quick and detailed explanation of ES6 and get to know the new features!. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
es6
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template