js数组扁平化的几种方式

⁣⁡‬⁡⁤‬‬⁤⁣⁣⁤⁣⁢⁤‬‬⁤‬⁡⁣‬⁤‬‬数组扁平化的几种方式

js数组扁平化的几种方式_第1张图片

一、普通递归实现

普通递归的思路很容易理解,就是通过for循环的方式,逐层逐个元素地去展平,如果当前元素是一个数组,那么就对它进行递归处理,再将递归处理的结果拼接到结果数组上。

代码实现:

let arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
  let result = [];
  for(let i = 0; i < arr.length; i++) {
    // 当前元素是一个数组,对其进行递归展平
    if(Array.isArray(arr[i])) {
      // 递归展平结果拼接到结果数组
      result = result.concat(flatten(arr[i]));
    } 
    // 否则直接加入结果数组
    else {
      result.push(arr[i]);
    }
  }
  return result;
}
console.log(flatten(a));  //  [1, 2, 3, 4,5]

二、reduce实现

reduceJS数组中非常强大的一个方法,同时也是JS中的一个函数式编程API

上面的递归实现的关键就是对数组的每一项进行处理,遇到数组就递归处理它,既然需要循环和结果数组,那么我们可以使用reduce来简化我们的代码:

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.reduce(function(pre, cur){
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4,5]

使用reduce后,代码更加的简洁,reduce 的第一个参数用来返回最后累加的结果,第二个参数是当前遍历到的元素值,处理数组元素和非数组元素的思路和第一种方法是一样,最后再把处理后的结果拼接到累加的结果数组中返回即可。

三、扩展运算符实现

扩展运算符是ES6的新特性之一,用它操作数组可以直接展开数组的第一层,利用这个特性,我们可以不使用递归来实现数组的展平,这是因为每一次递归都是对当前层次数组的一次展开,而扩展操作符就是干这工作的。

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    while (arr.some(i => Array.isArray(i))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]

代码中使用了数组的另一个方法some,目的是判断当前数组是否还有数组元素,如果有则对数组进行一层展开,同时将展开结果作为下一次判断的条件,这样就像剥洋葱一样,一层层地剥开洋葱皮,当循环条件不满足时说明数组里已经没有数组元素了,这是数组已经完全扁平。

四、Array.prototype.flat

Array.prototype.flatES6新增的一个数组方法,它的作用就是用来数组扁平化,并且根据传入的参数来决定展开的层级,是数组扁平化的终极解决方案。

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
  return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]

参数Infinity表示完全展开,使用起来非常方便、快捷。

你可能感兴趣的:(javascript,前端,开发语言,数组,数组扁平化)