JavaScript 数组展开(扁平化)和underscore的 flatten

原文地址
数组展开就是将嵌套的数组扁平化(转换为一维的)eg:

const arr=[[[1, 2], [1, 2, 3]], [1, 2]] => [1, 2, 1, 2, 3, 1, 2] 
console.log(flatten(arr))  //[1,2,1,2,3,1,2]

1、判断每一项是否是数组,然后递归

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"a"]]
function flatten(arr){
    let result=[]
    for(let i=0,l=arr.length;i<l;i++){
        if(Array.isArray(arr[i])){
            //递归调用
            result=result.concat(flatten(arr[i]))  
        }else{
            result.push(arr[i])
        }
    }
    return result
}
console.log(flatten(arr),arr)

2、toString

数组在调用toString()会将数组转换成"1,2,1,2,3,1,2",再执行split(",")方法会变成["1", "2", "1", "2", "3", "1", "2"]
还需要将所有的参数转换为数字,所以这种方式的不足就是如果数组里面是[1,2,3,"4","5"]既有数字又有字符串,会全部展开为数字

const arr=[[[1, 2], [1, 2, 3]], [1, 2]]
function flatten(arr){
    return arr.toString().split(",").map(item => {
        //转为数字
        return +item
    })
}
console.log(flatten(arr),arr)

3、reduce方法

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
    return arr.reduce((pre,next) => {
        return pre.concat(Array.isArray(next) ? flatten(next) : next)  //如果是数组同样的递归调用
    },[])
}
console.log(flatten(arr),arr)

4、解构的方式

利用es6新增结构方法可以提取一层的方法,来一层层提取出来

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
    while(arr.some(item => Array.isArray(item))){
        //如果当前数组中还有数组,则展开
        arr=[].concat(...arr)
    }
    return arr
}
console.log(flatten(arr),arr)

5、js原生方法flat

flat(depth) 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。参数depth表示要提取嵌套数组的结构深度,默认为1

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
arr.flat(Infinity)

6、Underscore.js的flatten方法

先上代码

/**
 * param {Array} input 要操作的数组
 * param {Boolean} shallow 浅展开,及为true时,只展开一层,为false是深度展开
 * param {Boolean} strict 遍历第一层时,是否放弃非数组对象
 * param {Array} output 保存最后输出的内容
 */
var flatten = function(input, shallow, strict, output = []) {
  var idx = output.length;
  for (var i = 0, length = getLength(input); i < length; i++) {
    var value = input[i];
    // 说明flatten方法对类数组对象也有支持
    if (isArrayLike(value) && (_.isArray(value) || _.isArguments(value))) {
      if (shallow) {
        // 只展开一层
        var j = 0, len = value.length;
        while (j < len) output[idx++] = value[j++];
      } else {
        // 深度迭代,递归展开
        flatten(value, shallow, strict, output);
        idx = output.length;
      }
    } else if (!strict) {
      output[idx++] = value;
    }
  }
  return output;
};

output将返回数组当作参数传递,可以省去在递归的时候将数据一层层的return到上一层,在性能上会有所提升
::: tip 注意
shallowfalse时,stricttrue是,返回的永远时[] ,这是因为,当shallowfalse时是深度迭代,,当最后迭代到不是数组的时候,就会进入到else if中,如果此时stricttrue则就不会进入到这个分支中,那么output就永远不会被操作,
:::


前端
前端基础,前端深入研究,前端交流

在学习前端中摸爬滚打多年,依然很菜,以后继续加油

102 声望
1 粉丝
0 条评论
推荐阅读
手拉手基于vuepress2搭建专属自己的博客,并集成评论、打赏、搜索等常用功能
两年前,我弃用了原来的hexo博客系统,并用vuepress1.4.1版本快速搭建了自己现在的专属静态博客系统。并一直更新维护至今。博客内陆陆续续的定制了自己的个性首页和列表页,扩展了评论、footer、复制、图片预览等...

一介码农阅读 538

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.7k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.4k评论 4

封面图

在学习前端中摸爬滚打多年,依然很菜,以后继续加油

102 声望
1 粉丝
宣传栏