学习笔记

孜孜不倦，蒸蒸日上

0%

ES6+新特性

发表于 分类于 阅读次数： Valine：

ES6(2015)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
1、类（class）

class Man {
  constructor(name) {
    this.name = '赵十三';
  }
  console() {
    console.log(this.name);
  }
}
const man = new Man('赵十三');
man.console(); // 赵十三


2、模块化(ES Module)

// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3

3、箭头（Arrow）函数

const func = (a,b) => console.log(a + b);
func(1,2) // 3

4、函数参数默认值

function func(a = 11,){
	// 调用func函数未传参数时，控制台默认打印 11
	// 调用func函数传了参数时，控制台打印传的参数
	console.log(a)
}

5、模板字符串

const name = '赵十三'
const str = `我的名字是${name}`
console.log(str) // 我的名字是赵十三

6、解构赋值（注意范例里边的重点注意事项）

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

// 将剩余的值赋值给一个变量
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

// 结构对象
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4（已完成）提案中的特性
// 结构对象 + 将剩余对象赋值给一个变量
// 注意：1、赋值语句周围的圆括号 ( ... ) 在使用对象字面量无声明解构赋值时是必须的！！！！！！一定要注意！！！！！！
// 注意：2、( ... ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行！！！！！！！！
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

// 交换变量
a = 1;b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

7、延展操作符

let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

8、对象属性简写

const name='小豪',
const obj = { name };

9、Promise

Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ，再打印 2

10、let和const

let name = '小豪'
const arr = [];

ES7(2016)

1
2
3
4
5
6
7
1、Array.prototype.includes() – 可用来做模糊搜索 返回值布尔值

[1].includes(1); // true

2指数操作符
2**10   // 1024 -- 不太懂

ES8(2017)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1、async/await – 异步终极解决方案

async getData(){
    const res = await api.getTableData(); // await 异步任务
    // do something    
}

2、
Object.keys() – 取出键值 变为数组
Object.values() – 取出对象值 变为数组
Object.entries() – 把对象变为数组 键值对下标为字符串

Object.keys({a: 1, b: 2, c: 3}); //  ['a', 'b', 'c']
Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]
Object.entries({a: 1, b: 2, c: 3}); // [["a", 1], ["b", 2], ["c", 3]]


4、String padding 字符串的padding
‘hello’.padStart(10); // " hello"
‘hello’.padEnd(10) "hello "

5、函数参数列表结尾允许逗号

6、Object.getOwnPropertyDescriptors()
获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象

7、SharedArrayBuffer对象 SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区 – 了解即可
// 语法：new SharedArrayBuffer(length)
// 参数：length指所创建的数组缓冲区的大小，以字节(byte)为单位。
// 返回值：一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
// 注意：需要new运算符构造
// 创建一个1024字节的缓冲
let sab = new SharedArrayBuffer(1024);


8、Atomics对象
Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作

ES9(2018)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
1、异步迭代
await可以和for…of循环一起使用，以串行的方式运行异步操作
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 属性 – 找出数组中的最大值
用于对象解构的 rest 操作符(…)。目前，这个操作符只能在数组解构和参数定义中使用
对象字面量中的 spread 操作符(…)。目前，这个操作符只能用于数组字面量和在函数方法中调用

// 展开运算符（...）
const values = [1, 2, 3, 5, 6];
console.log( Math.max(...values) ); // 6
// 剩余运算符（...）
const style = {
  width: 300,
  marginLeft: 10,
  marginRight: 30
};
const { width, ...margin } = style;
console.log(width);  // => 300
console.log(margin); // => { marginLeft: 10, marginRight: 30 }


4、正则表达式命名捕获组
JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组，例如：以YYYY-MM-DD的格式解析日期
const
  reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
  match  = reDate.exec('2018-04-30'),
  year   = match[1], // 2018
  month  = match[2], // 04
  day    = match[3]; // 30

这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。
ES2018允许命名捕获组使用符号?<name>，在打开捕获括号(后立即命名，示例如下
 const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  match  = reDate.exec('2018-04-30'),
  year   = match.groups.year,  // 2018
  month  = match.groups.month, // 04
  day    = match.groups.day;   // 30

任何匹配失败的命名组都将返回undefined。
命名捕获也可以使用在replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式

const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d      = '2018-04-30',
  usDate = d.replace(reDate, '$<month>-$<day>-$<year>');


5、正则表达式反向断言
目前JavaScript在正则表达式中支持先行断言（lookahead）。这意味着匹配会发生，但不会有任何捕获，并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号
const
  reLookahead = /\D(?=\d+)/,
  match       = reLookahead.exec('$123.89');
console.log( match[0] ); // $

ES2018引入以相同方式工作但是匹配前面的反向断言（lookbehind），这样我就可以忽略货币符号，单纯的捕获价格的数字：

const
  reLookbehind = /(?<=\D)\d+/,
  match        = reLookbehind.exec('$123.89');

console.log( match[0] ); // 123.89

以上是 肯定反向断言，非数字\D必须存在。同样的，还存在 否定反向断言，表示一个值必须不存在，例如

const
  reLookbehindNeg = /(?<!\D)\d+/,
  match           = reLookbehind.exec('$123.89');

console.log( match[0] ); // null


6、正则表达式dotAll模式 正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许行终止符的出现
/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true


ES10(2019)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1、Array.flat()和Array.flatMap()
[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]   // flat  可以把嵌套数组的值取出来  成为一个数组
[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]  -- 看不懂

2、String.trimStart()和String.trimEnd() 去除字符串首尾空白字符

3、String.prototype.matchAll 为所有匹配的匹配对象返回一个迭代器

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、可选 Catch

ES11(2020)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1、Nullish coalescing Operator(空值处理)
let user = {
    u1: 0,
    u2: false,
    u3: null,
    u4: undefined
    u5: '',
}
let u2 = user.u2 ?? '用户2'  // false
let u3 = user.u3 ?? '用户3'  // 用户3
let u4 = user.u4 ?? '用户4'  // 用户4
let u5 = user.u5 ?? '用户5'  // ''

2、Optional chaining（可选链） ?.用户检测不确定的中间节点
let user = {}
let u1 = user.childer.name // TypeError: Cannot read property 'name' of undefined
let u1 = user.childer?.name // undefined

3、Promise.allSettled 返回一个在所有给定的promise已被决议或被拒绝后决议的promise，并带有一个对象数组，每个对象表示对应的promise结果

4、import() 按需导入

5、新基本数据类型BigInt 任意精度的整数

6、globalThis
浏览器：window
worker：self
node：global

ES12(2021)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
1、replaceAll 返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉
const str = 'hello world';
str.replaceAll('l', ''); // "heo word"

2、Promise.any

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 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
使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)

4、逻辑运算符和赋值表达式
逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的 复合赋值运算符有

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

1
....后续更新
------ The End ------
您的认可是我不断进步的动力！