前端工程师必懂面试题之JS数组扁平化

数组扁平化就是将一个多维数组，拍平为一维数组。也是面试中常见的JS面试题，考验面试者对JS数组基础知识的掌握程度。

比如说现在有这样一个多维数组arr:

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

目标是变成一维数组:

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

方法1

ES6的Array.prototype.flat([depth])

arr = arr.flat(3)
console.log(arr);
// 打印结果：
[
   1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14,
  15, 16, 17
]

Array.prototype.flat([depth])中的depth指的是深度，或者说几维数组。上方的arr最大维度是3维，所以指明参数depth为3。在不知道维度的情况下可以指明depth为Infinity，代表不管几维数组，都会降为一维数组。

方法2

调用数组的toString()方法
其实这个算是两种解决方法。
1 - 先通过arr.toString()将数组变成字符串
2 - 此时数组变成了1,2,3,...,15,16,17的一串字符串
3.1 - 可以通过split(',') 将数组以逗号分割为一个一维度数组。但是注意此时数组中的元素都是字符串类型，要将字符串转为数字
3.2 - 也可以给数组字符串的首尾分别加中括号[]包裹，再通过JSON.parse()将数组字符串转换为真正的数组

arr = arr.toString();
// "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17"

// 方法 2-1:
arr = arr.split(','); // 分割为数组
// ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17"]
arr = arr.map(item => parseFloat(item)); // 转数字
// [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]

// 方法 2-2:
arr = '[' + arr + ']';
// "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]"
arr = JSON.parse(arr);
// [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]

方法3

while循环 + some

while(arr.some(item=>Array.isArray(item))){
    // 只要有数组类型 都会通过展开运算符进行降维
    arr = [].concat(...arr);
}
console.log(arr);
// 打印结果:
[
   1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14,
  15, 16, 17
]

此方法通过while不断降维，最终变成一维数组

方法4

写一个递归来实现

function flat(arr) {
  let result = [];
  let fn = function(arr) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        fn(arr[i]);
      } else {
        result.push(arr[i]);
      }
    }
  };
  fn(arr);
  return result;
}
let res = flat(arr);
console.log(res);
// 打印结果:
[
   1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14,
  15, 16, 17
]