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之Partial Application学习
Jan 10 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
10个经典的网页鼠标特效代码
2018/01/09 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python可视化实现KNN算法
2019/10/16 Python
Python input函数使用实例解析
2019/11/22 Python
python 实现简单的FTP程序
2019/12/27 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
车辆工程专业求职信
2014/04/28 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
2014年超市工作总结
2014/11/19 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
2016年社区文体活动总结
2016/04/06 职场文书