前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >面试官:怎样实现JS数组扁平化?

面试官:怎样实现JS数组扁平化?

作者头像
前端老道
发布2022-12-01 10:00:37
1.3K0
发布2022-12-01 10:00:37
举报
文章被收录于专栏:Vue开发社区
一、什么是’扁平化‘

扁平化的意思对于数组来说,就是将多维数组展开成一维数组或少于当前数组维数的数组。

二、实现扁平化
1、toString 和 split 相结合
思路:

toString 可以将多维数组转变成字符串,在通过 split 转换成数组,此时每个元素都为字符串,但需注意的是 此时每个数组元素都为字符串,可以用Number进行转换。

实现:
代码语言:javascript
复制
let arr = [1,2,[3,4,[5,6,7]]]
function strSplit (arr) {
  return arr.toString().split(',').map((i) => Number(i))
}
console.log('结果是:', strSplit(arr)) // 结果是:[1,2,3,4,5,6,7]

2、reduce迭代
思路:

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值当前索引,调用 reduce 的数组。可以通过迭代的方式进行数组扁平化~

实现:
代码语言:javascript
复制
let arr = [1, [2, [3, 4, 5]]]
function reduceArr (arr) {
  let result = arr.reduce((newArr, i) => {
    return newArr.concat(Array.isArray(i) ? reduceArr(i) : i)
  }, [])
  return result
}
console.log('结果是:', reduceArr(arr)) // 结果是:[1,2,3,4,5]

3、es6 flat函数
思路:

es6的 flat函数实现数组的扁平化,语法:Array.flat(dep), dep为展开数组的维数(整数),如 dep 是 1, 就是展开1层,如想多维数组都展开成一维数组则 直接 dep 等于 Infinity

实现:
代码语言:javascript
复制
let arr = [1,2,[3,4,5]]

function es6Arr (arr) {
  return arr.flat(Infinity)
}
console.log('结果是:', es6Arr(arr)) // 结果是:[1,2,3,4,5]

4、递归实现
思路:

递归的思路就是,通过遍历,判断元素是否是数组,如果是数组则继续执行此函数,直至将

实现:
代码语言:javascript
复制
  let arr = [1, [2, [3, 4, 5]]];
  function floatDg (arr) {
    let result = []
    for(let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        result = result.concat(floatDg(arr[i]))
      } else {
        result.push(arr[i])
      }
    }
    return result
  }

  console.log(floatDg(arr), '递归') // 结果:[1,2,3,4,5]

当然除了以上4中还有很多种方法如:

  • es6扩展运算符符 ...
  • 正则

大家可以去思考,去实现,本篇不再多做赘述~,如有问题,请大家多多交流指正~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-09-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、什么是’扁平化‘
  • 二、实现扁平化
    • 1、toString 和 split 相结合
      • 思路:
        • 实现:
          • 2、reduce迭代
            • 思路:
              • 实现:
                • 3、es6 flat函数
                  • 思路:
                    • 实现:
                      • 4、递归实现
                        • 思路:
                          • 实现:
                          领券
                          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档