与时俱进，还不快来看看ES 2023（ES14）新特性！

前言

ECMAScript（简称 ES）是JavaScript的标准规范，它的不断演进为开发者带来了许多强大的新特性和语言改进。ECMAScript 2023（ES14）发布的新的规范，为JavaScript开发者带来更加强大和便捷的编程体验。本文将介绍一些在ES14中引入的新特性。现在，让我们来看看在2023年引入的JavaScript的新功能有哪些吧！

新增和改进的API

1.Array.prototype.findLast

Array.prototype.findLast方法允许您从数组中获取最后一个匹配元素的实例。如果没有找到匹配的元素，则返回undefined。在列表6中给出了一个简单的示例，我们从数组中获取最后一个偶数。下面是一个简单的示例。

onst arr = [54, 34, 55, 75, 98, 77];

const lastEvenIndex = arr.findLast((element) => {
  return element % 2 === 0;
});

console.log(lastEvenIndex); // 98

2.Array.prototype.with

Array.prototype.with新的with()方法允许您根据索引修改单个元素，并返回一个新的数组。因此，如果您知道索引和新值，这个方法非常方便。请注意，with()是set()的复制伴侣。下面是一个简单的示例。

const arr4 = ["I", "am", "the", "Walrus"];

// Replace the string "Walrus" with "Octopus".
const newArr4 = arr4.with(3, "Ape Man");

console.log(newArr4);

3.toSorted()

toSorted()具有与sort()相同的签名，但它创建一个新的数组，而不是在原数组上进行操作。下面是新数组方法Array.prototype.sort()与toSorted()的对比。

let arr = [5,4,2,3,1]
arr === arr.sort(); // true - [1, 2, 3, 4, 5]

arr === arr.toSorted(); // false - [1, 2, 3, 4, 5]

toSorted()和sort()一样，也接受一个可选的参数，即比较函数。例如，我们可以使用toSorted()创建一个按降序排列的新数组，如下面示例。

const numbers = [10, 5, 2, 7, 3, 9, 1, 6, 4]; 
const sortedNumbers = numbers.toSorted((a, b) => { 
  return b - a; 
}); 
console.log(sortedNumbers); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

还需要注意的是，toSorted()也可以应用于对象数组。在这种情况下，您必须提供一个使用对象上的数据的比较函数，因为对象没有自然的排序方式。

// Comparing objects
const objects = [{ name: "John", age: 30 }, { name: "Jane", age: 25 }, { name: "Bill", age: 40 }, { name: "Mary", age: 20 }];
const sortedObjects = objects.toSorted((a, b) => {
  return a.name.localeCompare(b.name); 
});
console.log(sortedObjects);
//[{"name":"Bill","age":40},{"name":"Jane","age":25},{"name":"John","age":30},{"name":"Mary","age":20}]

4.toReversed()

toReversed()是reverse()的复制版本。下面有使用toReversed()的快速示例，包括将其应用于带有比较函数的对象。

["a","b","c","d","e"].toReversed(); // ['e', 'd', 'c', 'b', 'a']

5.findLastIndex()

findLastIndex()的工作方式与之完全相同，只不过它提供的是元素匹配的索引，而不是元素本身。例如下面示例显示了如何查找可被6整除的最后一个元素的索引。

const arr = [18, 31, 45, 75, 67, 79];
arr.findLastIndex(x => x % 6 === 0); // 0

6.Array.prototype.toSpliced

Array.prototype.toSpliced函数与原始版本的 splice 略有不同。splice 是在提供的索引处删除和添加元素来更改现有数组，再返回一个包含数组中所删除元素的数组。toSpliced 则直接返回一个新数组，其中不含被删除的元素，且包含所添加的元素。

假设我们有一个颜色数组，我们需要在中间插入两个新颜色(粉色和青色)。可以在下列示例中看到这一点。记住，这会创建一个新数组，而不是修改原来的数组。

const arr = ["red", "orange", "yellow", "green", "blue", "purple"]; const newArr = arr.toSpliced(2, 1, "pink", "cyan"); console.log(newArr); 
// ["red", "orange", "pink", "cyan", "green", "blue", "purple"]
console.log(newArr[3]);
// 'cyan'
console.log(arr[3]);
// ‘green’

7.将 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));

三、Hashbang 语法

Hashbang 注释是一种特殊的注释语法，其行为与单行注释 (//) 完全一样，只是它以 #! 开头，并且只在脚本或模块的最开始处有效。注意，#! 标志之前不能有任何空白字符。注释由 #! 之后的所有字符组成直到第一行的末尾；只允许有一条这样的注释。JavaScript 中的 hashbang 注释类似于 Unix 中的 shebang，它提供了一个特定的 JavaScript 解释器的路径，用它来执行这个脚本。

// 写在脚本文件第一行
#!/usr/bin/env node
'use strict';
console.log('hello');


// 写在模块文件第一行
#!/usr/bin/env node
export {};
console.log('hello');

现在可以直接执行脚本

# 以前执行脚本
node demo.js

# 有了 hashbang 之后执行脚本
./demo.js

注意：只有当脚本直接在 shell 中运行时，Hashbang 语法才有语意意义，其他环境下 JavaScript 解释器会把它视为普通注释。

总结

本篇文章整理了一些ES2023中很多有趣的新功能和改进的API，比如findLastIndex()、Hashbang 语法以及一些数组的处理方法，这些API大大提高了我们平时开发的效率，尽快去熟悉并使用吧，欢迎大家在评论区进行补充~