英文 | https://javascript.plainenglish.io/5-use-cases-for-array-from-in-javascript-a40889115267

翻譯 | 楊小愛

Array.from() 是一種靜態(tài)方法，它從具有長度屬性和索引元素的類數(shù)組對象或 JavaScript 中的 Map 和 Set 等可迭代對象創(chuàng)建一個新數(shù)組。

參數(shù)是什么？

Array.from() 方法的參數(shù)是一個類似數(shù)組的對象，用于轉換為數(shù)組，一個在每個項目上調(diào)用的 map 函數(shù)，以及在執(zhí)行 map 函數(shù)時使用的 thisArg 值。

目的

Array.from() 方法需要它。它是一個類似數(shù)組的對象，例如具有長度屬性和索引元素以轉換為數(shù)組的對象。

地圖功能

它是一個可選參數(shù)。你不需要每次都在你的 Array.from() 方法中使用它。但是，您可以將此參數(shù)用作映射函數(shù)來調(diào)用每個數(shù)組元素。

thisArg

它也是一個可選參數(shù)。您可以將此值用于 map 函數(shù)，它是第二個參數(shù)。

1、從類數(shù)組對象創(chuàng)建數(shù)組

您可以使用 Array.from() 方法從類數(shù)組對象創(chuàng)建數(shù)組。例如，您有一個字符串，并且您想從該字符串創(chuàng)建一個數(shù)組。您可以按如下方式進行。

Array.from('astring'); // [“a”, “s”, “t”, “r”, “I”, “n”, “g”]

您可以從地圖創(chuàng)建一個新數(shù)組。此外，您可以使用 Array.from() 方法為地圖的鍵和值構造數(shù)組。

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map)// [1, 2], [2, 4], [4, 8]Array.from(map.values());// [2, 4, 8]Array.from(map.keys());// [1, 2, 4]

您還可以編寫一個將參數(shù)作為數(shù)組元素的函數(shù)。然后，返回構造的數(shù)組。

function createArray() { return Array.from(arguments);}createArray(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]

您還可以從用戶定義的可迭代對象創(chuàng)建數(shù)組。

function*?iterator()?{  yield 1;  yield 2;}
console.log(Array.from(iterator())); // [1, 2]

2、初始化一個數(shù)組

有時，您可能需要用零初始化數(shù)組。使用 Array.from() 方法，您可以快速完成。

Array.from({length: 5}, x => 0); // [0, 0, 0, 0, 0]

3、克隆一個數(shù)組

JavaScript 中的 slice() 方法可以幫助您創(chuàng)建數(shù)組的淺拷貝。例如，您可以使用不帶參數(shù)的 slice() 方法克隆一個數(shù)組。

const updatedGrades = [66, 92, 100, 58, 21, 33];midtermGrades = updatedGrades.slice();

您還可以使用 Array.from() 方法克隆一個數(shù)組。

const updatedGrades = [66, 92, 100, 58, 21, 33];const midtermGrades = Array.from(updatedGrades);

4、查找數(shù)組的唯一項

您可以使用 Array.from() 方法在數(shù)組中找到唯一項。為此，您可以將 Array.from() 方法與 Set 結合使用。

Array.from(new Set([1, 2, 2, 3, 3, 3, 4, 4, 4, 4]));// [1, 2, ,3 ,4]

5、創(chuàng)建范圍函數(shù)

Array.from() 可以幫助您根據(jù)需要創(chuàng)建范圍函數(shù)。對于類似數(shù)組的對象參數(shù)，您可以使用類似數(shù)組的 {length:end}

function Range(start, stop, step) {return Array.from({ length: (stop?-?start) / step + 1}, (_, i) => start + (i * step));}
console.log(Range(0,5,1)) // [0, 1, 2, 3, 4, 5]console.log(Range(0,9,3)) // [0, 3, 6, 9]console.log(Range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)));// ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

總結

JavaScript 中的內(nèi)置函數(shù)對于創(chuàng)建函數(shù)至關重要。了解內(nèi)置函數(shù)的用例可以提高您的編程技能。您可以快速創(chuàng)建您需要的功能。

Array.from() 也是一個有用的函數(shù)。如果您知道如何使用它，將有利于解決相關問題。

綜上所述，本文中 Array.from() 方法的用例如下：