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

前言

一句话概括：数组的扁平化，就是将一个嵌套多层的数组 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专题之数组的扁平化

作者：流浪的先知
链接：https://juejin.im/post/5cbc7b4b6fb9a068937d4e06
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。