一、ES6(2015)
1、类:class 可以看作 es6 的语法糖
class App{
constructor(name) {
this.name = 123;
} console() {
console.log(this.name);
}}const b= new App( 123);b.console(); // 123------------------------------------------------------------------------------class Point { // 阮一峰老师案例
constructor(x, y) {
this.x = x;
this.y = y;
} toString() {
return '(' + this.x + ', ' + this.y + ')';
}}
2、智能(ES模块):模块化,多次使用
// 模块 A 导出一个方法export const sub = (a, b) = a + b;
// 模块 B 导入使用import { sub } from ./A;console.log(sub(1, 2)); // 3
// 创建一个A组件,在B组件引用
3、箭头函数:
a. 箭头函数处理 this 指向问题
const func = (a, b) => a + b;func(1, 2); // 3
class Obj { // 阮一峰老师案例
constructor() {
this.getThis = () => this;
}}const myObj = new Obj();myObj.getThis() === myObj // true
b. 另一种方法,解决 this 指向问题:在构造方法中绑定this
// 类的方法内部如果含有 this,它默认指向类的实例。
class App{
constructor() {
this.printName = this.printName.bind(this);
}
// ...}
c. 还有一种解决方法是使用Proxy,获取方法的时候,自动绑定this。
function selfish (target) { // 阮一峰老师案例
const cache = new WeakMap();
const handler = {
get (target, key) {
const value = Reflect.get(target, key);
if (typeof value !== 'function') {
return value;
} if (!cache.has(value)) {
cache.set(value, value.bind(target));
}
return cache.get(value);
}
};
const proxy = new Proxy(target, handler);
return proxy;}
const logger = selfish(new Logger());
4、函数参数默认值
function app(age = 25,){ // ...}
5、 模板字符串
const name = 张三;const str = `你叫 ${name}`;
6、解构架构(解构赋值)
let a = 1, b= 2; // 交换[a, b] = [b, a]; // a 2 b 1
let a = 1;let b = 2; ===》 let [a, b, c] = [1, 2, 3];let c = 3;
let [foo, [[bar], baz]] = [1, [[2], 3]];
let [ , , third] = ["foo", "bar", "baz"]; third // "baz"let [x, , y] = [1, 2, 3]; x // 1 y // 3
let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] ...剩余运算符
let [x, y, ...z] = ['a']; // 如果解构不成功,变量的值就等于 undefined。x // "a"y // undefinedz // []
let [x, y] = [1, 2, 3];x // 1y // 2
let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2d // 4
let [x, y, z] = new Set(['a', 'b', 'c']); // 对于 Set 结构,也可以使用数组的解构赋值。x // "a"let { bar, foo } = { foo: 'aaa', bar: 'bbb' };foo // "aaa"bar // "bbb"let { baz } = { foo: 'aaa', bar: 'bbb' };baz // undefined
7、延展符
let a = [...hello world]; // [h, e, l, l, o, , w, o, r, l, d] // 把字符拆开,运用场景:提取某个字符
8、对象属性简写
const name= 张三,const obj = { name }; ===> const obj = { name: name }// ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。const foo = 'bar';const baz = {foo}; baz // {foo: "bar"}// 等同于const baz = {foo: foo};-----------------------------------------------------------// 方法简写let birth = '2000/01/01';const Person = {
name: '张三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
9、承诺:Promise 对象
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
Promise.resolve().then(() = { console.log(2); });console.log(1); // 先打印 1 ,再打印 2-------------------------------------------------------------------------------------------// ES6 规定,Promise 对象是一个构造函数,用来生成 Promise 实例。// Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject。const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}});// Promise 实例生成以后,可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。promise.then(function(value) {
// success}, function(error) {
// failure});
Promise对象有以下两个特点:
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。
Promise也有一些缺点:
首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
10、让和常量
let name = 张三;const arr = [];
二、ES7(2016)
1、 Array.prototype.includes()
[1].includes(1); // true
2、指数操作符
2**10; // 1024
三、ES8(2017)
1、异步/等待
终极终极解决方案
async getData(){
const res = await api.getTableData(); // await 异步任务
// do something }
2、Object.values():对象转数组
Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]
3、 Object.entries():对象转数组,并解析出 key value
Object.entries({a: 1, b: 2, c: 3}); // [[a, 1], [b, 2], [c, 3]]
4、字符串填充
// padStart'hello'.padStart(10); // ' hello'
// padEnd'hello'.padEnd(10) // 'hello '
'hello'.padEnd(10,'222') // 'hello22222'
5、函数参数列表允许结尾
规定也一样,职能规定与规则和结尾的逗号,保持一致。
6、Object.getOwnPropertyDescriptors()
如果对象的所有自身属性获取一个空,则如果没有返回对象。
7、SharedArrayBuffer 对象
SharedArray 对象使用表示一个通用的长度的密封缓冲区,密封。
/**
*
* @param {*} length 所创建的数组缓冲区的大小,以字节(byte)为单位。 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
*/new SharedArrayBuffer(10)
8、原子对象
Atomics 对象提供了一组静态方法,用于对 SharedArrayBuffer 对象进行原子操作。
四、ES9(2018)
1、徒劳
await可以和for...的循环使用,以某种方式运行异步操作
async function process(array) {
for await (let i of array) {
// doSomething(i);
}}
2、 Promise.finally()
Promise.resolve().then().catch(e = e).finally();
3、Rest/Spread 属性
const values = [1, 2, 3, 5, 6];
4、正则导演组
const reg = /(year[0-9]{4})-(month[0-9]{2})-(day[0-9]{2})/;const match = reg.exec(2021-02-23);
5、正则表达式相反声明
(=p)、(=p) p 前面(位置)、p 后面(位置)(!p)、(!p) 除了 p 前面(位置)、除了 p 后面(位置)
6、正则表达式 dotAll 模式
正则表达式中点。除匹配回车外的任何单字符,标记改变这种行为,允许行终止符的出现。
/hello.world/.test(hello\nworld); // false
五、ES10(2019)
1、Array.flat() 和 Array.flatMap()
平坦的():把数组里的数组打开
[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]
平面图()
[1, 2, 3, 4].flatMap(a = [a**2]); // [1, 4, 9, 16]
2、String.trimStart() 和 String.trimEnd()
去除字符串首尾字符
'abcd'.trim(); // 'abcd''abcd'.trimStart(); // 'abcd'
3、String.prototype.matchAll
matchAll()为所有匹配的匹配对象返回一个重复器
const raw_arr = test1 test2 test3.matchAll((/t(e)(st(\d))/g));const arr = [...raw_arr];
4、Symbol.prototype.description
只读属性,返回 Symbol 对象的任选描述的字符串。
Symbol(description).description; // description
5、 Object.fromEntries()
返回一个给定对象本人可枚举属性值的关键值。
// 通过 Object.fromEntries, 可以将 Map 转化为 Object:const map = new Map([ [foo, bar], [baz, 42] ]);console.log(Object.fromEntries(map)); // { foo: bar, baz: 42 }
6、任选捕获
在 ES10 之前,我们是这样异常的监护人:
try {// tryCode} catch (err) { // catchCode 这里的 err 是必须的参数,在ES10可以省略这个参数。}
六、ES11(2020)
1、空值合并操作符(空值处理)
表达式在的左边求价值,未定义或返回其性质。
let user = {
u1: 0,
u2: false,
u3: null,
u4: undefined
u5: ,}let u2 = user.u2 用户2 // falselet u3 = user.u3 用户3 // 用户3let u4 = user.u4 用户4 // 用户4let u5 = user.u5 用户5 //
2、可选链(任选链)
用户检测宝宝的孩子
let user = {}let u1 = user.childer.name // TypeError: Cannot read property name of undefinedlet u1 = user.childer.name // undefined
3、Promise.allSettled
返回在所有给定的承诺中,已被拒绝或被拒绝后的亲,并以一个对象的承诺,每个对象表示。
const promise1 = Promise.resolve(3);const promise2 = 42;const promise3 = new Promise((resolve, reject) = reject(我是失败的Promise_1));const promise4 = new Promise((resolve, reject) = reject(我是失败的Promise_2));const promiseList = [promise1,promise2,promise3, promise4]Promise.allSettled(promiseList).then(values={
console.log(values)});
4、进口()
导入导入
5、新基本数据类型 BigInt
任意匹配的概率
6、globalThis
·浏览器:window
·工人:自己
·节点:全局
七、ES12(2021)
1、全部替换
返回一个全新的字符串,所有符合匹配规则的字符都将被替换掉
const str = 'hello world';str.replaceAll(l, ); // heo word
// 之前const str = '2-4-6-8-10';const newStr = str.replace(/\-/g, '+');console.log(newStr); //2+4+6+8+10
// 现在可以const str = '2-4-6-8-10';const newStr = str.replaceAll('-', '+');console.log(newStr); //2+4+6+8+10
2、Promise.any
Promise.any() 接收到一个Promise 就可以没有拒绝,只要其中的一个promise 成功,就返回那个promise 。
如果已经可以让对象中返回一个promise 成功(所有的promise 都失败/),失败的承诺。
const promise1 = new Promise((resolve, reject) = reject(我是失败的Promise_1));const promise2 = new Promise((resolve, reject) = reject(我是失败的Promise_2));const promiseList = [promise1, promise2];Promise.any(promiseList).then(values={
console.log(values);}).catch(e={
console.log(e);});
3、弱引用
使用 WeakRefs 的 Class 类创建对对象的弱引用
(对对象的弱引用是指当该对象应该被 GC 回收时不会阻止 GC 的回收行为)
4、逻辑和形式表现
之间的关系和表现,以及性能结合了之间的关系(和表现)
a ||= b //等价于 a = a || (a = b)
a = b //等价于 a = a (a = b)
a = b //等价于 a = a (a = b)
5、数字字符
数字间隔性符,可以在数字之间创建可视化分隔符,通过_下划线来分割数字,使数字化可计算。
const money = 1_000_000_000;//等价于const money = 1000000000;
1_000_000_000 === 1000000000; // true