视野修炼第21期

欢迎来到第 21 期的【视野修炼 - 技术周刊】，下面是本期的资讯汇总。

也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）

下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。

🔥强烈推荐

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