ES2023来了！深入解析JavaScript的最新更新

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，包含一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的，我们出的钱
体验地址:https://chat.waixingyun.cn
可以加入网站底部技术群，一起找bug.

1.从数组末尾查找元素

这个函数允许我们根据条件从数组的最后一个元素向前查找元素。例如：

const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}]

console.log(array.findLast(n => n)); //result -> {a: 4,b: 4 }

console.log(array.findLast(n => n.a * 5 === 20)); // result -> {a:4,b:4} 

console.log(array.findLast(n => n.a * 5 === 21)); //result -> undefined 

console.log(array.findLastIndex(n => n.a * 5 === 21)); // result -> -1 

console.log(array.findLastIndex(n => n.a * 5 === 20)); // result -> 3

分析：

const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}]
console.log(array.findLast(n => n)); //结果 -> {a: 4,b: 4 }

使用 findLast 方法从数组的末尾开始查找第一个满足条件（n => n，即所有元素）的元素。因为所有元素都满足条件，所以它返回了数组的最后一个元素 {a: 4, b: 4}。

console.log(array.findLast(n => n.a * 5 === 20)); //结果 -> {a:4,b:4}，因为条件为真，所以返回最后一个元素。

使用 findLast 方法从数组的末尾开始查找第一个满足条件（n => n.a * 5 === 20）的元素。这个条件相当于在查找数组中 a 属性值为4的元素，所以它返回了 {a: 4, b: 4}。

console.log(array.findLast(n => n.a * 5 === 21)); //结果 -> undefined，因为条件为假，所以返回undefined，而不是 {a:4,b:4}。

使用 findLast 方法从数组的末尾开始查找第一个满足条件（n => n.a * 5 === 21）的元素。由于数组中没有任何元素的 a 属性值可以满足这个条件，所以返回 undefined。

console.log(array.findLastIndex(n => n.a * 5 === 21)); //结果 -> -1，因为条件不能为返回最后一个元素。

使用 findLastIndex 方法从数组的末尾开始查找第一个满足条件（n => n.a * 5 === 21）的元素的索引。由于数组中没有任何元素的 a 属性值可以满足这个条件，所以返回 -1。

console.log(array.findLastIndex(n => n.a * 5 === 20)); //结果 -> 3，这是最后一个元素的索引，因为条件为真。

使用 findLastIndex 方法从数组的末尾开始查找第一个满足条件（n => n.a * 5 === 20）的元素的索引。这个条件相当于在查找数组中 a 属性值为4的元素的索引，所以它返回了 3，这是数组的最后一个元素的索引。

2.Hashbang 语法

这个特性使我们能够在某些命令行接口中使用 Hashbang / Shebang。Shebang 用 #! 表示，是脚本开始的特殊行，告诉操作系统执行脚本时应该使用哪个解释器。

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(2*3);

#!/usr/bin/env node
// in the Module Goal
export {};
console.log(2*2);

#!/usr/bin/env node 这行代码将直接调用一个 Node.js 源文件，作为其自身的可执行文件。

我们不需要使用这行代码 (#!/usr/bin/env node) 来显式地通过 Node 解释器调用文件，例如， node ./file 。

3.将 Symbols 作为 WeakMap 的键

这允许使用唯一的 Symbols 作为键。目前 WeakMaps 只允许对象作为键。因为它们共享同样的身份特性。

Symbol是ECMAScript中唯一的原始类型，允许使用唯一的值，因此可以使用Symbol作为键，而不是创建一个新的带有WeakMap的对象。

const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));

4.通过复制改变数组

这在 Array.prototype 上提供了额外的方法，通过返回带有更改的新数组副本，而不是更新原始数组来更改数组。

新引入的 Array.prototype 函数包括：

1. Array.prototype.toReversed()
2. Array.prototype.toSorted(compareFn)
3. Array.prototype.toSpliced(start, deleteCount, …items)
4. Array.prototype.with(index, value)

事例

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toReversed */
const reversed = numbers.toReversed();
console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

这段代码使用了 toReversed 方法，该方法返回一个新数组，新数组的元素顺序与原数组相反。我们可以看到，原数组 numbers 并未被改变。

/* toSorted  */
const sortedArr = numbers.toSorted();
console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

这段代码使用了 toSorted 方法，该方法返回一个新数组，新数组的元素是原数组元素的排序结果。由于原数组已经是排序的，所以新数组与原数组相同。我们可以看到，原数组 numbers 并未被改变。

/* with */
const replaceWith = numbers.with(1, 100);
console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

这段代码使用了 with 方法，该方法返回一个新数组，新数组在指定索引位置的元素被替换为指定值。我们可以看到，新数组的第二个元素已经被替换为 100，而原数组 numbers 并未被改变。

/* toSpliced */
const splicedArr = numbers.toSpliced(0, 4);
console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

这段代码使用了 toSpliced 方法，该方法返回一个新数组，新数组删除了原数组从指定位置开始的指定数量的元素。我们可以看到，新数组删除了从位置0开始的4个元素，而原数组 numbers 并未被改变。

这些都是ES2023即将推出的一些令人期待的新功能

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。