js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解


Posted in Javascript onJanuary 19, 2019

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

对于一个像这样的嵌套数组: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{
      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{
        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方法将数组中的每个元素返回为非字符串。

//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是不是一个数组
    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() 对于空数组是不会执行回调函数的。

js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

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

方式五: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]]

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

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
js的各种数据类型判断的介绍
Jan 19 #Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 #Javascript
Vuex中的State使用介绍
Jan 19 #Javascript
为什么要使用Vuex的介绍
Jan 19 #Javascript
Vue核心概念Getter的使用方法
Jan 18 #Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 #Javascript
JavaScript数据结构之栈实例用法
Jan 18 #Javascript
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
探究python中open函数的使用
2016/03/01 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Windows下python3.6.4安装教程
2018/07/31 Python
详解django自定义中间件处理
2018/11/21 Python
Python实现时间序列可视化的方法
2019/08/06 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
小学教师听课制度
2014/02/01 职场文书
卖车协议书
2014/04/21 职场文书
党委班子对照检查材料
2014/08/19 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
MySQL sql_mode的使用详解
2021/05/08 MySQL