数组扁平化的五种方法

数组扁平化概念

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

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

实现

1. reduce

参数

  • callback

    执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数:

    accumulator累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。currentValue数组中正在处理的元素。index 可选数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始。array可选调用reduce()的数组

  • initialValue可选

    作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

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

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

reduce是数组的一种方法,它接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

2. toString & split

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

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

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

3. join & split

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

function flatten(arr) {
    return arr.join(',').split(',').map(item => Number(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种方法,但是核心也只有一个:

遍历数组arr,若arr[i]为数组则递归遍历,直至arr[i]不为数组然后与之前的结果concat。

原文地址:https://www.cnblogs.com/w-yh/p/12053575.html

时间: 2024-12-12 09:48:02

数组扁平化的五种方法的相关文章

js数组拍平(数组扁平化)的五种方式

1.数组拍平也称数组扁平化,就是将数组里面的数组打开,最后合并为一个数组 2.实现 var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]]; a:递归实现 function fn(arr){ let arr1 = [] arr.forEach((val)=>{ if(val instanceof Array){ arr1 = arr1.concat(fn(val)) }else{ arr1.push(val) } }) return arr1 } b:reduc

数组扁平化的几种处理放法

清明节,这几天放假闲来无事,好好研究一下基础知识,今天看看数组扁平化该怎么处理: 先来看数组扁平化是什么: var arr = [1,2,3,4,[5,6,[7,8]],true] => [1,2,3,4,5,6,7,8,true] 就是把二维或者多维数组,转成一维数组. 1.我想大部分同学会和一样,首先想到的肯定是遍历数组,如果某一项是基本数据类型,直接push到新数组,如果某一项是数组,则直接将这一项concat到新的数组上,当然如果是多维数组,还得用上递归的方法,继续往下层寻找,上代码:

网站设计形式提升的五种方法

本文由e良师益友网提供 提到网页设计,最先想到的是当今主流的韩国设计和扁平化设计,当然个性化排版.视频代替文本.全屏大视野.滚动视差.多平台全适应等设计形式已经进入了我们的视野.西方简单.功能性的美学精神”少即是多”这一设计理念攻占了我们的大脑,很多时候,在开始做设计之前脑子里会来回浮现这些风格的设计.怎样在主流设计方式中做出有自己特色的网站呢?我们从以下几点介绍在大环境下提升网站设计形式的方法. 1.赋予民族文化特点在众多的设计师追逐主流风格的同时,民族文化感觉的设计越来越少,不光在国内,在世

深拷贝和数组扁平化

这两天做笔试题的时候遇到了深拷贝,在js中,一些基本类型是存在栈空间里的,而引用类型如object function之类的都是存在堆内存之中,只不过是他们的地址是在栈内存,通过地址找到对内存空间中的数据 上代码 function deepClone(obj){ var cloneobj = Array.isArray(obj)?[]:{}; //判断是数组还是对象 if(obj && typeof obj === "object"){ //判断当前的对象是否存在且类型是

HTML 页面跳转的五种方法

H方法TML 页面跳转的五种方法 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <head><!-- 以下方式只是刷新不跳转到其他页面 --><meta http-equiv="refresh" content="10"><!-- 以下方式定时转到其他页面 --><meta http-equiv="

Knockout获取数组元素索引的2种方法,在MVC中实现

在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespace UseIndex.Models { public class Student { public int Id { get; set; } public string Name { get; set; } } } 在HomeController中,先模拟一个Student的集合,在投影出Name属性的集合,最后以Json返回给前台视图. using Syste

linux关机重启五种方法(sysrq shutdown halt init ipmi)

linux关机重启五种方法(sysrq shutdown halt init) 当前版本 cat /etc/debian_version 5.0.1 一.linux关机命令(前三种) 1.shutdown -h now(-h:halt after shutdown.) halt init 0 2.linux重启命令 shutdown -r(-r:reboot after shutdown.) reboot init 6 二.特殊情况重启和关机(能ping通 上述命令无法使用情况下 也就是系统挂起

js去掉字符串前后空格的五种方法

第一种:循环检查替换[javascript]//供使用者调用  function trim(s){  return trimRight(trimLeft(s));  }  //去掉左边的空白  function trimLeft(s){  if(s == null) {  return "";  }  var whitespace = new String(" \t\n\r");  var str = new String(s);  if (whitespace.i

js之二维数组定义和初始化三种方法

方法一:直接定义并且初始化,这种遇到数量少的情况可以用 var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]] 方法二:未知长度的二维数组 var tArray = new Array();   //先声明一维 for(var k=0;k<i;k++){        //一维长度为i,i为变量,可以根据实际情况改变