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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
Vue.js基础知识小结
Jan 13 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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
php阻止页面后退的方法分享
2014/02/17 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python列表切片用法示例
2017/04/19 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
超市总经理岗位职责
2014/02/02 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
学习经验交流会总结
2015/11/02 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers