「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。
大家好，我是L同学，这次我总结了ES10和ES11的常用知识点。
ES10
flat和flatMap
flat
使用flat方法可以对数组进行扁平化(降维)，返回的是一个新数组，不传参数默认是flat(1)，作用是将数组的深度减1。
const nums = [10, 20, [2,9], [[8, 10], [67, 29]], 56]
const newNums = nums.flat()
console.log(newNums); // [ 10, 20, 2, 9, [ 8, 10 ], [ 67, 29 ], 56 ]
可以传入数字n，将数组的深度减n。
const newNums2 = nums.flat(2)
console.log(newNums2); // [10, 20, 2, 9, 8, 10, 67, 29, 56]
flatMap
flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
const nums2 = [10, 20, 30]
const newNums3 = nums2.flatMap(item => {
return item * 2
})
const newNums4 = nums2.map(item => {
return item * 2
})
console.log(newNums3); // [ 20, 40, 60 ]
console.log(newNums4); // [ 20, 40, 60 ]
Object.fromEntries
在ES8中，我们可以通过Object.entries将一个对象转化为entries。这个方法我在这篇文章总结过👉ES7和ES8常用知识点总结
const obj = {
name: 'haha',
age: 18
}
const entries = Object.entries(obj)
console.log(entries); // [ [ 'name', 'haha' ], [ 'age', 18 ] ]
那么我们有一个entries，如何将它转化为对象呢🤔？
一种方法是对数组进行遍历👇。
const newObj = {}
for(const entry of entries) {
newObj[entry[0]] = entry[1]
}
console.log(newObj); // { name: 'haha', age: 18 }
其实，在ES10中，提供了Object.fromEntries方法，可以不用遍历很方便地将entries转化为对象。
const newObj = Object.fromEntries(entries)
console.log(newObj); // { name: 'haha', age: 18 }
应用场景
我们知道了Object.fromEntries如何使用，那么它在什么场景可以应用到呢？
有时候我们会解析url的query字符串，我们可以通过new URLSearchParams(queryString)来创建出一个对象。
const queryString = 'name=haha&age=18&height=1.8'
const queryParams = new URLSearchParams(queryString)
console.log(queryParams); // URLSearchParams { 'name' => 'haha', 'age' => '18', 'height' => '1.8' }
得到的queryParams对象是可以进行遍历的。
for(const param of queryParams) {
console.log(param);
}
我们可以把这个对象看成是entries，把它作为参数传入到Object.fromEntries，这样我们就可以得到一个对象。
const paramObj = Object.fromEntries(queryParams)
console.log(paramObj); // { name: 'haha', age: '18', height: '1.8' }
trimStart和trimEnd
如果一个字符串的首尾有很多空格，我们该如何去除呢？可以通过trim方法去除首尾的空格.
如果想要去除首部或者尾部的空格呢？ES10给我们提供了trimStart和trimEnd方法.
const message = ' hello world '
console.log(message.trim());
console.log(message.trimStart());
console.log(message.trimEnd());
ES11
bigInt
之前，我们不能正确地表示过大的数字。我们可以通过 Number.MAX_SAFE_INTEGER来获取到最大安全数字。
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt); // 9007199254740991
那么如果获取到比最大安全数字更大的数字会怎么样呢？
我们可以看到javascript不能保证比最大安全数字更大的数字是准确的。
console.log(maxInt + 1); // 9007199254740992
console.log(maxInt + 2); // 9007199254740992
在ES11中，引入了一种新的数据类型bigInt，用来表示大的整数，在数值后面加上n。
const bigInt = 900719925474099700n
如果我们想要大的数值和小的数值进行相加操作，那么需要把小的数值转化为bigInt类型。
const bigInt = 900719925474099700n
console.log(bigInt + 10);
运行以上代码,会报TypeError: Cannot mix BigInt and other types, use explicit conversions 的错误，因为js没有把Number类型的10隐式转换成bigInt类型。
可以在小的数值后面加上n，转化为bigInt类型，然后相加，我们可以看出结果是正确的。
const bigInt = 900719925474099700n
console.log(bigInt + 10n); // 900719925474099710n
如果有个Number类型的数值，我们可以通过BigInt将它转换为bigInt类型。
const num = 100
console.log(bigInt + BigInt(num)); // 900719925474099800n
同样，我们也可以将bigInt类型的数值转换成Number类型，但是并不能保证得到的数字是安全的，因为有可能会超过了最大安全数字。
const smallNum = Number(bigInt)
console.log(smallNum); // 900719925474099700
空值运算符
如果有个变量的值为undefined或者null，我们希望给个默认值，那么我们可以使用逻辑或||。
const foo = undefined
const bar = foo || 'default value'
console.log(bar); // default value
使用逻辑或||有个缺点，如果我们想要拿到的结果是空的字符串或者0的话，那么结果还是会返回默认值。
const foo = ''
const bar = foo || 'default value'
console.log(bar); // default value
想要解决这个问题，我们可以使用ES11新增的空值运算符?? 。
当foo为undefined或null时，使用空值运算符??返回的是默认值。
const foo = undefined
const bar = foo ?? 'default value'
console.log(bar); // default value
当foo为空字符串时，使用空值运算符??得到的结果还是空字符串。
const foo = ''
const bar = foo ?? 'default value'
console.log(bar);
可选链?.
当我们想要获取对象中的某个属性值时，我们可以通过.的方式一层层获取，不过有时候我们无法判断需要的属性是否存在，如果还是用这个方法会带来错误。
const info = {
name: 'haha',
/* friend: {
bestFriend: {
name: 'haha'
}
} */
}
console.log(info.friend.bestFriend.name); // TypeError: Cannot read property 'bestFriend' of undefined
我们可以通过if来判断是否存在该属性。
if(info && info.friend && info.friend.bestFriend) {
console.log(info.friend.bestFriend.name);
}
这样的判断显得比较复杂，并且可阅读性和维护性差。
在ES11中，新增了可选链?.可以解决问题。
console.log(info.friend?.bestFriend?.name); // haha
globalThis
我们获取javaScript环境的全局对象时，不同环境的获取方式是不一样的。
在浏览器中我们通过window或者this来获取全局对象。
在node环境中我们通过global来获取全局对象。
// 在浏览器中
console.log(window);
console.log(this);
// 在node环境中
console.log(global);
使用上述方法，当我们想要获取全局对象的时候，还需要判断当前是处于哪个环境。
在ES11中，新增了globalThis，对获取全局对象进行了统一的规范。
console.log(globalThis);
在浏览器环境中
在node环境中
Promise.allSettled
相关知识点在这篇文章中。Promise知识点总结(三)——Promise类方法
往期文章 👇👇👇
