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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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
cache_lite试用
2007/02/14 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
php图片裁剪函数
2018/10/31 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
jQuery.each()用法分享
2012/07/31 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
精选干货:Java精选笔试题附答案
2014/01/18 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
希特勒的演讲稿
2014/05/23 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
python 中的@运算符使用
2021/05/26 Python
Java实现多线程聊天室
2021/06/26 Java/Android
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android