javscript 数组扁平化的实现


Posted in Javascript onFebruary 03, 2020

join toString

该两种方法会将数组元素的类型转换为字符串

var arr = [1, [2, [3, [4, 5]]], 6];
console.log(arr.join()); //1,2,3,4,5,6
console.log(arr.toString()); //1,2,3,4,5,6

var flatArr = arr.join().split(','); // ["1", "2", "3", "4", "5", "6"]
var flatArr = arr.toString().split(',');// ["1", "2", "3", "4", "5", "6"]

缺点: 转换为一维数组后数组元素转换为字符串,需要重新转换数组元素为Number类型

es6 flat

Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响
flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]

缺点: flat 方法的兼容需要考虑下

reduce 递归遍历

function flatten(arr) { 
  return arr.reduce((acc, cur)=> { // 遇到嵌套就递归
    return acc.concat(Array.isArray(cur) ? 
    flatten(cur) : cur);  
  }, []); 
}
console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6]

递归遍历

function flatten(arr) {

  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }

  return arr;
}

console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
复选框全选与全不选操作实现思路
Aug 18 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
详解javascript中的事件处理
Nov 06 Javascript
JavaScript数组操作详解
Feb 04 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Vue强制组件重新渲染的方法讨论
Feb 03 #Javascript
JavaScript中的类型检查
Feb 03 #Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 #Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 #Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 #Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 #Javascript
You might like
PHP数据流应用的一个简单实例
2012/09/14 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
django自带调试服务器的使用详解
2019/08/29 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python递归函数特点及原理解析
2020/03/04 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
高一地理教学反思
2014/01/18 职场文书
环保建议书600字
2014/05/14 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
施工员岗位职责
2015/02/10 职场文书
党员个人总结范文
2015/02/14 职场文书
警示教育观后感
2015/06/17 职场文书
酒店厨房管理制度
2015/08/06 职场文书