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高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
node全局变量__dirname与__filename的区别
Jan 14 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
javaScript实现一个队列的方法
Jul 14 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php递归创建目录的方法
2015/02/02 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
js实现表格筛选功能
2017/01/18 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python实现堆排序的方法详解
2016/05/03 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python七夕浪漫表白源码
2019/04/05 Python
django用户登录验证的完整示例代码
2019/07/21 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
pandas数据处理进阶详解
2019/10/11 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
.NET面试问题集
2015/12/08 面试题
校园奶茶店创业计划书
2014/01/23 职场文书
情人节寄语大全
2014/04/11 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
python基础学习之生成器与文件系统知识总结
2021/05/25 Python