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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
详解JS函数重载
Dec 04 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
基于redis的小程序登录实现方法流程分析
May 25 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+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php单例模式示例分享
2015/02/12 PHP
php检测文本的编码
2015/07/26 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python实现视频下载功能
2017/03/14 Python
用python实现的线程池实例代码
2018/01/06 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
2014年公司工作总结
2014/11/22 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL