数组ArrayFlatten

十一月 18, 2018

首先让我们思考一个这样的题目；假如有一个数组 var arr = [1, [2, 3, [4]]] ，我们怎么能把 arr 变成[1, 2, 3, 4]呢？即让多维数组降维，转换为只有一层的数组；如果用过 lodash 的话，我们知道 flatten 和 flattenDeep 方法都可以实现.

flatten 用法：
概念：可以理解为将嵌套数组的维数减少，flattened（平坦）. 如果 isDeep 值为 true 时，嵌套数组将递归为一维数组, 否则只减少嵌套数组一个级别的维数.
代码如下：
参数： array (Array): 需要 flattened（减少维数）的嵌套数组
isDeep: 是否深递归
返回值： (Array): 返回处理后的数组

// using `isDeep`
_.flatten([1, [2, 3, [4]]], true);
// => [1, 2, 3, 4]

flattenDeep 用法：
概念：递归地平坦一个嵌套的数组.相当于_.flatten(array, true)
参数：array (Array): 需要
返回值：(Array): 返回处理后的数组.

flattenDeep: 递归地平坦一个嵌套的数组.相当于_.flatten(array, true).

_.flattenDeep([1, [2, 3, [4]]]);
// => [1, 2, 3, 4]

那么如果我们自己写该如何实现呢？下面列举几种实现方式：

循环数组+递归
实现思路：循环数组，如果数据中还有数组的话，递归调用 flatten 扁平函数（利用 for 循环扁平），用 concat 连接，最终返回 result;

function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

flatten(arr); // [1,2,3,4]

利用 apply

可以使用 apply 的原因如下：

var arr = [1, [2, 3, [4]]];
[].concat.apply([],arr);
// [1,2,3,[4]]
实现思路：利用arr.some判断当数组中还有数组的话，递归调用flatten扁平函数(利用apply扁平), 用concat连接，最终返回arr;

 function flatten(arr){
    while(arr.some(item => Array.isArray(item))){
          arr =  [].concat.apply([],arr);
    }
    return arr;
}

flatten(arr)   // [1,2,3,4]

reduce 方法

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
能使用 reduce 原因如下：

var flattened = arr.reduce(function(prev, cur) {
  return prev.concat(cur);
}, []);

console.log(flattened);
//  [1,2,3,[4]]

实现思路：使用 reduce, 当数组中还有数组的话，递归调用 flatten 扁平函数(利用 reduce 扁平), 用 concat 连接，最终返回 arr.reduce 的返回值;

function flatten(arr) {
  return arr.reduce(function(prev, cur) {
    return prev.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, []);
}

flatten(arr); // [1,2,3,4]

es6 展开运算符

可以使用 es6 展开运算符的原因如下：

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

console.log(...arr);
// 1,[2,3,[4]]

实现思路：利用 arr.some 判断当数组中还有数组的话，递归调用 flatten 扁平函数(利用 es6 展开运算符扁平), 用 concat 连接，最终返回 arr;

function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}

flatten(arr); // [1,2,3,4]

toString 方法（数组元素为数字）
如果数组的元素是数字，那么我们可以考虑 toString()方法，其他情况不适用。原因如下：

[1, [2, 3, [4]]].toString();
// "1,2,3,4"

实现思路：数组适用 toString()方法后变成以逗号分割的字符串，然后 map 遍历数组把每一项再变回整数并返回 map 后的结果。

function flatten(arr) {
  return arr
    .toString()
    .split(",")
    .map(function(item) {
      return parseInt(item);
    });
}

flatten(arr); // [1,2,3,4]

← DDA算法 cmd终端设置代理 →