# ES6+的一些新语法糖和方法整理

只列举了比较实用的而又鲜为人知的一些

# ES2020

# 1. #号创建类的私有变量

class p{
    #name='xiaoming'
    getName(){
        return this.#name
    }
}
let a = new p()
console.log(a.getName());
// Property '#name' is not accessible outside class 'p' because it has a private identifier.
console.log(a.#name);// error
1
2
3
4
5
6
7
8
9
10

# 2. Promise.allSelected

可以在回调中取到所有的promise的返回值与状态,包括rject的

class p {
    #name = 'xiaoming'
    getName() {
        return this.#name
    }
}
let a = new p()
console.log(a.getName());
// console.log(a.#name);

const p1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'success'))
const p2 = new Promise((resolve, reject) => setTimeout(reject, 1000, 'fail'))

Promise.allSettled([p1, p2]).then(res => {
    console.log(res);
    // [
    //     {status: "fulfilled", value: "success"}
    //     {status: "rejected", reason: "fail"}
    // ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 3. 空值运算符??

开发中通常会用||去做变量或者值初始化,但是对于空串和0这些有意义值,会有一些意料之外的结果此时就可以用??去替代

?? 运算符只会把 null 和 undefined 判断为 false

const user = {
    name: 'xiaoming',
    age: '',
    height: 0
};
console.log(user.name || 'abc'); // xiaoming
console.log(user.age || 18); // 18
console.log(user.height || 180); // 180
// 使用??
console.log(user.name ?? 'abc'); // xiaoming
console.log(user.age ?? 18); // 
console.log(user.height ?? 180); // 0
1
2
3
4
5
6
7
8
9
10
11
12

# 4. 可选链运算符?.

当需要访问嵌套在对象内部好几层的属性时,为了避免出现undefind的报错会使用&&去处理代码

使用可选链可让代码更加简洁明了

let data = {}
// &&
console.log(data && data.a && data.a.b);

// ?.
console.log(data?.a?.b);
1
2
3
4
5
6

# 5. globalThis

globalThis 目的就是提供一种标准化方式访问全局对象,有了 globalThis 后,你可以在任意上下文,任意时刻都能获取到全局对象

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window
1
2
3
4
5
6

# ES2019/ES10

# 1. Array.flat

展开数组

let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];

arr.flat(); // [1, 2, 3, 4, 5, 6, Array(4)];

arr.flat().flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)];

arr.flat(3); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

// 展开任意层级
arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
1
2
3
4
5
6
7
8
9
10

# 2. Array.flatMap

与ES6Array.Map()方法相同,但同时也支持展平。该Array.flatMap()方法首先使用映射函数映射每个元素,然后将结果展平为新数组

let arr = [1, 2, 3, 4, 5];

arr.map(x => [x, x * 2]);
// [Array(2), Array(2), Array(2)]
// 0: (2)[1, 2]
// 1: (2)[2, 4]
// 2: (2)[3, 6]

arr.flatMap(v => [v, v * 2]);
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
1
2
3
4
5
6
7
8
9
10

# 3. String.trimStart() & String.trimEnd()

String.trimStart()可用于从字符串的开头去掉空白。String.trimEnd()可用于从字符串的尾部去掉空白

let  greeting =  "    Hello everyone";

console.log(greeting.trimStart());
// "Hello everyone"
1
2
3
4
let greeting = "Hello world    ";

console.log(greeting.trimEnd());
// "Hello world"
1
2
3
4

# 4. 可选 Catch Binding

允许开发人员在catch块中,不使用error参数的情况下使用try/catch

ES2019之前

try {
  // some code
}
catch (err) {
  // error handling code
}
1
2
3
4
5
6

现在可以

try  {
  // some code
}
catch {
  // error handling code
}
1
2
3
4
5
6

# 5. Object.fromEntries

Object.fromEntries()创建一个对象或将键值对转换为一个对象。它只接受Iterable

