前端技术双周刊#21-2022.04.20

JavaScript

• ECMAScript proposal-change-array-by-copy
  新的 TC39 提案 proposal-change-array-by-copy，提供了某些数组方法的非破坏性版本，修改数组会生成新数组，原数组并不受影响。.toReversed()对应.reverse()，.toSorted()对应.sort()，.toSpliced()对应.splice()，.with(index, value)对应arr[index]=value。

• JAVASCRIPT FUNCTION COMPOSITION: WHAT’S THE BIG DEAL?
  介绍了 JavaScript 中 Function Composition 的几种常见形式：compose(), flow(), pipe()，以及和传统过程式编程的区别。表面上 Function Composition 以表达式的形式描述，是函数式编程的一种体现；本质上它能促使我们思考不同逻辑之间的关系，使我们更关注于结果而非细节，帮助我们写出更具可读性和可维护的代码

CSS/HTML

• CSS Parent Selector
  关于 CSS 选择器:has的全面介绍。目前浏览器支持的不是很好，但是在未来的 CSS 开发中一定离不开它

• Write HTML, the HTML Way (Not the XHTML Way)
  大家可能已经很少使用 XHTML 了，但是在写 HTML 的时候会不知不觉把 XHTML 的规范带入进来，也经常把这两个规范混淆。这篇文章指导你用更符合 HTML 的方式去写 HTML。

• 前端 “一键换肤“ 的 N 种方案
  现在越来越多的网站都提供了拥有换肤（切换主题）功能，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制的功能.本文探究如何优雅的实现”一键换肤”

Node.js

• Node.js 18 is now available!
  Node.js 18 正式发布了！

• 大规模 Node.js 网关架构设计与工程实践
  使用 Node.js 来实现大规模的网关服务，讲解的非常详细。

• Node.js Heap Snapshot 崩溃调查
  这篇文章详细讲述了一次 Node.js Heap Snapshot 崩溃的深入调查过程，值得一读。

拓展阅读

• Figma’s Flexbox
  我们发现 Figma 中的 Auto Layout 和前端领域 CSS 中的 Flexbox 很像，其实 Auto Layout 就是受到了 Flexbox 强大功能的启发才设计出来的

• 基于 Vue + 百度地图的多车实时运动及轨迹追踪实现
  实现车辆实时移动，并进行轨迹追踪

• 11+ Chrome 高级调试技巧，学会效率直接提升666%
  一些 Chrome 浏览器中的开发技巧

• 基于人脸识别的口罩识别算法
  在许多的场景下人们都需要进行口罩的佩戴的，如果进行人工的检查将会浪费大量的人力，口罩识别某些方面能更好的代替人力进行检测。通过抓取视频接口的视频流数据作为输入送给算法进行处理、或者直接将图片输入给算法，输出标记完成的视频或图片，其中包括人脸的检测及口罩的识别标记。

工具

• Operator Lookup
  一个 JavaScript 运算符学习工具

编辑：王珊