迹忆客 专注技术分享

本教程将介绍如何在 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"]