js中如何将多层嵌套的数组转换为一层数组

 更新时间:2023年06月29日 10:11:24   作者:遇见小美好  
这篇文章主要介绍了js中如何将多层嵌套的数组转换为一层数组问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

js将多层嵌套的数组转换为一层数组

js将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。

例如:

输入:[1,2,[3,4,[5,6],‘7’],‘a,b]cd’]

期望输出:[1,2,3,4,5,6,‘7’,‘a,b]cd’]

var newArr = []; // 用于存放转换后的数组
function arrOfOneDimension(arr) {
  for (let key of arr) {
    if (Array.isArray(key)) {
      arrOfOneDimension(key);//如果还是数组继续递归调用
    } else {
      newArr.push(key);
    }
  }
  return newArr;
}

验证:

let arr = [1,2,[3,4,[5,6],'7'],'a,b]cd']
console.log(arrOfOneDimension(arr)); //[1,2,3,4,5,6,'7','a,b]cd']

js嵌套的数组扁平化(多维数组变成一维数组)、push()与concat()区别

数组扁平化:将多维数组变成一维数组

ES5

对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法:

方法一 

递归一

function parseArr(arr,res){
    var i=0;
    for(i=0;i<arr.length;i++){
        if(arr[i] instanceof Array){ // 是数组就递归调用上面的扁平化一层的代码
            parseArr(arr[i],res);
        }else{ // 不是数组,直接通过push添加到返回值数组
            res.push(arr[i]);
        }
    }
}
var a=[1,[2,[3,4]],5,6];
var res=[];
parseArr(a,res);

递归二(推荐)

    var arr = ['mu','zi',['dig',['big','love']]]
    function flatten(arr){ 
        var res = []; 
        for(var i=0;i<arr.length;i++){
            if(Array.isArray(arr[i])){ // 是数组就递归调用上面的扁平化一层的代码
                res = res.concat(flatten(arr[i]));
            }else{ // 不是数组,直接通过push添加到返回值数组
                res.push(arr[i]);
            } 
        } 
        return res; 
    }
    console.log(flatten(arr))//["mu", "zi", "dig", "big", "love"]

对上面的方法进行解析:

1.语法:       

  • Array.isArray(object);

参数:

  • object  必需。 要测试的对象。

返回值:

  • 如果 object 是数组,则为 true;否则为 false
  • 如果 object 参数不是对象,则返回 false

2.push()与concat()的区别

1,push()是在原数组的基础上修改的,执行push()方法后原数组的值也会变,在原数组后面添加值;若操作concat()的是一个数组先把原数组的每个值复制到一个新/另的数组,然后在新/另数组上进行操作,所以不会改变原数组的值。

2,如果参数不是数组,不管参数个数有多少个,push()和concat()都会直接把参数添加到数组后;如果参数是一个数组,push()就会直接把数组添加到原数组后,而concat()会把数组里的值取出来添加到原数组后。

方法二 

使用toString先变成一个字符串再使用split变成一个字符串数组(数组中的每个元素是一个字符串),最后使用map方法将数组中的每个元素返回为非字符串。

// var arr1 = [1,[2,[5]],3,4] ==> arr1.toString(); '1,2,5,3,4'
//arr数组中的元素不能为字符串只能为数组
var newArr=arr.toString().split(',').map(function(ele){
    return +ele;
});
console.log(newArr)
alert(typeof arr[0]);  //number

方式三

使用toString()和split(',')方法

  • toString()如果数组的元素都是数字,那么我们可以考虑使用 toString 方法,因为:toString会将数组中的数以逗号形式结合起来。
  • toString()之后再split(',')转成数组,并将其转换回数字数组:
    var arr = [1, [2, [3, 4],[5,[6],[7,8]]]];
    var arrStr = arr.toString();
    console.log(arrStr);// '1,2,3,4,5,6,7,8'
    var strArr = arrStr.split(',');
    console.log(strArr)// ["1", "2", "3", "4", "5", "6", "7", "8"]

方式二和方式三的场景只适用于数组内全部是数字的情况,因为中间是全部转换为字符串了。

方法四 

使用reduce和concat方法

