🔥强烈推荐
1. 2022 State of JS 结果出炉
此小节内容较丰富
先来看一些JS特性的使用统计数据
下面介绍一些感觉比较有用的JS特性（根据笔者喜好程度）
Array.prototype.at
可以通过index进行前后查找取值，这个绝对好用
const arr = [1,2,3,4] arr.at(0) // 1 arr.at(-1) // 4
Array.prototype.findLast
与find查找顺序相反，从后往前查符合条件的1项
;[1, 2, 3, 4].findLast((v) => v % 2) // 3
空值合并
这个开发中挺常用 ??，左值为null或undefined时返回右值 x ?? y
下面举个例子 设置默认值的场景
有个这样的对象，期望获取的时候对 null, undefined 场景附默认值
const obj = { n: 0,m: null }
使用对象解构，null 不会正常工作
const { n = 1, m = 2, l = 3 } = obj // 结果如下 // 0, null, 3
使用 || 运算符的场景，无法准确处理 0,false,''等场景
let { n, m, l } = obj n = n || 1 m = m || 2 l = l || 3 // 1, 2, 3
现在换成??看一下
let { n, m, l } = obj n = n ?? 1 m = m ?? 2 l = l ?? 3 // 0, 2, 3
数字分隔符
主要用于表示大数时，阅读更加方便
比如下面这个，一眼看不出多少个 0
const num1 = 1000000000000
咱们用上这个特性表示一下，一下就“数”出来了
const num2 = 1_0000_0000_0000 console.log(num1 === num2) // true
Promise.allSettled
区别于 Promise.all ，其传入的 promise 无论结果（reject/resolve）如何，Promise.allSettled 都会是 resolve 的，其返回的数据结构如下
interface ReturnValue{ status: 'fulfilled' | 'rejected' // 当 status 为 fulfilled 时 返回的数据 value?: any // 当 status 为 rejected 时 返回的数据 reason?: any }
下面是个例子
const p1 = Promise.resolve(1) const p2 = Promise.reject(new Error('2')) Promise.allSettled([p1, p2]).then((res) => { res.forEach((v) => console.log( 'allSettled', v.status, v.status === 'fulfilled' ? v.value : v.reason?.message ) ) }) // allSettled fulfilled 1 // allSettled rejected 2
Promise.any
和 promise.all 作用相反，传入的 promise 只要有一个状态变为 fulfilled 即可，只有所有的都rejected 失败，才需要 catch
下面是fulfilled例子
const p1 = new Promise((resolve) => setTimeout(() => { console.log('setTimeout', 'p1') resolve('p1') }, 200) ) const p2 = new Promise((resolve) => setTimeout(() => { console.log('setTimeout', 'p2') resolve('p2') }, 100) ) Promise.any([p1, p2]).then((v) => console.log('any', v)) // setTimeout p2 // any p2 // setTimeout p1
rejected例子
Promise.any([ Promise.reject(new Error('err1')), Promise.reject(new Error('err2')) ]).catch((e) => { console.log(e.message) console.log(e.errors.map((v) => v.message)) }) // All promises were rejected // [ 'err1', 'err2' ]
可以用于并发多个异步，取任意一个成功响应的场景
类的私有字段
在 js 里 通常通过 _fieldName 表明私有字段（约定），但实际上也能被访问到
现在可以使用 #fieldName 表明私有字段，类似 TS 中 private fieldName，外部无法访问
下面是个例子
class OldPeople { _name = 'xm' } class NewPeople { #name = 'sl' } const p1 = new OldPeople() console.log(p1['_name']) // 'xm' const p2 = new NewPeople() console.log(p1['#name']) // undefined
视野修炼-技术周刊第21期(2)：https://developer.aliyun.com/article/1395090?spm=a2c6h.13148508.setting.25.55964f0ez7IHhI
