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 二分法(数组array)
Apr 24 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
js实现select下拉框选择
Jan 11 Javascript
纯JS实现五子棋游戏
May 28 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
DedeCms模板安装/制作概述
2007/03/11 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
Vue精简版风格概述
2018/01/30 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python删除列表内容
2015/08/04 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
母亲七十大寿答谢词
2014/01/18 职场文书
打架检讨书100字
2014/01/19 职场文书
北体毕业生求职信
2014/02/28 职场文书
商业项目策划方案
2014/06/05 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript