likes
comments
collection

JS手写数组扁平化(flat)方法

作者站长头像
站长
· 阅读数 15

方法介绍

数组扁平化方法 Array.prototype.flat() 也叫数组拍平、数组拉平、数组降维。

Array.prototype.flat() 用于将嵌套的数组“拉平”,变成一维的数组。

该方法返回一个新数组,对原数据没有影响。

  • 不传参数时,默认“拉平”一层,可以传入一个整数,表示想要“拉平”的层数。
  • 传入 <=0 的整数将返回原数组,不“拉平”。
  • Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组。
  • 如果原数组有空位,Array.prototype.flat() 会跳过空位。

代码示例:

const arr = [1,[2,3],[4,[5,[6]],7]];

// 不传参数时,默认“拉平”一层
arr.flat() 
// [1,2,3,4,[5,[6]],7];

// 传入一个整数参数,整数即“拉平”的层数
arr.flat(2) 
// [1,2,3,4,5,[6],7];

// Infinity 关键字作为参数时,无论多少层嵌套,都会转为一维数组
arr.flat(Infinity);
// [1,2,3,4,5,6,7];

// 传入 <=0 的整数将返回原数组,不“拉平”
arr.flat(0);
// [1,[2,3],[4,[5,[6]],7]]
arr.flat(-6);
// [1,[2,3],[4,[5,[6]],7]]

// 如果原数组有空位,flat()方法会跳过空位
[1,2,3,4,5,6,,].flat();
// [1,2,3,4,5,6]

 开始手写

思路: 实现一个有数组扁平化功能的 flat 函数,要做的就是在数组中找到是数组类型的元素,然后将他们展开。这就是实现数组拍平 flat 方法的关键思路。

遍历数组方案:

for 循环;for...of;for...in;forEach();entries();keys();values();reduce();map()

判断元素是数组方案:

instanceof;constructor;Object.prototype.toString;isArray

将数组的元素展开一层方案:

扩展运算符(…) ; concat;

apply:主要是利用 apply 在绑定作用域时,传入的第二个参数是一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。也就是在调用 apply 函数的过程中,会将传入的数组一个一个的传入到要执行的函数中,也就是相当对数组进行了一层的展开。

使用forEach+push递归实现:

const arr = [1,[2,3],[4,[5,[6]],7]];

function func(array) {
    let newArr = []
    const rec = (arr) => {
      arr.forEach(item => {
        if (!Array.isArray(item)) {
          newArr.push(item)
        } else {
          rec(item)
        }
      })
    }
    rec(array)
    return newArr
  }
  let res = func(arr)
  console.log(res) //[1,2,3,4,5,6,7]

 使用for循环+concat实现:

const arr = [1,[2,3],[4,[5,[6]],7]];

function flatten(arr) {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        result = result.concat(flatten(arr[i]));
      } else {
      result = result.concat(arr[i])
      }
    }
    return result
  }
  
  console.log(flatten(arr));//[1,2,3,4,5,6,7]

增加参数控制扁平化深度,可以理解为手写flat()方法:

const arr = [1,[2,3],[4,[5,[6]],7]];

//版本1:
// forEach 遍历数组会自动跳过空元素
const eachFlat = (arr = [], depth = 1) => {
    const result = []; 
    (function flat(arr, depth) {
      arr.forEach((item) => {
        if (Array.isArray(item) && depth > 0) {
          flat(item, depth - 1)
        } else {
          result.push(item)
        }
      })
    })(arr, depth)
    return result;
  }
  console.log(eachFlat(arr,2))//[1,2,3,4,5,[6],7]
  
  //版本2:
  // for of 循环不能去除数组空位,需要手动去除
  const forFlat = (arr = [], depth = 1) => {
    const result = [];
    (function flat(arr, depth) {
      for (let item of arr) {
        if (Array.isArray(item) && depth > 0) {
          flat(item, depth - 1)
        } else {
          // 去除空元素,添加非 undefined 元素
          item !== void 0 && result.push(item);
        }
      }
    })(arr, depth)
    return result;
  }
  console.log(forFlat(arr,2))//[1,2,3,4,5,[6],7]

巧用reduce方法实现:

有关reduce方法的使用方法和具体细节请看我的这篇文章:戳我传送

const arr = [1,[2,3],[4,[5,[6]],7]];

const flatten = (arr, deep = 1) => {
    if (deep <= 0) return arr;
    return arr.reduce((res, curr) => res.concat(Array.isArray(curr) ? flatten(curr, deep - 1) : curr), [])
}

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