JS数组降维的几种方法详解

 更新时间:2021年04月09日 09:45:48   作者:何其所幸,  
这篇文章主要介绍了JS数组降维的几种方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

二维数组降维

使用数组实例方法concat和ES6扩展运算符降维

let arr=[1,2,[3,4],5];
let arr1=[].concat(...arr);
//先使用扩展运算符打散最外边的数组,concat自带打散粘合数组的功能
console.log(arr1);
// [1, 2, 3, 4, 5]

//ES6之前用apply打散数据的兼容性写法
var arr2=[1,2,[3,4],5];
var arr3=[].concat.apply([],arr2);
console.log(arr3);
// [1, 2, 3, 4, 5]

多维数组降维

递归降维

//几种利用数组函数递归降维的写法
//some&concat
//利用some检查数组中是否含有数组有就在调用自己进行降维
function fun(arr){
  arr=[].concat(...arr); 
  //再检查降维后的数组中是否还包含子数组
  let hasArray=arr.some(function(elem){
      return Array.isArray(elem);
  })
  if(hasArray){ //如果包含子数组
      arr=fun(arr);//就只能再降维一次,直到检查不再包含子数组为止
  }
    return arr;
};

//forEach&instanceof
//对数组每个元素进行判断看其是不是数组是在继续调用自己,不是把他放进提前准备的空数组中 
function fun2(arr){
  let ret = [];
  let toArr = function(arr){
    arr.forEach(function(item){
      item instanceof Array ? toArr(item) : ret.push(item);
    });
  }
  toArr(arr);
  return ret;
}

//reduce&concat
//最后准备一个空数组,看传入数组中的每一项是不是数组是就重新调用自己不是就用concat汇总到空数组中
function fun3(sarr){
    return sarr.reduce((pre,val)=>{
        return Array.isArray(val) ? pre.concat(fun3(val)): pre.concat(val)
    },[])
}

Array.prototype.flat()

ES10 新增Array.prototype.flat(),用于将嵌套的数组打散,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
 
//使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

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

相关文章

  • javascript 禁止复制网页

    javascript 禁止复制网页

    常见的一些禁止复制网页的代码,但破解方法也不见容易,这里就不说了,可以看本站以前发布的文章。
    2009-06-06
  • 快速掌握WordPress中加载JavaScript脚本的方法

    快速掌握WordPress中加载JavaScript脚本的方法

    这篇文章主要介绍了快速掌握WordPress中加载JavaScript脚本的方法,以及响应的CSS样式加载方法的简介,需要的朋友可以参考下
    2015-12-12
  • JavaScript中输出</script>标签的方法

    JavaScript中输出</script>标签的方法

    这篇文章主要介绍了JavaScript中输出</script>标签的方法,在一些广告代码中经常会用到这个小技巧,需要的朋友可以参考下
    2014-08-08
  • JavaScript实现内容滚动与导航标签互动关联方案

    JavaScript实现内容滚动与导航标签互动关联方案

    这篇文章主要介绍了JavaScript实现内容滚动与导航标签互动关联方案,主要根据滚动左侧内容,关联激活右侧导航节点展开相应介绍,需要的小伙伴可以参考一下
    2022-06-06
  • 10个很少使用的JavaScript Console方法分享

    10个很少使用的JavaScript Console方法分享

    你一定听说过 console.log() ,而且可能一直在使用它,在本文中,我们将探讨一些最有用的控制台方法,以及它们在数据可视化、调试等方面的用途,感兴趣的小伙伴可以学习一下
    2023-09-09
  • 怎样用JS模拟实现枚举

    怎样用JS模拟实现枚举

    这篇文章主要介绍了怎样用JS模拟实现枚举,对枚举感兴趣的同学,可以实验一下
    2021-04-04
  • js实现倒计时秒杀效果

    js实现倒计时秒杀效果

    这篇文章主要为大家详细介绍了js实现倒计时秒杀效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • layui 根据后台数据动态创建下拉框并同时默认选中的实例

    layui 根据后台数据动态创建下拉框并同时默认选中的实例

    今天小编就为大家分享一篇layui 根据后台数据动态创建下拉框并同时默认选中的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 一文详解JavaScript闭包典型应用

    一文详解JavaScript闭包典型应用

    这篇文章主要介绍了关于Javascript闭包典型应用,文中有非常详细的代码示例.对正在学习js的伙伴们有很好的帮助,需要的朋友可以参考下
    2022-04-04
  • JS实现的系统调色板完整实例

    JS实现的系统调色板完整实例

    这篇文章主要介绍了JS实现的系统调色板,结合完整实例形式分析了js实现调色板效果的具体步骤与实现技巧,涉及js数值计算与页面元素操作的方法,需要的朋友可以参考下
    2016-12-12

最新评论