JS数组扁平化(flat)方法总结详解


Posted in Javascript onJune 24, 2019

需求:多维数组=>一维数组

let ary = [1, [2, [3, [4, 5]]], 6];
let str = JSON.stringify(ary);

第0种处理:直接的调用

arr_flat = arr.flat(Infinity);

第一种处理

ary = str.replace(/(\[\]))/g, '').split(',');

第二种处理

str = str.replace(/(\[\]))/g, '');
str = '[' + str + ']';
ary = JSON.parse(str);

第三种处理:递归处理

let result = [];
let fn = function(ary) {
for(let i = 0; i < ary.length; i++) }{
let item = ary[i];
if (Array.isArray(ary[i])){
fn(item);
} else {
result.push(item);
}
}
}

第四种处理:用 reduce 实现数组的 flat 方法

function flatten(ary) {
return ary.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
})
}
let ary = [1, 2, [3, 4], [5, [6, 7]]]
console.log(ary.MyFlat(Infinity))

第五种处理:扩展运算符

while (ary.some(Array.isArray)) {
ary = [].concat(...ary);
}

这是一个比较实用而且很容易被问到的问题,欢迎大家交流补充。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
深入了解query和params的使用区别
Jun 24 #Javascript
如何使用JavaScript实现栈与队列
Jun 24 #Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 #Javascript
一次让你了解全部JavaScript的作用域
Jun 24 #Javascript
通过循环优化 JavaScript 程序
Jun 24 #Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 #Javascript
node中实现删除目录的几种方法
Jun 24 #Javascript
You might like
zf框架db类的分页示例分享
2014/03/14 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python实现kMeans算法
2017/12/21 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
wxPython实现整点报时
2019/11/18 Python
python实现坦克大战
2020/04/24 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
竞聘书模板
2014/03/31 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
法人身份证明书
2015/06/18 职场文书
python文件目录操作之os模块
2021/05/08 Python
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
react中的DOM操作实现
2021/06/30 Javascript