数组的flat(Infinity)扁平化

发表于 更新于 分类于

一道面试题引发的思考

面试题

1
2
3
4
5
6
7
8
9
10
11
12
// 输入数据
const input = [
  [1, 2, 2],
  [3, 4, 5, 5],
  [6, 7, 8, 9, [11, 12, [12, 13, [14]]]],
  10
];

// 输出数据
expect = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

// 附加条件 最好不要超过五行

学霸答案

1
2
3
4
5
6
7
8
9
10
const ary = [
  [1, 2, 2],
  [3, 4, 5, 5],
  [6, 7, 8, 9, [11, 12, [12, 13, [14]]]],
  10
];
console.log(
  "ary",
  [...new Set(ary.flat(Infinity))].sort((a, b) => a - b)
);

ES6 之数组的 flat(Infinity)扁平化，可以实现多维数组转成一维数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]

flat() 方法会移除数组中的空项:

1
2
3
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

数组平面化

  • 循环 + 递归 (5 行)
1
2
3
4
5
6
7
const flatten = input => {
  result = [];
  input.forEach(v =>
    Array.isArray(v) ? (result = result.concat(flatten(v))) : result.push(v)
  );
  return result;
};

  • 归并方法：reduce

    (1 行 不过太难于理解了)

    reduce 的第二个参数：作为归并基础的初始值

    1
    2
    3
    4
    5
    const flatten = input =>
      input.reduce(
        (prev, next) => prev.concat(Array.isArray(next) ? flatten(next) : next),
        []
      );

  • ES6：...扩展运算符

    5 行代码

1
2
3
4
5
6
const flatten = input => {
  while (input.some(v => Array.isArray(v))) {
    input = [].concat(...input);
  }
  return input;
};

  • toString 法

    一行代码

    只适用于数组元素全部为数字的情况下

1
2
3
4
5
const flatten = ary =>
  ary
    .toString()
    .split(",")
    .map(v => +v);