在 JavaScript 中扁平化一個陣列

  2. 貼士文章
  3. JavaScript 貼士
  4. 在 JavaScript 中扁平化一個陣列
Moataz Farid 2023年10月12日
JavaScript JavScript Array
  1. 在 JavaScript 中使用 concat() 扁平化陣列
  2. 在 JavaScript 中使用 Array.reduce() 扁平化多維陣列
  3. 在 JavaScript 中使用 flat() 將陣列平坦化到一定深度級別
在 JavaScript 中扁平化一個陣列

本教程將介紹如何在 JavaScript 中扁平化(展開)一個陣列。我們將學習如何使用 concat()、reduce 和 ECMAScript 6 中支援多深度層次的 Arrays.flat() 方法來扁平化 JavaScript 陣列。對於不能使用 ECMAScript 6 的使用者，我們也將用純 for 迴圈實現類似的方法。

在 JavaScript 中使用 concat() 扁平化陣列

假設我們有以下陣列。

var array1 = [['element 1'], ['element 2']];

要把上面的 JavaScript 陣列 array1 扁平化，我們需要所有子陣列的元素都設是父陣列的元素。所以就會像 ["element 1", "element 2"] 這樣。

我們可以使用 Arrays.concat() 方法對陣列進行扁平化處理。

var array1 = [['element 1'], ['element 2']];

var flattenArray = [].concat.apply([], array1);
console.log(flattenArray);

輸出：

["element 1", "element 2"]

在 JavaScript 中使用 Array.reduce() 扁平化多維陣列

Array.reduce() 函式是高階函式之一。它以一個 reducer 函式作為引數來執行。為了理解 reduce() 函式，讓我們看看下面的例子。

var arr = [10, 20, 30, 40];

function myreducerFunction(acc, currentVal) {
  console.log(`The acc. value is ${acc}`);
  console.log(`The current value is ${currentVal}`);
  acc = currentVal + acc;
  return acc;
}

var sum = arr.reduce(myreducerFunction, 0);
console.log(sum);

輸出：

The acc. value is 0
The current value is 10
The acc. value is 10
The current value is 20
The acc. value is 30
The current value is 30
The acc. value is 60
The current value is 40
100

為了使陣列平坦化，我們將使用 reduce 函式執行 reducer 函式，如果輸入的不是陣列，就將其連線起來；否則，我們將再次遞迴地減少它。

var array1 = [['element 1'], ['element 2']];

function myFlatFunction(input) {
  return input.reduce(function(inputArray, inputToFlat) {
    return inputArray.concat(
        Array.isArray(inputToFlat) ? myFlatFunction(inputToFlat) : inputToFlat);
  }, []);
}

var OneLevelFlattenArray = myFlatFunction(array1)
console.log(OneLevelFlattenArray);

輸出：

["element 1", "element 2"]

上面的例子也可以用來扁平化由多個級別深度組成的陣列。

var array2 = [[['element 1'], ['element 2']], ['element 3']];

var TwoLevelFlattenArray = [].concat.apply([], array2);
console.log(TwoLevelFlattenArray);

輸出：

["element 1", "element 2", "element 3"]

在 JavaScript 中使用 flat() 將陣列平坦化到一定深度級別

Array.prototype.flat() 方法是通過傳送深度級別作為引數來平坦一個以上級別深度的陣列。如果我們不知道確切的深度級別，我們可以傳送 Infinity 作為函式的引數。

var array3 = ['element 0', [['element 1'], ['element 2']], ['element 3']];

console.log('Level One > ', array3.flat());
console.log('Level One > ', array3.flat(1));
console.log('Level Two > ', array3.flat(2));
console.log('Full depth flatting > ', array3.flat(Infinity));

輸出：

Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level Two >  (4) ["element 0", "element 1", "element 2", "element 3"]
Full depth flatting >  (4) ["element 0", "element 1", "element 2", "element 3"]