前端小技巧: 拍平数组的6种常见方法

关于数组拍平

• 所谓数组拍平，就是按照顺序，把他们全放在一个数组中
• 需要考虑多层级和嵌套的问题来彻底拍平数组
  *

实现方案

1 ）一般思路, 先实现一级扁平化，然后递归，直到全部扁平

function flat(arr) {
  const res = [];
  arr.forEach(item => {
    if(Array.isArray(item)) {
      const current = flat(item); // 递归
      current.forEach(n => res.push(n));
      return;
    }
    res.push(item);
  })
  return res;
}

const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 注意，forEach中的 return 不会阻止接下来的遍历

2 ）基于 Array的concat方法和递归实现, 优化方案1

function flat(arr) {
    // 验证 arr 中，还有没有深层数组 [1, 2, [3, 4]]
    const isDeep = arr.some(item => item instanceof Array);
    if (!isDeep) return arr; // 已经是 flatern [1, 2, 3, 4]
    // 如果有深层数组，则拍平，示例：[].concat(1,2,[3,4],5) 返回 [1,2,3,4,5], 利用concat方法的拍平
    const res = Array.prototype.concat.apply([], arr);
    return flat(res); // 递归
}

const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]
1
2
3
4
5
6
7
8
9
10
11

• 注意：concat 只能拍平一级数组，深层不行，需要递归了

3 ）使用reduce实现

function flat(arr) {
  return arr.reduce((result, current) => {
    if (Array.isArray(current)) {
      return result.concat(flat(current));
    }
    return result.concat(current);
  }, []);
}

const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]
1
2
3
4
5
6
7
8
9
10
11

4 ）直接使用Array的toString方法即可拍平成字符串，再转成数组即可

function flat(arr) {
	// 1. 验证 arr 中，还有没有深层数组 [1, 2, [3, 4]]
    const isDeep = arr.some(item => item instanceof Array)
    if (!isDeep) return arr // 已经是 flatern [1, 2, 3, 4]
    // 2. 直接拍平
	return arr.toString().split(',').map(val => +val);
}

const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]
1
2
3
4
5
6
7
8
9
10

• 注意，这里的 toString 方法只能针对数值和字符串类的，如果遇到 boolean 或 类似 {a: 1} 对象等引用类的则不行！

5 ) 使用 Array的 flat() 方法, 注意参数的使用，可以用 Infinity 代替具体的层数

function flat(arr) {
	return arr.flat(Infinity);
}

const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]
1
2
3
4
5
6

• 这是ES提供的方法，非常好用