ES7-ES12总结篇

脑图模式

 





 

插入

ES7-ES12



ES7



Array.prototype.includes()

 

includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false

 



幂运算符 **

 

等同于 Math.pow()

 



ES8



Object.values(对象)

 

遍历键值，返回一个数组

 



Object.entries(对象)

 

返回键值对数组

 



Object.getOwnPropertyDescriptors()

 

获取一个对象的所有自身属性的描述符。

 



String.prototype.padStart

 

把指定字符串填充到字符串头部，返回新字符串。

 

 

语法：str.padStart(targetLength，[padString])

 

 

eg:   'abc'.padStart(10, "foo"); // "foofoofabc"

 

 

应用场景:   1、时间格式化，月份和日期 如果是一位前面给它填充一个0。2、手机号银行卡号身份证号星号加密

 



String.prototype.padEnd

 

填充到字符串尾部，语法同上

 



尾逗号 Trailing commas

 

许函数的最后一个参数有尾逗号

 



async/await

 

在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。

 

 

await 只能在 async 标记的函数内部使用

 



ES9



Object Rest & Spread

 

把一个对象的数据都拓展到另一个对象上，如果存在相同的属性名，只有最后一个会生效

 

 

rest 属性必须始终出现在对象的末尾

 



for await of

 

异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步

 



Promise.prototype.finally()

 

使用场景: loading关闭

 



String 扩展

 

模板字符串允许嵌套支持常见转义序列

 



ES10



Object.fromEntries()

 

把键值对列表(数组)转换为一个对象，这个方法是和 Object.entries() 相对的。

 



Array.prototype.flat()

 

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

 

 

flat()参数是结构深度，默认为1；使用 Infinity，可展开任意深度的嵌套数组

 

 

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

 

`flat()` 方法会移除数组中的空项，不带参数:
var arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]

 



Array.prototype.flatMap()

 

使用映射函数映射每个元素，然后将结果压缩成一个新数组。包含两部分功能一个是 map，一个是 flat（深度为1）

 

 

对比下 map 和 flatMap 的区别:
const numbers = [1, 2, 3]
numbers.map(x => [x * 2]) // [[2], [4], [6]]
numbers.flatMap(x => [x * 2]) // [2, 4, 6]

 



String.prototype.trimStart()

 

等同于trimLeft()，从字符串的开头删除空格

 



String.prototype.trimEnd()

 

从一个字符串的右端移除空白字符，trimRight 是别名

 



可选的Catch Binding

 

可以省略err参数

 



Symbol.prototype.description

 

可以通过 description 方法获取 Symbol 的描述

 



JSON.stringify() 增强能力

 

使用转义字符，修复超出范围的字符展示错误的问题

 



修订 Function.prototype.toString()

 

返回一个表示当前函数源代码的字符串，包含注释、空格和语法等详细信息。以前只会返回这个函数，不包含注释、空格等。

 



ES11



空值合并操作符??

 

当左侧的操作数为 null或者undefined时，返回其右侧操作数，否则返回左侧操作数

 

 

和 || 区别：左侧数值为假时（例如'',0,NaN,false），返回右侧操作数。

 

 

不能与 &&  和 || 组合使用

 



可选链 ?.

 

在引用为 null 或者 undefined 的情况下不会引起错误；
可选链不能用于赋值；
可选链与空值合并操作符一起使用

 



globalThis

 

获取不同环境下的全局 this 对象（也就是全局对象自身）

 



BigInt

 

定义：BigInt是JavaScript中一种可以用来表示任意精度整数的基本数据类型。使用场景： 主要用来进行大数值运算

 

 

在js中，对整数类型的数据，存在着最大极限，这个极限就是2**53=9007199254740992

 

 

为了计算的准确性，js也定义了最大安全整数，这个整数是9007199254740991

 

 

语法：
1. 直接添加字母n
2、使用 BigInt()，//BigInt(123)输出123n

 

 

不要混合操作BigInt类型和Number类型，会丢失精度

 



String.prototype.matchAll()

 

返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器(遍历器)。遍历器转为数组使用...运算符和Array.from()方法

 

 

使用场景：数据的批量提取

 



Promise.allSettled()

 

解决Promise.all()中并发的多个请求，若某个接口异常，整个都是失败，无法渲染出数据的问题。

 

 

Dynamic Import（按需引入/动态引入）

 



ES12



逻辑运算符和赋值表达式



&&=

 

x &&= 等效于 x && (x = y)，当x为真时，x=y

 



||=

 

x ||= y 等同于：x || (x = y)

 

 

（x ||= y）运算仅在 x 为false时赋值

 



??=

 

(x ??= y) 仅在 x 是 (null 或 undefined) 时对其赋值。

 



String.prototype.replaceAll()

 

'aabbcc'.replaceAll('b', '.'); // 'aa..cc'

 



数字分隔符

 

增加数值的可读性

 

 

ES12中允许 JavaScript 的数值（小数和科学计数法也可）使用下划线（_）作为分隔符。

 

 

注意点：
不能放在数值的最前面（leading）或最后面（trailing）。
不能两个或两个以上的分隔符连在一起。
小数点的前后不能有分隔符。
科学计数法里面，表示指数的e或E前后不能有分隔符。

 



Promise.any

 

接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。

 

 

只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。

 

 

Promise.any()跟Promise.race()方法很像，只有一点不同，就是Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected状态才会结束。

 

 

可参考：https://juejin.cn/post/7046217976176967711