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

关于数组拍平

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

实现方案

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

function flat(arr) {
  const res = [];
  arr.forEach(item => {
    if(Array.isArray(item)) {
      const flatItem = flat(item); // 递归
      flatItem.forEach(n => res.push(n));
    } else {
      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]

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]

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]

4 ）基于String的toString方法和递归实现

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]
    // 如果有深层数组，则拍平，转换成字符串拍平
    const res = arr.toString().split(',').map(val => +val);
    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]

5 ）直接使用toString方法即可拍平成字符串，再转成数组即可，方案4的优化版本

function flat(arr) {
	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]

6 ) 使用 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]