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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
js选择器全面解析
Jun 27 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
javascript实现倒计时提示框
Mar 02 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
图解上海144收音机
2021/03/02 无线电
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
php中Ctype函数用法详解
2014/12/09 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
PHP微信API接口类
2016/08/22 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
js初始化验证实例详解
2016/11/26 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Python中Class类用法实例分析
2015/11/12 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python学生管理系统代码实现
2020/04/05 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
个人简历自荐信
2013/12/05 职场文书
学校文明单位申报材料
2014/05/06 职场文书
啤酒节策划方案
2014/05/28 职场文书
项目申请汇报材料
2014/08/16 职场文书
就业导师推荐信范文
2015/03/27 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