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

 更新时间:2021-09-30 20:48:37   作者:佚名   我要评论(0)

目录一、数组扁平化概念
二、实现1. reduce2. toString & split3. join & split4. 递归5. 扩展运算符一、数组扁平化概念


数组扁平化是指

一、数组扁平化概念

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

[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 实现数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • Js数组扁平化实现方法代码总汇
  • JS数组扁平化、去重、排序操作实例详解
  • JS扁平化输出数组的2种方法解析
  • JS数组扁平化(flat)方法总结详解
  • JavaScript之数组扁平化详解
  • js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

相关文章

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

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

    目录一、数组扁平化概念 二、实现1. reduce2. toString & split3. join & split4. 递归5. 扩展运算符一、数组扁平化概念 数组扁平化是指
    2021-09-30
  • Java杂谈之如何优化写出漂亮高效的代码

    Java杂谈之如何优化写出漂亮高效的代码

    目录命名中的不一致方案中的不一致代码中的不一致总结大部分程序员对于一致性本身的重要性是有认知的。但通常来说,大家理解的一致性都表现在
    2021-09-30
  • JavaScript实现轮播图案例

    JavaScript实现轮播图案例

    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 运用定时器所写成的一个简单的轮播图,直接看代码,如
    2021-09-30
  • python学习字符串驻留与常量折叠隐藏特性详解

    python学习字符串驻留与常量折叠隐藏特性详解

    下面是Python字符串的一些微妙的特性,绝对会让你大吃一惊。 案例一: 案例二: 案例三: 很好理解, 对吧? 说明: 这些行为是由于 Cpy
    2021-09-30
  • 纯JS将table表格导出到excel的方法

    纯JS将table表格导出到excel的方法

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">IE导出Excel方法</button> <button type="bu
    2021-09-30
  • Python装饰器的两种使用心得

    Python装饰器的两种使用心得

    装饰器的基础使用(装饰带参函数) def decorator(func): def inner(info): print('inner') func(info) return i
    2021-09-30
  • 国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    目录1. 页面布局2. 图片上传和展示3. 初始化画布4. 切换模板5. 输出图片 这里用到的技术: HTML+ CSS+ JavaScript; download.js库
    2021-09-30
  • vue与react详细

    vue与react详细

    目录一、全景图二、背景1、react:专业 2、vue:传奇 三、技术思想1、key的异同为例1.1 react 1.2 vue2、diff的宏观比较2.1 react2.2 vue
    2021-09-30
  • JavaScript实现密码框输入验证

    JavaScript实现密码框输入验证

    有时需要在前端页面,用户输入时先进行简单的验证,减少服务器压力 例如,限定了字段的输入长度: 输入框后有输入范围提示信息 输入错误长
    2021-09-30
  • Java杂谈之重复代码是什么

    Java杂谈之重复代码是什么

    目录方法为何要有参数?长参数列表的问题解决方案聚沙成塔动静分离告别标记总结有经验的程序员应该都见过,一个方法坐拥几十上百个参数。 方
    2021-09-30

最新评论