数组扁平化的几种方法

数组扁平化的几种方法

什么叫数组扁平化？

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

• 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){
     var res = [];
     arr.map(item=>{
         if(Array.isArray(item)){
             res = res.concat(flatten(item))
         }else{
             res.push(item);
         }
     });
     return res;
 };

扩展运算符

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 的第一个参数。）

2. 实例解析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

3. 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);

4. reduce的高级用法

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

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((prev,cur)=>{
    console.log(prev,cur);
    if(cur in prev){
        prev[cur]++;
    }else{
        prev[cur] = 1;
    }
    return prev;
},{});

console.log(nameNum);
//{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

• 数组去重

var arr = [1,2,3,3,4,4,5];
var newArr = arr.reduce((prev,cur)=>{
    if(!prev.includes(cur)){
        return prev.concat(cur);
    }else{
        return prev;
    }
},[])
console.log(newArr);

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

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));

• 对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce((prev,cur)=>{
    return cur.score + prev;
},0);
console.log(sum);