Js数组扁平化

什么是数组扁平化?

['a','b','c'] //这是一个拥有3个元素的数组,是一个一维数组(不存在数组嵌套)。[['a','b'],['c','d'],['e','f']] 从整体上看是一个数组,但是其中的元素又是数组,即数组中嵌套数组,这就是二维数组。

数组扁平化的方法

1.es6提供的新方法flat(depth)

let a = [1,[2,3]];

a.flat();

// [1,2,3]

a.flat(1);

//[1,2,3]

flat(depth) 方法中的参数depth,代表展开嵌套数组的深度,默认是1

所以我们可以添加参数1,或者直接调用flat()来对2维数组进行扁平化,如果我们可以提前知道数组的维度,对这个数组进行扁平化处理,参数depth的值就是数组的维度减一。

let a = [1,[2,3,[4,[5]]]];

a.flat(4-1);

// [1,2,3,4,5]  a是4维数组

其实还有一种更简单的办法,无需知道数组的维度,直接将目标数组变成1维数组。depth的值设置为Infinity。

let a = [1,[2,3,[4,[5]]]];

a.flat(Infinity);

// [1,2,3,4,5]  a是4维数组


2. while循环

var arr1 = [1, 2, [3], [1, 2, 3, [4, [2, 3, 4]]]];

function flatten(arr) {

  while(arr.some(item =>

        Array.isArray(item))) {

        arr = [].concat(...arr);

//arr = Array.prototype.concat.apply([],arr);

}

return

arr;

}

    flatten(arr1);

//[1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

同理,利用while判断加上some的遍历来实现扁平化。

3. for循环

var arr1 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];

function flatten(arr) {

    var res = [];

    for(let i = 0, length = arr.length; i < length; i++) {

        if(Array.isArray(arr[i])) {

        res = res.concat(flatten(arr[i]));

//concat 并不会改变原数组

//res.push(...flatten(arr[i])); //扩展运算符

} else {

        res.push(arr[i]);

}

}

return

res;

}

  flatten(arr1);

//[1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

利用for循环遍历数组的每一项并加以判断,如果不是数组,就执行push操作, 是数组的化,就再次执行该函数(递归),直至遍历完整个数组。

ps: ...和concat()可以进行替换,所以完全可以算是2种方法。

4. reduce方法

var arr1 = [1, 2, [3], [1, 2, 3, [4, [2, 3, 4]]]];

function flatten(arr) {

    return  arr.reduce((res, next) =>{

              return res.concat(Array.isArray(next)? flatten(next) :

next

);

},[]);

}

这里使用的是数组的reduce方法,需要注意的是reduce方法,我们传递了两个参数, 第一个参数就是就是处理扁平化的箭头函数 第二个参数是一个空数组,也是作为遍历的开始。


5. 如果数组的项全为数字,可以使用join(),toString()进行扁平化操作。

function flatten(input) {

    return input.toString().split(',').map(item=> +item);

// return input.join().split(',').map(item => +item);

// return input.join(',').split(',').map(item => +item);

}

flatten(arr1);

//[1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

原理很简单,先把数组转换成字符串,这个过程会把[]去掉,然后再调用split()方法转换成数组,最后不能忘了,把每一项转换为数组,即调用map()方法。

你可能感兴趣的:(Js数组扁平化)