数组扁平化的几种方法

「爱情、让人受尽委屈。」 2022-08-29 10:09 154阅读 0赞

# 数组扁平化的几种方法 #

什么叫数组扁平化？

> 就是将多维数组变为一维数组

*  reduce
 *  toString & split
 *  join & split
 *  递归
 *  扩展运算符

### reduce ###

要是不清楚reduce的用法，那就看文章最后吧，有简单的对reduce的使用做了介绍。要是还不清楚，那就百度吧哈哈哈哈

var arr = [1,2,3,[3,4,5,[3,4,5,6,[3]]]];
    var newArr = function(arr){ 
    	return arr.reduce((prev,curr)=>{ 
    		return prev.concat(Array.isArray(curr)?newArr(curr):curr)
    	},[])
    }

### toString & split ###

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

var arr = [1,2,3,4,[1,2,3]];
    function flatten(arr){ 
        return arr.toString().split(',').map(item=>Number(item));
    }
    console.log(flatten(arr));

### join & split ###

join也可以将数组转为字符串

var arr = [1,2,3,4,[1,2,3]];
    function flatten(arr){ 
        return arr.join(',').split(',').map(item=>Number(item));
    }

### 递归 ###

### 扩展运算符 ###

var arr = [1,2,3,4,[1,2,3,[2,3,4]]];
    function flatten(arr){ 
        while(arr.some(item=>Array.isArray(item))){ 
            arr = [].concat(...arr)
        }
        return arr;
    }

### reduce的简要介绍 ###

1.  语法

> `arr.reduce(callback,[initialValue])`

reduce为数组中的每一个元素一次执行回调函数，接收四个参数：**初始值（previousValue—上一次调用回调返回的值，或者是提供的初始值），当前元素值，当前索引，调用reduce的数组**

> callback （执行数组中每个值的函数，包含四个参数）
> 
> 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））  
> 2、currentValue （数组中当前被处理的元素）  
> 3、index （当前元素在数组中的索引）  
> 4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

1.  实例解析initialValue参数

var arr = [1,2,3,4];
    var sum = arr.reduce(function(prev,cur,index,arr){ 
        console.log(prev,cur,index);
        return prev+cur;
    })
    console.log(arr,sum);

打印结果

1 2 1

3 3 2

6 4 3

\[ 1, 2, 3, 4 \] 10

可以看出设置了初始值后，index也是从0开始，prev也是我们设置的初始值为0

但是数组为空是哟刚刚reduce就会报错

var arr = [];
    var sum = arr.reduce(function(prev,cur,index,arr){ 
        console.log(prev,cur,index);
        return prev+cur;
    })
    console.log(arr,sum);
    
    //TypeError: Reduce of empty array with no initial value

但是若是设置了初始值就不会报错，并且返回结果为0

1.  reduce的简单语法——用于数组求和求乘积

var arr = [1,2,3,4,5];
    var sum = arr.reduce((x,y)=> x+y);
    var mul = arr.reduce((x,y)=>x*y);
    console.log(sum,mul);

1.  reduce的高级用法

*  计算数组中每个元素出现的次数

*  数组去重

*  将二维数组转为一维数组

let arr = [[0, 1], [2, 3], [4, 5]];
    let newArr = arr.reduce((prev,cur)=>{ 
        return prev.concat(cur);
    });
    
    console.log(newArr);

*  将多维数组转为一维数组

var arr = [[0, 1],[2, 3],[4, [5, 6, 7]]];
    var newArr = function (arr) { 
        return arr.reduce((prev, cur) =>
            prev.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
    };
    console.log(newArr(arr));

*  对象里的属性求和