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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
js运动动画的八个知识点
Mar 12 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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实现图片压缩处理
2020/09/09 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
javascript操作css属性
2013/12/30 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
vue 请求后台数据的实例代码
2017/06/22 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python 多线程Threading初学教程
2017/08/22 Python
python requests 使用快速入门
2017/08/31 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python变量类型知识点总结
2019/02/18 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
机械专业应届生求职信
2013/09/21 职场文书
幼儿园长自我鉴定
2013/10/17 职场文书
商场端午节活动方案
2014/01/29 职场文书
公司晚会主持词
2014/03/22 职场文书
《春雨》教学反思
2014/04/24 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang