天天看點

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

作者:大智視野

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即将推出的一些令人期待的新功能