JavaScript 中的 Array.from 方法是一個(gè)強(qiáng)大的工具，可以輕松地將類數(shù)組對(duì)象或可迭代對(duì)象轉(zhuǎn)換為數(shù)組，并通過(guò)可選的回調(diào)函數(shù)對(duì)每個(gè)元素進(jìn)行自定義處理。本文將詳細(xì)介紹 Array.from 的基本用法、實(shí)際場(chǎng)景中的應(yīng)用，以及它如何與其他 JavaScript 特性相結(jié)合提升代碼的簡(jiǎn)潔性和可讀性。

一、Array.from 方法概述

1. 方法介紹

Array.from 是 ES6 引入的一個(gè)靜態(tài)方法，用于從類數(shù)組對(duì)象（具有 length 屬性的對(duì)象）或可迭代對(duì)象（如字符串、Set、Map）創(chuàng)建一個(gè)新的數(shù)組實(shí)例。

語(yǔ)法：

Array.from(arrayLike, mapFunction, thisArg)

• arrayLike：要轉(zhuǎn)換為數(shù)組的類數(shù)組對(duì)象或可迭代對(duì)象。
• mapFunction（可選）：一個(gè)函數(shù)，對(duì)每個(gè)元素執(zhí)行轉(zhuǎn)換。
• thisArg（可選）：執(zhí)行 mapFunction 時(shí)的 this 值。

返回值：

一個(gè)新的數(shù)組。

2. 示例演示

基本用法：

const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const result = Array.from(arrayLike);
console.log(result); // ['a', 'b']
const str = 'hello';
console.log(Array.from(str)); // ['h', 'e', 'l', 'l', 'o']

帶 mapFunction 的用法：

const nums = [1, 2, 3];
const doubled = Array.from(nums, x => x * 2);
console.log(doubled); // [2, 4, 6]

二、結(jié)合實(shí)際場(chǎng)景的使用

1. 初始化二維數(shù)組

在一些算法題中，我們可能需要初始化一個(gè)二維數(shù)組。利用 Array.from 可以輕松實(shí)現(xiàn)：

const numRows = 3;
const rows = Array.from({ length: numRows }, () => []);
console.log(rows); // [[], [], []]

這個(gè)例子中：

• { length: numRows } 定義了一個(gè)長(zhǎng)度為 numRows 的類數(shù)組對(duì)象。
• () => [] 是一個(gè)回調(diào)函數(shù)，用于為每一行生成一個(gè)新的空數(shù)組。

實(shí)際應(yīng)用： 在模擬二維矩陣時(shí)，rows 數(shù)組可以用于存儲(chǔ)每一行的數(shù)據(jù)，例如在處理 Z 字形轉(zhuǎn)換的算法中。

Z 字形轉(zhuǎn)換示例：

const numRows = 3;
const rows = Array.from({ length: numRows }, () => []);
const input = 'PAYPALISHIRING';
let direction = 1, row = 0;
for (const char of input) {
    rows[row].push(char);
    if (row === 0 || row === numRows - 1) direction *= -1;
    row += direction;
}
console.log(rows.map(r => r.join('')).join('')); // PAHNAPLSIIGYIR

2. 從可迭代對(duì)象創(chuàng)建數(shù)組

對(duì)于字符串、Set 或 Map，Array.from 提供了一種簡(jiǎn)單的方法將它們轉(zhuǎn)換為數(shù)組。

字符串轉(zhuǎn)數(shù)組：

const str = 'JavaScript';
console.log(Array.from(str)); // ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

從 Set 轉(zhuǎn)數(shù)組（去重）：

const set = new Set([1, 2, 2, 3]);
console.log(Array.from(set)); // [1, 2, 3]

從 Map 轉(zhuǎn)數(shù)組：

const map = new Map([[1, 'a'], [2, 'b']]);
console.log(Array.from(map)); // [[1, 'a'], [2, 'b']]

3. 構(gòu)造特定范圍的數(shù)組

可以通過(guò) Array.from 快速生成特定范圍的數(shù)組。

生成從 0 到 9 的數(shù)字?jǐn)?shù)組：

const range = Array.from({ length: 10 }, (_, i) => i);
console.log(range); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

生成平方數(shù)數(shù)組：

const squares = Array.from({ length: 5 }, (_, i) => i ** 2);
console.log(squares); // [0, 1, 4, 9, 16]

三、注意事項(xiàng)

1. 類數(shù)組對(duì)象必須有 length 屬性

Array.from 的第一個(gè)參數(shù)必須是類數(shù)組對(duì)象或可迭代對(duì)象。類數(shù)組對(duì)象需要顯式地定義 length 屬性。

無(wú)效示例：

const obj = { 0: 'a', 1: 'b' };
console.log(Array.from(obj)); // []

修正：

const obj = { 0: 'a', 1: 'b', length: 2 };
console.log(Array.from(obj)); // ['a', 'b']

2. 回調(diào)函數(shù)中的索引

在 Array.from 的回調(diào)函數(shù)中，除了當(dāng)前元素，還可以訪問(wèn)其索引。

示例：

const arr = Array.from({ length: 5 }, (val, index) => index * 2);
console.log(arr); // [0, 2, 4, 6, 8]

3. 性能注意

Array.from 的回調(diào)函數(shù)可能會(huì)對(duì)性能產(chǎn)生一定的影響，特別是在處理大規(guī)模數(shù)據(jù)時(shí)，建議在性能要求較高的場(chǎng)景中謹(jǐn)慎使用。

推薦：

• JavaScript
• react
• vue

到此這篇關(guān)于JavaScript Array.from及其相關(guān)用法詳解的文章就介紹到這了,更多相關(guān)js Array.from用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論