Array.from讓陣列操作更優雅，Array.from實用場景分享

在日常的前端開發中，我們經常需要對資料進行轉換、處理。在面對類陣列物件和可迭代物件的處理時， 我們的forEach、map等常用的陣列方法似乎顯得有些吃力。比如，我們處理document.querySelectorAll 返回的 NodeList類陣列物件集合，用forEach就是為難自己。這時候，Array.from 就能派上用場，幫助我們以更優雅的方式實現需求。

這篇文章，我們將全面的幫大家梳理 Array.from 的實用場景，幫助大家一步步掌握這一強大方法。快收藏吧~

MDN傳送門：Array.from() - JavaScript | MDN

Array.from 是什麼？

Array.from 是一個靜態方法，用於從以下資料型別生成陣列：

1. 類陣列物件： 包含 length 屬性的物件，例如 arguments。

2. 可迭代物件： 可以被迭代的物件，例如 Map、Set 或 String物件。

類陣列物件與可迭代物件的區別：

Array.from語法：

Array.from(arrayLike, mapFn, thisArg);

基本用法

字串轉陣列

字串是可迭代物件，Array.from 可以將其直接轉換為字元陣列：

const str = "快樂就是哈哈哈";
const charArray = Array.from(str);
console.log(charArray); // ['快', '樂', '就', '是', '哈', '哈', '哈']

將 arguments 轉換為陣列

函式中的 arguments 是類陣列物件，用 Array.from 可以輕鬆轉為陣列，方便操作：

function toArray() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
toArray("你好", "我是", "快樂就是哈哈哈"); // ["你好", "我是", "快樂就是哈哈哈"]

arguments 是 JavaScript 函式中一個內建的類陣列物件，它包含了函式呼叫時傳入的所有引數。即使函式沒有定義引數，arguments 也可以捕獲呼叫時的所有傳參。

從集合（Set）或對映（Map）中生成陣列

const set = new Set(["馬龍", "樊振東", "許昕"]);
console.log(Array.from(set)); // ['馬龍', '樊振東', '許昕']

// 使用中國的地名及其相關資訊建立一個Map物件
const map = new Map([
  ["北京", "中國的首都"],
  ["西安", "我家"],
  ["XX", "你家"]
]);
console.log(Array.from(map)); // [['北京', '中國的首都'], ['西安', '我家'], ['XX', '你家']]

mapFn 的妙用

Array.from 提供了一個對映函式 mapFn，可以在生成陣列時直接對元素進行處理。

對資料進行包裝

const nums = [1, 2, 3, 4];
const squares = Array.from(nums, num => num ** 2);
console.log(squares); // [1, 4, 9, 16]

從字串中提取 ASCII 碼

const chars = "ABC";
const asciiCodes = Array.from(chars, char => char.charCodeAt(0));
console.log(asciiCodes); // [65, 66, 67]

動態生成範圍陣列

透過 mapFn，我們可以快速生成一個特定範圍的陣列：

const range = (start, end) => Array.from(
  { length: end - start + 1 }, 
  (_, i) => start + i
);
console.log(range(5, 10)); // [5, 6, 7, 8, 9, 10]

上述程式碼中，我們使用{ length: end - start + 1 }建立了一個指定長度的類陣列物件。

使用物件字面量 { length: ... } 建立一個類陣列物件，其長度為 end - start + 1，表示範圍內數字的總數。

超實用場景

去除陣列中的空值

Array.from 可以配合 filter 清理資料：

const rawData = [1, , 2, null, 3, undefined, 4];
const cleanedData = Array.from(rawData, item => item || 0);
console.log(cleanedData); // [1, 0, 2, 0, 3, 0, 4]

批次操作dom

將 DOM 查詢結果轉換為陣列，便於使用陣列方法：

const divs = document.querySelectorAll("div");
const divArray = Array.from(divs);
console.log(divArray); // [div, div, div, ...]

結合Set實現去重效果

利用 Set 去重後，再透過 Array.from 轉為陣列：

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

上述程式碼的去重原理如下：

1. 使用 ****Set ****去重：

• 
  

• Set 是一個集合數據結構，它不允許有重複的值。

• 當我們將一個數組（如 nums）轉換為 Set 時，Set 會自動去除陣列中的重複元素。

2. 轉換回陣列：

• 
  

• 由於 Set 不是陣列，如果我們需要得到一個數組形式的結果，可以使用 Array.from 方法將 Set 轉換回陣列。

當然，不使用Array.from也可以實現：

const nums = [1, 2, 2, 3, 4, 4];
const uniqueNums = [...new Set(nums)]; // 也可以使用擴充套件運算子(...)代替Array.from
console.log(uniqueNums); // [1, 2, 3, 4]

結語

Array.from 是一個靈活且功能強大的工具，能輕鬆將類陣列或可迭代物件轉化為陣列，還可以透過對映函式完成各種複雜的處理。在處理字串、DOM 集合、範圍生成和資料去重時，它能讓程式碼更加優雅、簡潔。