数组扁平化

数组扁平化

数组扁平化是指将多维数组降维成一维数组

方式有很多，下面列举出几种常用的方法

方法

适用于二维数组的扁平化

const arr = [1,2,[2,1],[3,4,5],[1,1,2,3,4,5,6]];
const newArr = [].concat.apply([], arr);
console.log(newArr); //[1, 2, 2, 1, 3, 4, 5, 1, 1, 2, 3, 4, 5, 6]

该转换方法只适用于二维数组，concat用于连接数组，apply([], arr)的第一个参数是改变this指向的，第二个参数是用于传递参数的，要求是一个数组，apply会将数组中的元素转换为参数列表。传递后的参数将会拼接到空数组中

Array.prototype.flat(depth)

flat(depth)会按照一个可指定的深度depth递归遍历数组，默认值为1，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

由于不确定数组的深度，因为可以用关键字Infinity来展开任意深度的数组

const arr = [1,2,[2,1],[3,4,5],[1,1,2,3,4,5,6]];
const newArr = arr.flat(Infinity);
console.log(newArr); //[1, 2, 2, 1, 3, 4, 5, 1, 1, 2, 3, 4, 5, 6]

reduce() 归并

用reduce方法进行遍历，把pre的初始值赋为[]。如果当前的值还为数组，则继续递归遍历它的子元素；如果当前的值不是数组，就直接拼接

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

map() 递归

递归的遍历每一项，若为数组则继续遍历，不是数组就进行连接

const arr = [1,2,[2,1],[3,4,5],[1,1,2,3,4,5,6]];
function flat(arr) {
    let result = [];
    arr.map(item => {
        Array.isArray(item) ? result = result.concat(flat(item)) : result.push(item);
    });
    return result;
}
const newArr = flat(arr);
console.log(newArr); //[1, 2, 2, 1, 3, 4, 5, 1, 1, 2, 3, 4, 5, 6]

循环 + 遍历

利用for循环以及遍历整个数组，若子元素为一个数组，就继续遍历，不是数组就添加进新数组

const arr = [1,2,[2,1],[3,4,5],[1,1,2,3,4,5,6]];
function flat(arr) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        Array.isArray(arr[i]) ? result = result.concat(flat(arr[i])) : result.push(arr[i]);
    }
    return result;
}
const newArr = flat(arr);
console.log(newArr); //[1, 2, 2, 1, 3, 4, 5, 1, 1, 2, 3, 4, 5, 6]

…扩展运算符

…可用于获取参数对象的所有可遍历属性

const arr = [1,2,[2,1],[3,4,5],[1,1,2,3,4,5,6]];
function flat(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
const newArr = flat(arr);
console.log(newArr); //[1, 2, 2, 1, 3, 4, 5, 1, 1, 2, 3, 4, 5, 6]

toString() 和 split()

利用数组的toString方法，将数组变为字符串，再用split分割后将字符串还原为数组。不过这种方法只适用于纯数字的数组，因为后面还需要将字符串转换为数字

const arr = [1,2,[2,1],[3,4,5],[1,1,2,3,4,5,6]];
function flat(arr) {
    return arr.toString().split(',').map(item => {
        return Number(item);
    })
}
const newArr = flat(arr);
console.log(newArr); // [1, 2, 2, 1, 3, 4, 5, 1, 1, 2, 3, 4, 5, 6]

join() 和 split()

与上面的方法一样，join也可以将数组转换为字符串，然后用split转换为数组，但也需要进行一次类型的转换。

const arr = [1,2,[2,1],[3,4,5],[1,1,2,3,4,5,6]];
function flat(arr) {
    return arr.join(',').split(',').map(item => {
        return Number(item);
    })
}
const newArr = flat(arr);
console.log(newArr); // [1, 2, 2, 1, 3, 4, 5, 1, 1, 2, 3, 4, 5, 6]