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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
ext实现完整的登录代码
Aug 08 Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
js数组操作常用方法
May 08 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
请求时token过期自动刷新token操作
Sep 11 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解析html的实现代码
2011/08/08 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
ajax异步请求详解
2017/01/06 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
原生js实现商品筛选功能
2019/10/28 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
keep-alive保持组件状态的方法
2020/12/02 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python存取XML的常见方法实例分析
2017/03/21 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
一道Delphi上机题
2012/06/04 面试题
项目考察欢迎辞
2014/01/17 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
南京大屠杀观后感
2015/06/02 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers