js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
数组的扁平化:将多维数组变成一维数组
对于一个像这样的嵌套数组: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() 对于空数组是不会执行回调函数的。
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]]
因此考虑只要数组中还有数组,就使用扩展运算符展开一次。
若有不足请多多指教!希望给您带来帮助!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
- 关于Oracle和MySQL中的无密码登录 (r5笔记第39天)
- 快速定位隐蔽的sql性能问题及调优(r5笔记第38天)
- 关于统计信息过期的性能落差(r5笔记第36天)
- 系统级alias vs Oracle ADR功能(r5笔记第35天)
- 关于收缩数据文件的尝试(r5笔记第34天)
- 搭建dataguard碰到的几个小问题(r5笔记第33天)
- TP-LINK 远程代码执行漏洞 CVE-2017-13772 趣谈
- 执行计划中的COLLECTION ITERATOR PICKLER FETCH导致的性能问题 (r5笔记第49天)
- dataguard switchover的自动化脚本实现 (r5笔记第48天)
- 曲折的dump导入及问题分析(r5笔记第47天)
- 对一道if-else相关的程序题的简单分析(r5笔记第45天)
- 持续近7个小时的索引扫描的查询优化分析 (r5笔记第44天)
- 04.Java对象和类
- 关于Oracle数据恢复的两个临界点(r5笔记第42天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现的微信APP支付功能示例【基于TP5框架】
- php创建多级目录与级联删除文件的方法示例
- Linux VPS定时备份服务器/网站数据到Github私人仓库
- Laravel框架验证码类用法实例分析
- Yii框架常见缓存应用实例小结
- 使用Docker搭建DPlayer视频弹幕接口API后端
- php+jQuery ajax实现的实时刷新显示数据功能示例
- yii2.0框架使用 beforeAction 防非法登陆的方法分析
- PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
- php项目中类的自动加载实例讲解
- Yii框架参数配置文件params用法实例分析
- 使用Kotlin实现文字渐变TextView的代码
- thinkPHP5框架路由常用知识点汇总
- PHP实现一个限制实例化次数的类示例
- AndroidStudio中重载方法@Override的使用详解