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 相关文章推荐
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
React.js入门学习第一篇
Mar 30 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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进程同步代码实例
2015/02/12 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
mongodb和php的用法详解
2019/03/25 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
保险专业自荐信范文
2014/02/20 职场文书
食品安全工作方案
2014/05/07 职场文书
政审证明范文
2015/06/19 职场文书
小学班级口号大全
2015/12/25 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers