5种 JavaScript 方式实现数组扁平化


Posted in Javascript onOctober 05, 2021

一、数组扁平化概念

数组扁平化是指将一个多维数组变为一维数组

[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

二、实现

1. reduce

遍历数组每一项,若值为数组则递归遍历,否则concat

function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}

reduce是数组的一种方法,它接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce包含两个参数:回调函数,传给total的初始值

// 求数组的各项值相加的和: 
arr.reduce((total, item)=> {  // total为之前的计算结果,item为数组的各项值
    return total + item;
}, 0);

2. toString & split

调用数组的toString方法,将数组变为字符串然后再用split分割还原为数组

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
}

因为split分割后形成的数组的每一项值为字符串,所以需要用一个map方法遍历数组将其每一项转换为数值型

3. join & split

和上面的toString一样,join也可以将数组转换为字符串

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

4. 递归

递归的遍历每一项,若为数组则继续遍历,否则concat

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

5. 扩展运算符

es6的扩展运算符能将二维数组变为一维

[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

根据这个结果我们可以做一个遍历,若arr中含有数组则使用一次扩展运算符,直至没有为止。

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

总结:

到此这篇关于5种 JavaScript 方式实现数组扁平化的文章就介绍到这了,更多相关JavaScript 实现数组扁平化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
js尾调用优化的实现
May 23 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 #Javascript
Javascript设计模式之原型模式详细
JS数组方法some、every和find的使用详情
8个JS的reduce使用实例和reduce操作方式
Oct 05 #Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 #Javascript
JavaScript实现简单拖拽效果
Sep 15 #Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 #Javascript
You might like
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
深入理解Python装饰器
2016/07/27 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python的多维空数组赋值方法
2018/04/13 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
如何通过python计算圆周率PI
2020/11/11 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
工程质量保证书
2015/05/09 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
python xlwt模块的使用解析
2021/04/13 Python
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android