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

2023-06-10 11:04:10 浏览数 (1)

1.从数组末尾查找元素

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

代码语言:javascript复制
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

分析:

代码语言:javascript复制
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}

代码语言:javascript复制
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}

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

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

代码语言:javascript复制
console.log(array.findLastIndex(n => n.a * 5 === 21)); //结果 -> -1,因为条件不能为返回最后一个元素。

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

代码语言:javascript复制
console.log(array.findLastIndex(n => n.a * 5 === 20)); //结果 -> 3,这是最后一个元素的索引,因为条件为真。

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

2.Hashbang 语法

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

代码语言:javascript复制
#!/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的对象。

代码语言:javascript复制
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)

事例

代码语言:javascript复制
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
代码语言:javascript复制
/* 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 并未被改变。

代码语言:javascript复制
/* 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 并未被改变。

代码语言:javascript复制
/* 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 并未被改变。

代码语言:javascript复制
/* 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即将推出的一些令人期待的新功能

0 人点赞