概念

数组降维其实就是将 二维数组 或 多维数组 转换成一个一维数组而已。

数组可能是这样的 [1, 2, [3, 4, 5]] 二维数组，也有可能是这样的 [1, [2, 3, [4, 5, [6, 7], 8], 9], 10] 多维数组，我们需要将这类数组转换成 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 这样的形式，这样的操作就是数组降维，也可以叫数组拍平。

下面将由我来介绍一下如何实现数组降维。


二维数组

遍历

利用 双重循环 遍历二维数组中的每一个元素并存放到新的数组中来实现。

1
2
3
4
5
6
7
8
9
10
11
12
var arr = [
  ['z', 'w', 'w'],
  ['l', 'q'],
  [12, 52, 7]
];
var result = [];
for (var i = 0; i < arr.length; i++) {
  for (var a = 0; a < arr[i].length; a++) {
    result.push(arr[i][a]);
  }
}
console.log(result);    // (8) ["z", "w", "w", "l", "q", 12, 52, 7]

concat()

利用 concat() 方法来合并两个或多个数组。

1
2
3
4
5
6
7
8
9
10
var arr = [
  ['z', 'w', 'w'],
  ['l', 'q'],
  [12, 52, 7]
];
var result = [];
for (var i = 0; i < arr.length; i++) {
  result = result.concat(arr[i]);
}
console.log(result);    // (8) ["z", "w", "w", "l", "q", 12, 52, 7]

concat + apply

同时利用 concat() + apply() 的方式来实现。

1
2
3
4
5
6
7
var arr = [
  ['z', 'w', 'w'],
  ['l', 'q'],
  [12, 52, 7]
];
var result = Array.prototype.concat.apply([], arr);
console.log(result);    // (8) ["z", "w", "w", "l", "q", 12, 52, 7]

flat()

利用 flat() 来实现。此方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

1
2
3
4
5
6
7
var arr = [
  ['z', 'w', 'w'],
  ['l', 'q'],
  [12, 52, 7]
];
var result = arr.flat()
console.log(result)   // (8) ["z", "w", "w", "l", "q", 12, 52, 7]

多维数组

forEach + 递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = [1, [2, 3, [4, 5, [6, 7], 8], 9], 10];
var result = []

function flatten(arr) {
  arr.forEach(item => {
    if (Array.isArray(item)) {
      flatten(item)
    } else {
      result.push(item)
    }
  })
  return result
}

console.log(flatten(arr));    // (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

for + 递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var arr = [1, [2, 3, [4, 5, [6, 7], 8], 9], 10];

function flatten(arr) {
  var arr = arr || [],
    newArr = [],
    item;

  for (var i = 0; i < arr.length; i++) {
    item = arr[i]

    if (isArr(item)) {
      newArr = newArr.concat(flatten(item))
    } else {
      newArr.push(item)
    }
  }

  function isArr(item) {
    return {}.toString.call(item) === '[object Array]'
  }

  return newArr
}

console.log(flatten(arr));    // (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

reduce + concat

1
2
3
4
5
6
7
var arr = [1, [2, 3, [4, 5, [6, 7], 8], 9], 10];
var flatten = arr => {
  return arr.reduce((prev, item) => {
    return prev.concat({}.toString.call(item) === '[object Array]' ? flatten(item) : item)
  }, [])
}
console.log(flatten(arr))   // (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flat()

当 flat() 的参数使用 Infinity，可展开任意深度的嵌套数组。

1
2
3
4
5
6
7
8
9
var arr = [
  1, [2, 3, [
    4, 5, [
      6, 7
    ], 8
  ], 9], 10
];
var result = arr.flat(Infinity)
console.log(result)   // (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]