其他分享
首页 > 其他分享> > 1.5万字概括ES6全部特性(已更新ES2020)(coding)

1.5万字概括ES6全部特性(已更新ES2020)(coding)

作者：互联网

作者：JowayYoung
仓库：Github、CodePen
博客：官网、掘金、思否、知乎
公众号：IQ前端
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

前言

第三次阅读阮一峰老师的《ES6标准入门》了，以前阅读时不细心，很多地方都是一目十行。最近这次阅读都是逐个逐个字来读，发现很多以前都没有注意到的知识点，为了方便记忆和预览全部ES6特性，所以写下本文。

以下提到的《ES6标准入门》统一使用《ES6》这个名称来代替，而最新的ES6版本也是截止到当前的ES2020

本文的知识点完全是参考或摘录《ES6》里的语句，有部分语句为了方便理解和记忆，进行了相同意思的转义，同时对知识点进行归类划分。为了让大家能集中精力来记住这些特性，全文一句废话和题外话都没有，全部模块以笔记的形式进行书写，如果看得不是很惯建议对照《ES6》的内容来学习。

本文整理出来的笔记都是书中的精华内容，囊括了整个ES6体系的所有特性，非常方便大家重新认识全部ES6特性。半小时的阅读就可对ES6有一个全面的了解，可认为是一本ES6特性小字典，收藏后可随时查阅。即使看不完也要拉到本文末尾喔，有个大彩蛋，嘻嘻！

ES6缩略

修正

ES6是ECMA为JavaScript制定的第6个标准版本，相关历史可查看此章节《ES6-ECMAScript6简介》。

标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript 2015是在2015年6月发布ES6的第一个版本。以此类推，ECMAscript 2016是ES6的第二个版本、 ECMAscript 2017是ES6的第三个版本。ES6既是一个历史名词也是一个泛指，含义是5.1版本以后的JavaScript下一代标准，目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。

所以有些文章上提到的ES7(实质上是ES2016)、ES8(实质上是ES2017)、ES9(实质上是ES2018)、ES10(实质上是ES2019)、ES11(实质上是ES2020)，实质上都是一些不规范的概念。从ES1到ES6，每个标准都是花了好几年甚至十多年才制定下来，你一个ES6到ES7，ES7到ES8，才用了一年，按照这样的定义下去，那不是很快就ES20了。用正确的概念来说ES6目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。

ES6组成

另外，ES6更新的内容主要分为以下几点

ES2015

ES2015

声明

作用

重点难点

解构赋值

应用场景

重点难点

字符串扩展

重点难点

数值扩展

对象扩展

属性遍历

数组扩展

扩展应用

重点难点

函数扩展

箭头函数误区

正则扩展

重点难点

Symbol

数据类型

应用场景

重点难点

Set

Set

应用场景

重点难点

WeakSet

应用场景

重点难点

Map

Map

重点难点

WeakMap

应用场景

重点难点

Proxy

应用场景

重点难点

Reflect

设计目的

废弃方法

重点难点

数据绑定：观察者模式

const observerQueue = new Set();
const observe = fn => observerQueue.add(fn);
const observable = obj => new Proxy(obj, {
    set(tgt, key, val, receiver) {
        const result = Reflect.set(tgt, key, val, receiver);
        observerQueue.forEach(v => v());
        return result;
    }
});

const person = observable({ age: 25, name: "Yajun" });

const print = () => console.log(<span class="hljs-subst">${person.name}</span> is <span class="hljs-subst">${person.age}</span> years old);

observe(print);

person.name = "Joway";

Class

原生构造函数

重点难点

私有属性方法

const name = Symbol("name");
const print = Symbol("print");
class Person {
    constructor(age) {
        this[name] = "Bruce";
        this.age = age;
    }
    [print]() {
        console.log(`${this[name]} is ${this.age} years old`);
    }
}

继承混合类

function CopyProperties(target, source) {
    for (const key of Reflect.ownKeys(source)) {
        if (key !== "constructor" && key !== "prototype" && key !== "name") {
            const desc = Object.getOwnPropertyDescriptor(source, key);
            Object.defineProperty(target, key, desc);
        }
    }
}
function MixClass(...mixins) {
    class Mix {
        constructor() {
            for (const mixin of mixins) {
                CopyProperties(this, new mixin());
            }
        }
    }
    for (const mixin of mixins) {
        CopyProperties(Mix, mixin);
        CopyProperties(Mix.prototype, mixin.prototype);
    }
    return Mix;
}
class Student extends MixClass(Person, Kid) {}

Module

模块方案

加载方式

加载实现

CommonJS和ESM的区别

Node加载

循环加载

重点难点

单例模式：跨模块常量

// 常量跨文件共享
// person.js
const NAME = "Bruce";
const AGE = 25;
const SEX = "male";
export { AGE, NAME, SEX };

// file1.js
import { AGE } from "person";
console.log(AGE);

// file2.js
import { AGE, NAME, SEX } from "person";
console.log(AGE, NAME, SEX);

默认导入互换整体导入

import Person from "person";
console.log(Person.AGE);

import * as Person from "person";
console.log(Person.default.AGE);

Iterator

ForOf循环

应用场景

Promise

应用场景

重点难点

Generator

方法异同

应用场景

重点难点

首次next()可传值

function Wrapper(func) {
    return function(...args) {
        const generator = func(...args);
        generator.next();
        return generator;
    }
}
const print = Wrapper(function*() {
    console.log(`First Input: ${yield}`);
    return "done";
});
print().next("hello");

ES2016

ES2016

数值扩展

数组扩展

ES2017

ES2017

声明

字符串扩展

对象扩展

函数扩展

Async

Async对Generator改进

应用场景

重点难点

ES2018

ES2018

字符串扩展

对象扩展

扩展应用

正则扩展

Promise

Async

ES2019

ES2019

字符串扩展

对象扩展

数组扩展

函数扩展

Symbol

ES2020

ES2020

声明

数值扩展

重点难点

对象扩展

正则扩展

Module

Iterator

Promise

ES提案

ES提案

声明

数值扩展

函数扩展

Realm

Class

Module

Promise

Async

总结

最后送大家一张完整的ES6特性图，记得给我点个赞喔，算是对我的一种鼓励。因为图片实在太大无法上传，请关注IQ前端或扫描文章底部二维码，后台回复ES6，获取高清的ES6全部特性记忆图，助你轻松记住ES6全部特性。

结语

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更多高质量文章

关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔

来源：https://juejin.cn/post/6844903959283367950

标签：返回,1.5,遍历,const,函数,ES6,对象,ES2020,属性
来源： https://www.cnblogs.com/konglxblog/p/16456568.html