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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
canvas时钟效果
Feb 16 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
CURL状态码列表(详细)
2013/06/27 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python aiohttp的使用详解
2019/06/20 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
我的中国梦口号
2014/06/16 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
个人整改方案范文
2014/10/25 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL
在python中读取和写入CSV文件详情
2022/06/28 Python