还不会数组扁平化处理吗

jojo的奇妙前端
129 阅读2分钟

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

let array = [[1,[2,3]],4,5,6,[[7]],[]]
let result = flattenArray(array)
function flattenArray(array){
    ...
}

看到这段代码是否有点眼熟，是的，就是扁平化，这是每个前端都应该去学习理解并且面试也常常会碰到的题

flattenArray的函数将把array处理成[1, 2, 3, 4, 5, 6, 7]并赋值给result，写出该函数实现方法

那么有几种实现方式呢？

取巧（不推荐）

let array = [[1,[2,3]],4,5,6,[[7]],[]]
let result = flattenArray(array)
function flattenArray(array){
    let newArr = array.toString().split(',').map((item)=>+item)
    newArr.pop()
    return newArr
}
console.log(result)
// [1, 2, 3, 4, 5, 6, 7]

这种写法典型是为了答题而答题，如果在array中掺杂对象，则会出现问题

let array = [[1,[2,3]],4,5,6,[[7]],[{}]]
// ...省略，方法不变
// result
// [1, 2, 3, 4, 5, 6, 7]

最后位对象被省略了

let array = [[1,[2,3]],4,5,6,[[{}]],[]]
// ...省略，方法不变
// result
// [1, 2, 3, 4, 5, 6, NaN]

出现了NaN

这样的方法确实很不稳定，接下来看看推荐用法

reduce

let array = [[1,[2,3]],4,5,6,[[7]],[]]
let result = flattenArray(array)
function flattenArray(array) {
  return array.reduce(function (prev, item) {
    return prev.concat(Array.isArray(item) ? flattenArray(item) : item);
  }, []);
}
console.log(result)
// [1, 2, 3, 4, 5, 6, 7]

其中会涉及的方法：

reduce接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

reduce常见的是必须传递两个参数，reduce(total, currentValue)

  1. total:初始值, 或者计算结束后的返回值
  2. currentValue：当前元素

concat方法用于连接两个或多个数组，它包含多个参数concat(array1,array2,array3...)

这个的方法核心思想是通过递归把Array以外的类型push到数组里直至遍历结束，不懂的同学花五分钟打印一下就会明白，不要偷懒

试下更改array测试加入对象的例子

let array = [[1,[2,3]],4,5,6,[[7]],[{}]]
// ...省略，方法不变
// result
// [1, 2, 3, 4, 5, 6, 7, {}]

good

let array =  [[1,[2,3]],4,5,6,[[7]],[{type:1}]]
// ...省略，方法不变
// result
// [1, 2, 3, 4, 5, 6, 7, {type:1}]

good

reset运算符

let array = [[1, [2, 3]], 4, 5, 6, [[7]], []];
let array2 = [[1, [2, 3]], 4, 5, 6, [[7]], [{type:1}]];
let result = flattenArray(array);
let result2 = flattenArray(array2);
function flattenArray(array) {
  while (array.some((item) => Array.isArray(item))) {
    array = [].concat(...array);
  }
  return array;
}
console.log(result);
// [1, 2, 3, 4, 5, 6, 7]
console.log(result2);
// [1, 2, 3, 4, 5, 6, 7, {type:1}]

好的基础才能走更远，这就好比学习算法时让实现反转数组你却用一行reverse()去提交，忘了初心不可取

avatar
文章
阅读
粉丝