ES系列新增方法在工作中的实践

一、ECMAScript发布的版本

ECMAScript现在没有数字版本号，只有年份版本号。

从 ECMAScript 2016（ES7）开始，版本发布变得更加频繁，每年发布一个新版本。

名称	时间
ECMAScript，第一个版本，就叫ECMAScript，没有简称，不是ECMAScript 1，也不是ECMAScript 1997。	1997年6月
ECMAScript 2nd Edition，第二个版本，没有简称，不叫ECMAScript 2，也不叫ECMAScript 1998。	1998年6月
ECMAScript 3rd Edition，第三个版本，没有简称，不叫ECMAScript 3，也不叫ECMAScript 1999。	1999年12月
ECMAScript 5th Edition，第五个版本，没有简称，不叫ECMAScript 5，也不叫ECMAScript 2009。	2009年12月
ES6	2015-06
ES7	2016-06
ES8	2017-06
ES9	2018-06
ES10	2019-06
ES11	2020-06
ES12	2021-06
ES13	2022-06

二、工作中的实践

Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。includes 函数与 indexOf 函数很相似

 let arr = ['react', 'angular', 'vue'];
 ​
 if (arr.includes('react'))
 {
     console.log('react存在');
 }

替代之前的indexOf()方法。

flat()

把多维数组拍平

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

 [1, 2, [3, [4, 5]]].flat()
 // [1, 2, 3, [4, 5]]
 ​
 [1, 2, [3, [4, 5]]].flat(2)
 // [1, 2, 3, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

Object.values()

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

 const obj = { foo: 'bar', baz: 42 };
 Object.values(obj)
 // ["bar", 42]

1. 如果Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组。
2. Object.values会过滤属性名为 Symbol 值的属性，不会去遍历输出。
3. Object.values只返回对象自身的可遍历属性。

 const obj = Object.create({}, {p: {value: 42}});
 Object.values(obj) // []

Object.entries()

Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

 const obj = { foo: 'bar', baz: 42 };
 Object.entries(obj)
 // [ ["foo", "bar"], ["baz", 42] ]

Object.hasOwn(object, property)

判断属性是否在当前对象中

 const person = {name: 'lxm'}
 console.log(Object.prototype.hasOwnProperty.call(person, 'name')) // true 
 ​
 console.log(Object.hasOwn(person, 'name')) // true

之前写的挺长的，现在只需要6个字母搞定。

at()方法

接受一个整数作为参数，返回对应位置的成员，并支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。

如果参数位置超出了数组范围，at()返回undefined。

 const arr = [5, 12, 8, 130, 44];
 arr.at(2) // 8
 arr.at(-2) // 130
 ------
 const sentence = 'This is a sample sentence';
 ​
 sentence.at(0); // 'T'
 sentence.at(-1); // 'e'
 ​
 sentence.at(-100) // undefined
 sentence.at(100) // undefined

replaceAll

替换所有匹配到的字符串。返回一个全新的字符串。

代替之前的replace方法。

 const str = "student is a real student";
 const newStr = str.replaceAll('student', "hahaha");
 console.log(newStr); 

trimStart()，trimEnd()

去除字符串的前后空格

trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格，它们的行为与trim()一致。它们返回的都是新字符串，不会修改原始字符串。

 const s = '  abc  ';
 ​
 s.trim() // "abc"
 s.trimStart() // "abc  "
 s.trimEnd() // "  abc"

?.运算符

优化我们之前的三元表达式?:

在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

 const firstName = message?.body?.user?.firstName || 'default';
 ​
 a?.b
 // 等同于
 a == null ? undefined : a.b
 ​
 a?.[x]
 // 等同于
 a == null ? undefined : a[x]
 ​
 a?.b()
 // 等同于
 a == null ? undefined : a.b()
 ​
 a?.()
 // 等同于
 a == null ? undefined : a()

1. ?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。
2. 使用?.运算符的场合，不应该使用圆括号。

??=、&&=、 ||=

增逻辑赋值操作符

先来介绍下 ?? .如果一个变量是空，需要给它赋值为一个默认值的情况。通常我们会这样写：let num = number || 222。，代码会有一个 bug。如果realCount的值是0，则会被当作取不到其值，会取到'无法获取'这个字符串。

如果我们使用了??，只有当操作符左边的值是**null或者undefined**的时候，才会取操作符右边的值：

 // 等同于 a = a || b
 a ||= b;
 // 等同于 c = c && d
 c &&= d;
 // 等同于 e = e ?? f
 e ??= f;

数字的下划线 (_) 分隔符

通常是一个逗号,增加数值的可读性。比如，1000可以写作1,000。

ES2021，允许 JavaScript 的数值使用下划线（_）作为分隔符。

 let budget = 1_000_000_000_000;
 budget === 10 ** 12 // true

总结

对于前端来讲，每天都在更新着新的技术框架，我们也要与时俱进，不断督促自己进步。

参考文章

ES6、ES7、ES8、ES9、ES10、ES11、ES12、ES13新特性大全<精心整理>