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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
Javascript实现单选框效果
Dec 09 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
PHP 查找字符串常用函数介绍
2012/06/07 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php字符集转换
2017/01/23 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
简单了解django缓存方式及配置
2019/07/19 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
武汉高蓝德国际.net机试
2016/06/24 面试题
生物技术研究生自荐信
2013/11/12 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
物业消防安全责任书
2014/07/23 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
同意报考证明
2015/06/17 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
初一军训感言
2015/08/01 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书