例如:Object.fromEntries(someIterable)

let entries = new Map([["name", "john"], ["age", 22]]);

console.log(Object.fromEntries(entries));
// { name: 'john', age: 22 }
1
2
3
4

# 6. Symbol.description

只读描述属性,是一个返回Symbol对象的可选描述的字符串

let mySymbol = `My Symbol`;

let symObj = Symbol(mySymbol);

console.log(symObj) // Symbol(mySymbol);

console.log(String(symObj) === `Symbol(${mySymbol})`); // true

console.log(symObj.description); // "My Symbol"
1
2
3
4
5
6
7
8
9

# ES2018/ES9

# 1. for await of

for of方法能够遍历具有Symbol.iterator接口的同步迭代器数据,但是不能遍历异步迭代器

for await of可以用来遍历具有Symbol.asyncIterator方法的数据结构,也就是异步迭代

for of遍历

function d(timeout: number) {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(timeout)
        }, timeout)
    })
}
let data = [d(1000), d(500), d(1200)]

for (const v of data) {
    v.then(console.log)
}
// 500
// 1000
// 1200
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

for await of

function d(timeout: number) {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(timeout)
        }, timeout)
    })
}
let data = [d(1000), d(500), d(1200)]
async function test() {
    for await (const v of data) {
        console.log(v);
    }
}
test();
// 1000
// 500
// 1200
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2. 新的正则表达式特性

2.1 s(dotAll)模式

元字符.无法匹配换行符,可以通过 s(doAll)flag解决

console.log(/foo.bar/.test('foo\nbar')); // false

// 使用 s
console.log(/foo.bar/s.test('foo\nbar')); // true
1
2
3
4

2.2 命名捕获组

在一些正则表达式模式中,使用数字进行匹配可能会令人混淆

命名捕获组,允许为每一个组匹配指定一个名字,既便于阅读代码,又便于引用

const re = /(\d{4})-(\d{2})-(\d{2})/;
const match= re.exec('2020-01-01');
console.log(match[0]);    // 2020-01-01
console.log(match[1]);    // 2020
console.log(match[2]);    // 01
console.log(match[3]);    // 01
1
2
3
4
5
6
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec('2020-01-01');
console.log(match.groups);          // { year: '2020', month: '01', day: '01' }
console.log(match.groups.year);     // 2020
console.log(match.groups.month);    // 01
console.log(match.groups.day);      // 01
1
2
3
4
5
6

使用replace

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
console.log('2020-09-01'.replace(re, '$<month>-$<day>-$<year>')) // 09-01-2020
1
2

# ES2017/ES8

# 1. Object.values(),Object.entries()

Object.values方法返回一个数组,其值由对象的值组成

const obj = { a: '1', b: '2' }
console.log(Object.values(obj));
// [ '1', '2' ]
1
2
3

Object.entries()方法返回一个数组,其值为[key,value]

const obj = { a: '1', b: '2' }
console.log(Object.entries(obj));
// [ [ 'a', '1' ], [ 'b', '2' ] ]
1
2
3

# 2. String padding

String.prototype.padStart

在字符串之前补全字符

String.prototype.padEnd

在字符串之后补全

console.log('llo'.padStart(5, 'hello')); // hello
console.log('0'.padEnd(5, '123')); // 01231
1
2

# 3 Object.getOwnPropertyDescriptors()

获取指定对象的属性描述符

const obj = { a: 1 };
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// { value: 1, writable: true, enumerable: true, configurable: true }
1
2
3

# ES2016/ES7

# 1. 求幂运算符**

效果跟Math.pow(x,y)一致

console.log(2**10); // 1024
console.log(Math.pow(2,10)); // 1024
1
2

# 2. Array.prototype.includes

用法跟String.prototype.includes一致,可读性高于indexOf()

const arr = [1, 2, 'hello']
console.log(arr.includes('hello')); // true
1
2

# 参考