欢迎来到第 21 期的【视界修炼 – 技能周刊】，下面是本期的精选内容简介。
强烈引荐
- 2022 State of JS 成果出炉
- CodePen: 2022 Top100
- 我国亲戚关系计算器
开源&东西
- Iconbolt
- 音乐聊天室
文章&资讯
- ESLint 2022 年终总结
- 2023 年大淘宝 Web 端技能概览
- 交互式的 3D CSS 教程
引荐大家重视一下最后的引荐内容（周刊的主要内容来源途径）
下面开始本期内容的介绍，估计阅读时刻 9分钟
强烈引荐
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
X Assignment
这个咱们常见的便是 +=,-=
这些主要是用于缩写x = x ○ y等价于x ○= y
现在是支持&&,??,||等
比方简写前面的赋默认值
let { a } = obj
a ??= 1
再来看一下 库/结构
- 前端结构：Svelte > React > Vue > Preact > Angular
- 构建东西：Vite > esbuild > Rollup > Parcel > webpack
东西类库
本年的亮点
Vite 占有了3个板块
2. CodePen: 2022 Top100
很多炫酷和令人眼前相同的东西，引荐大家刷一下，下面贴几个
3. 我国亲戚关系计算器
功用很强壮，除了常规的关系找称号，还支持其它3种，其中 称号找关系 是笔者觉得最赞的
开源&东西
4. Iconbolt
一个 SVG 图标库房，收集了7万多个图标，都能够免费运用。
5. 音乐聊天室
一个开源的多人实时通讯多房间在线音乐聊天室，能够私有化布置，给自己的博客添加一个实时聊天互(mo)动(yu)的功用
文章&资讯
6. ESLint 2022 年终总结
emm。。。 作者回忆了2022做的一些事，展望了一下未来（重写Eslint）
7. 2023 年大淘宝 Web 端技能概览
淘宝 Web 技能地图和技能产品的介绍（部分产品包括独自的介绍文章）
对相关技能感兴趣的可独自深化（增加技能视界广度的好机会）
8. 交互式的 3D CSS 教程
通过交互式的学习，很简单了解上手perspective、perspectiveOrigin、translateZ、rotate3d这4个特点
趣图
篇幅有限，假如你还没看够，可移步后边的引荐途径，继续旅游，前史周刊（<20）移步博客
⭐️强力引荐重视
- 阮一峰: 科技爱好者周刊 – 记录每周值得共享的科技内容，周五发布
- 云谦：MDH 前端周刊 – 前端资讯和共享
- 童欧巴：前端食堂 – 你的前端食堂，吃好每一顿饭
- rottenpen：FE News – 共享前端，日子
- 知识星球：咲奈的平行时空 – 前端前沿技能、资讯、方法论共享
