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 28 Javascript
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Vuex简单入门
Apr 19 Javascript
实例教学如何写vue插件
Nov 30 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
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
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python实现简单五子棋游戏
2019/06/18 Python
django admin组件使用方法详解
2019/07/19 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
大学生新闻专业个人自我评价
2013/11/12 职场文书
银行职员思想汇报
2013/12/31 职场文书
民生工作实施方案
2014/05/31 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书