Js基础系列-数组的扁平化

2,400 阅读1分钟

前言

一句话概括:数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组

示例

const arr = [1, 2, [3,4, [5, 6]], 7, 8, [9,10,11,[12]]]
const flatten = (arr) => {
    ....
}
# flatten(arr) 输出[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

日常思考

已经清楚flatten函数的作用的话,想下如何实现这个函数

  • 递归,判断选项是否是数组,递归调用
  • 如果数组都是数字的话,直接用toString 方法
  • 数组的高阶函数reduce,其实也是进行判断调用
  • 结合ES6...扩展符号,while 循环
  • ES6已经支持flat,直接调用即可 flat传送门

实现方式

递归

const flatten = (arr) => {
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];
      if (element && Object.prototype.toString.call(element) === '[object Array]') {
        newArr = newArr.concat(flatten(element))
      } else {
        newArr.push(element)
      }
    }
    return newArr
}

toString

const flatten = (arr) => {
  return arr.toString().split(",").map((item) => {
    return +item
  })
}

reduce

reduce包含两个参数:回调函数,传给prev的初始值

const flatten = (arr) => {
  return arr.reduce((prev, next) => {
    return prev.concat(Object.prototype.toString.call(next) === '[object Array]' ? flatten(next): next)
  }, [])
}

扩展运算符 + while + some

es6的扩展运算符能将二维数组变为一维 若arr中含有数组则使用一次扩展运算符,直至没有为止

const flatten = (arr) => {
  while( arr.some ( item => Array.isArray(item))){
    arr = [].concat(...arr);
  }
  return arr
}

Es6 flat

Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

# flat()的参数为1,表示要“拉平”1层的嵌套数组,默认是1
# 如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数
arr.flat(Infinity)

参考文档

数组的扁平化
js专题之数组的扁平化