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 相关文章推荐
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python发展史及网络爬虫
2019/06/19 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python 实现视频 图像帧提取
2019/12/10 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
办公室主任先进事迹
2014/01/18 职场文书
小学生开学感言
2014/02/28 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
文明单位创建材料
2014/12/24 职场文书
人事局接收函
2015/01/30 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android