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

巴特西

ES7-ES12总结篇

最新文章

热门文章