数组扁平化是指将一个多维数组变为一维数组

  1. [1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

实现

1. reduce

遍历数组每一项，若值为数组则递归遍历，否则concat

  1. function flatten(arr) {  
  2.     return arr.reduce((result, item)=> {
  3.         return result.concat(Array.isArray(item) ? flatten(item) : item);
  4.     }, []);
  5. }

reduce是数组的一种方法，它接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

reduce包含两个参数：回调函数，传给total的初始值

  1. // 求数组的各项值相加的和： 
  2. arr.reduce((total, item)=> {  // total为之前的计算结果，item为数组的各项值
  3.     return total + item;
  4. }, 0);

2. toString & split

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

  1. function flatten(arr) {
  2.     return arr.toString().split(',').map(function(item) {
  3.         return Number(item);
  4.     })
  5. }

因为split分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型

3. join & split

和上面的toString一样，join也可以将数组转换为字符串

  1. function flatten(arr) {
  2.     return arr.join(',').split(',').map(function(item) {
  3.         return parseInt(item);
  4.     })
  5. }

4. 递归

递归的遍历每一项，若为数组则继续遍历，否则concat

  1. function flatten(arr) {
  2.     var res = [];
  3.     arr.map(item => {
  4.         if(Array.isArray(item)) {
  5.             res = res.concat(flatten(item));
  6.         } else {
  7.             res.push(item);
  8.         }
  9.     });
  10.     return res;
  11. }

5. 扩展运算符

es6的扩展运算符能将二维数组变为一维

  1. [].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

根据这个结果我们可以做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止。

  1. function flatten(arr) {
  2.     while(arr.some(item=>Array.isArray(item))) {
  3.         arr = [].concat(...arr);
  4.     }
  5.     return arr;
  6. }

6. ES6新增方法flat()

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

  1. var arr1 = [1, 2, [3, 4]];
  2. arr1.flat();
  3. // [1, 2, 3, 4]
  5. var arr2 = [1, 2, [3, 4, [5, 6]]];
  6. arr2.flat();
  7. // [1, 2, 3, 4, [5, 6]]
  9. var arr3 = [1, 2, [3, 4, [5, 6]]];
  10. arr3.flat(2);
  11. // [1, 2, 3, 4, 5, 6]
  13. //使用 Infinity，可展开任意深度的嵌套数组
  14. var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
  15. arr4.flat(Infinity);
  16. // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]