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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
Angular排序实例详解
Jun 28 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
Jan 19 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 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实现七牛抓取远程图片
2015/12/01 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
从vue源码看props的用法
2019/01/09 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
JS实现星星海特效
2019/12/24 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
详解Python发送email的三种方式
2018/10/18 Python
对python中的argv和argc使用详解
2018/12/15 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
应届毕业生个人求职自荐信
2014/01/06 职场文书
财务主管自我鉴定
2014/01/17 职场文书
《匆匆》教学反思
2014/02/22 职场文书
公司授权委托书范文
2014/09/21 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android