javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS数组扁平化

JS实现数组扁平化的方法总结

作者:minxcs

数组扁平化相信不少朋友在一些面试中被问到过,这在我们日常编程中也是一个常规操作,它需要我们将一个多维数组转化成一个一维数组,所以,借着这篇文章,我们今天就一起来汇总一下几种数组扁平化的方式,需要的朋友可以参考下

唠一唠

数组扁平化相信不少朋哟在一些面试中被问到过,这在我们日常编程中也是一个常规操作,它需要我们将一个多维数组转化成一个一维数组。当然,我相信很多朋友都能回答上这个问题,但如果面试官要我们多回答几种,可能有些朋友就答不上来了,所以,借着这篇文章,我们今天就一起来汇总一下几种数组扁平化的方式。

1. 普通递归方法

let arr = [1,2,[3,4,[5,6]]]

function flattenArray(arr) {
  let result = []
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenArray(arr[i]));
    } else {
      result.push(arr[i])
    }
  }
  return result
}

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

2. reduce() 方法

let arr = [1,2,[3,4,[5,6,[7,8]]]]

function flattenWithReduce(arr) {
  return arr.reduce((acc, val) => 
    acc.concat(Array.isArray(val) ? flattenWithReduce(val) : [val]),
    []
  );
}

console.log(flattenWithReduce(arr)) // [1, 2, 3, 4, 5, 6, 7, 8]

优点:可读性强,逻辑清晰,无需额外创建函数闭包。 缺点:对于非常深的嵌套结构,性能可能不如使用flat()方法。

3. Array.prototype.flat()

let arr = [1,2,[3,4,[5,6,[7,8,[9]]]]]

function flattenWithFlat(arr) {
  return arr.flat(Infinity) // Infinity表示完全扁平化所有层级
}

console.log(flattenWithFlat(arr)) // [1,2,3,4,5,6,7,8,9]

优点:简洁高效,原生支持,适合现代浏览器环境。 缺点:旧版浏览器不支持此方法,需要polyfill或其他兼容方案。

4. 扩展运算符与concat

let arr = [1,2,[3,[4],[5,6,[7,8,[9]]]]]

function flattenWithSpread(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}

console.log(flattenWithSpread(arr)); // [1,2,3,4,5,6,7,8,9]

优点:代码相对简洁,易于理解。 缺点:循环执行次数取决于数组嵌套深度,效率相对较低。

5. 广度优先搜索与队列

let arr = [1,2,[3,[4],[5,6,[7,8,[9]]]]]

function flattenWithBFS(arr) {
  const queue = [arr] // 创建队列,初始化为待处理的数组
  const result = [] 

  while (queue.length > 0) { 
    const levelItems = queue.shift() // 取出队列首部的一层元素
    for (const item of levelItems) { // 遍历当前层级的每个元素
      if (Array.isArray(item)) { 
        queue.push(item); 
      } else {
        result.push(item) 
      }
    }
  }

  return result 
}

console.log(flattenWithBFS(arr)) // [1,2,3,4,5,6,7,8,9]

优点:

缺点:

6. 深度优先搜索与堆栈

let arr = [1,2,[3,[4],[5,6,[7,8,[9]]]]]

function flattenWithDFS(arr) {
  const stack = [...arr] // 将原数组转换为堆栈
  const result = [] 

  while (stack.length > 0) { // 当堆栈中有待处理元素时
    const current = stack.pop() // 取出堆栈顶部的元素

    if (Array.isArray(current)) { 
      stack.push(...current) // 将其所有元素压入堆栈
    } else {
      result.unshift(current) // 否则将非数组元素添加到结果数组的开头
    }
  }

  return result 
}

console.log(flattenWithDFS(arr));  // [1,2,3,4,5,6,7,8,9]

优点:

缺点:

7. lodash库的_.flattenDeep()

import _ from 'lodash'

let arr = [1,2,[3,[4],[5,6,[7,8,[9]]]]] 

const flattenedArr = _.flattenDeep(nestedArr)

console.log(flattenedArr)

优点:第三方库封装,功能强大且经过优化,适用于各种复杂场景。 缺点:增加项目依赖,不适合仅需简单扁平化且关注性能与体积的应用场景。

以上就是七种常见的数组扁平化的方式了,掌握了这七种数组扁平化的方法,这类问题相信你回答起来也会得心应手。今天就聊到这,至于数组扁平化的应用场景本文并未介绍,当然这也是一个非常重要的知识点,不过本文主要是总结一些方法,对于应用场景感兴趣的掘友们可自行搜索哦。如果还有其他的数组扁平化方法,欢迎大佬在评论区补充哦。

到此这篇关于JS实现数组扁平化的方法总结的文章就介绍到这了,更多相关JS数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文