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 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
JS如何在不同平台实现多语言方式
Jul 16 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/05/07 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
javascript 常用方法总结
2009/06/03 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JS常用知识点整理
2017/01/21 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Python实现端口复用实例代码
2014/07/03 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
python write无法写入文件的解决方法
2019/01/23 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
妇科医生自荐信
2013/11/05 职场文书
大学自我鉴定
2013/12/20 职场文书
2014年采购员工作总结
2014/11/18 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android