js数组扁平化处理

JS 函数式编程,数组扁平化处理

js 数组扁平化处理,就是将多维数组处理成一维数组的过程.下面列举几种实现方式.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = [
  1,
  2,
  3,
  4,
  ["a", "b", "c"],
  5,
  [
    [["d", ["e", "f"]], {}, null, undefined, [null, {}], 6, 7],
    {},
    null,
    "g",
    [[[[[8, {}]], null]]],
  ],
];

方法 1: concat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function flatten1(arr) {
  var _arr = arr || [],
    fArr = [],
    len = _arr.length,
    item;

  for (var i = 0; i < len; i++) {
    item = _arr[i];
    if (_isArr(item)) {
      fArr = fArr.concat(flatten1(item));
    } else {
      fArr.push(item);
    }
  }

  return fArr;

  function _isArr(obj) {
    return Object.prototype.toString.call(obj) === "[object Array]";
  }
}

方法 2: 在数组原型上面定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Array.prototype.flatten2 = function () {
  var _arr = this,
    toStr = {}.toString;

  if (toStr.call(_arr) !== "[object Array]") {
    throw new Error("只有数组类型的数据才可以使用flatten2方法");
  }

  var fArr = [];

  _arr.forEach(function (elem) {
    toStr.call(elem) === "[object Array]"
      ? (fArr = fArr.concat(elem.flatten2()))
      : fArr.push(elem);
  });

  return fArr;
};

方法 3: reduce (比较好的方法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Array.prototype.flatten3 = function () {
  var _arr = this,
    toStr = {}.toString;

  if (toStr.call(_arr) !== "[object Array]") {
    throw new Error("只有数组类型的数据才可以使用flatten3方法");
  }

  return _arr.reduce(function (prev, elem) {
    return prev.concat(
      toStr.call(elem) === "[object Array]" ? elem.flatten3() : elem
    );
  }, []);
};

方法 4:

1
2
3
4
5
6
7
8
const flatten4 = (arr) =>
  arr.reduce(
    (prev, elem) =>
      prev.concat(
        {}.toString.call(elem) === "[object Array]" ? flatten4(elem) : elem
      ),
    []
  );