Array.prototype.flatten=function(){
    return this.reduce(function(prev, cur) {
        var moreArr = [].concat(cur).some(Array.isArray(cur));  //判断cur是不是一个数组
        return prev.concat(moreArr ? cur.flatten() : cur);
    },[]);
};
var arr=a.flatten();
    //合并二维数组
    var twoArr = [['mu','zi'],['dig','big'],['lucky','jiji']];
    var oneArr = twoArr.reduce(function(total,currentValue){
        // console.log(total)
        return total.concat(currentValue);
    })
    console.log(oneArr);//["mu", "zi", "dig", "big", "lucky", "jiji"]
  • reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
  • reduce() 可以作为一个高阶函数,用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

    var arr = [1,2,3,4,5,6,7,8,9,10]
    var str = arr.reduce(function(prev,cur,index,arr){
        return prev + cur ;
    })
    console.log(str)//55

方式五

正则

function flatten(arr){
    let str = JSON.stringify(arr).replace(/(\[|\})/g, '');
    str = '[' + str + ']';
    arr = JSON.parse(str);
    return arr;
}

ES6

方式一

es6扩展运算符

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

由于扩展运算符一次只能展开一层数组:

var arr = [1, [2, [3, 4]]];
console.log([].concat(...arr)); // [1, 2, [3, 4]]

因此考虑只要数组中还有数组,就使用扩展运算符展开一次。

方式二

多维-->一维

flat()

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。 

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。

注意:flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中,flat()的参数为2,表示要拉平两层的嵌套数组。

如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原数组有空位,flat()方法会跳过/忽略空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

注意:flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 flat除了有扁平化嵌套数组之外还可以扁平化空项。 

flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()只能展开一层数组。

补充其他知识点(findIndex和indexOf的区别)

1、findIndex(回调函数)

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。   
  • 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的;findIndex() 并没有改变数组的原始值。

        var arr = [1,6,7,8,9,10];
        function findFirstLargeNumber(item) {
            return item > 7;
        }
        console.log(arr.findIndex(findFirstLargeNumber)); // 3

2、indexOf()

indexOf() 方法可返回数组中某个指定的第一个元素位置。

  • 该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
  • 如果在数组中没找到指定元素则返回 -1。
        var arr = [1,6,7,8,9,10];
        console.log(arr.indexOf(8)); // 3

对比:

  • findIndex()和indexOf方法实现都是通过循环遍历查找。
  • findIndex()的应用场景要比indexOf广泛一些,可以查找大于等于小于,表达式可以随便写,indexOf就只能在第一层查找相等的值。
  • findIndex()实际上相当于一个for循环,只不过找到了你不需要自己退出。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript 读URL参数增强改进版版

    JavaScript 读URL参数增强改进版版

    网上有不少JavaScript 读 URL 参数的函数,但没考虑到 URL 中带 # 符的情况,我的可以处理这种情况,并使用了点对象写法,优化了些性能。
    2008-10-10
  • 一次Webpack配置文件的分离实战记录

    一次Webpack配置文件的分离实战记录

    这篇文章主要给大家介绍了关于一次Webpack配置文件的分离实战记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 使用bootstrap3开发响应式网站

    使用bootstrap3开发响应式网站

    这篇文章主要为大家详细介绍了使用bootstrap3开发响应式网站的具体代码,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • momentjs使用详细说明

    momentjs使用详细说明

    这篇文章主要介绍了momentjs详细使用说明,使用 Moment.js 可以轻松地获取上周、上月和前三个月的起始和结束时间,在示例中,我们传入了 '2023-07-15',并将返回的日期信息存储在 dateInfo 变量中,然后将其打印到控制台上,需要的朋友可以参考下
    2023-07-07
  • JS实现悬浮移动窗口(悬浮广告)的特效

    JS实现悬浮移动窗口(悬浮广告)的特效

    页面加载完成之后向页面插入窗口,之后向窗口插入关闭按钮,使用setInterval()函数触发moves()函数开始动画
    2013-03-03
  • 详解Nuxt.js 实战集锦

    详解Nuxt.js 实战集锦

    这篇文章主要介绍了Nuxt.js 实战集锦,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 原生js实现图片轮播特效

    原生js实现图片轮播特效

    这篇文章主要介绍了原生js实现图片轮播特效,适合用于商品展示,实现最简单的广告轮播效果,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • javascript实现全角半角检测的方法

    javascript实现全角半角检测的方法

    这篇文章主要介绍了javascript实现全角半角检测的方法,涉及javascript针对字符遍历与检测的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS数组交集、并集、差集的示例代码

    JS数组交集、并集、差集的示例代码

    本篇文章主要介绍了JS数组交集、并集、差集的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS 设计模式之:工厂模式定义与实现方法浅析

    JS 设计模式之:工厂模式定义与实现方法浅析

    这篇文章主要介绍了JS 设计模式之:工厂模式,结合实例形式分析了JS 工厂模式基本概念、原理、定义、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论