数组扁平化

• flat()
• 应用 reduce 与 concat
• 应用扩大运算符
• 应用 forEach
• 应用堆栈 stack
• 应用 Generator 函数

① flat()

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

语法：var newArray = arr.flat([depth]) depth 默认为 1

举个例子????

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

如果不晓得数组是多少维度，能够传 Infinity 来开展任意深度的嵌套数组

var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

② 应用 reduce 与 concat

reduce

reduce() 办法对数组中的每个元素执行一个由您提供的 reducer 函数 (升序执行)，将其后果汇总为单个返回值。

reduce 材料

根本用法:
const total = [1, 2, 3].reduce((acc, cur) => acc + cur, 1); // 6

concat

concat() 办法用于合并两个或多个数组。此办法不会更改现有数组，而是返回一个新数组。concat() 也实用于字符串。

concat 材料

根本用法：
var arr = [1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

举个例子????

// 二维
const arr = [1, 2, [3, 4]];
arr.reduce((acc, cur) => acc.concat(cur), [])
// [1, 2, 3, 4]

// 三维及以上能够应用递归
function flatArr(arr, dep = 1) {if (dep > 0) {
    return arr.reduce((acc, cur) =>
        acc.concat(Array.isArray(cur) ? flatArr(cur, dep - 1) : cur),
      []);
  } else {return arr;}
}
flatArr([1, 2, [3, 4, [5, 6]]], 3)；// [1, 2, 3, 4, 5, 6]

// 不晓得数组维度，能够传 Infinity
flatArr([1, 2, [3, 4, [5, 6]]], Infinity)；// [1, 2, 3, 4, 5, 6]

③ 应用扩大运算符 ...

扩大运算符是什么不必多说了了吧！

目前只想到能解决二维数组

举个例子????

// 二维
const arr = [1, 2, [3, 4]];
var newArr = [].concat(...arr);
// [1, 2, 3, 4]

// 三维待补充 

④ 应用 forEach

forEach() 办法对数组的每个元素执行一次给定的函数。

forEach 材料

根本用法：
arr.forEach(((item, index) => item))

举个例子????

// 二维及以上维度
const newArr = []; // 全局变量或者闭包也能够

function flatArr(arr, dep = 1) {
  arr.forEach(ele => {if(Array.isArray(ele) && dep > 0) {flatArr(ele, dep - 1);
    } else {newArr.push(ele);
    }
  });
  return newArr;
}

flatArr([1, 2, [3, 4, [5, 6]]], 3)；// [1, 2, 3, 4, 5, 6]

⑤ 应用堆栈 stack

以下为 MDN 示例????

// 无递归数组扁平化，应用堆栈
// 留神：深度的管制比拟低效，因为须要查看每一个值的深度
// 也可能在 shift / unshift 上进行 w/o 反转，然而末端的数组 OPs 更快
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {const stack = [...input];
  const res = [];
  while (stack.length) {
    // 应用 pop 从 stack 中取出并移除值
    const next = stack.pop();
    if (Array.isArray(next)) {
      // 应用 push 送回内层数组中的元素，不会改变原始输出
      stack.push(...next);
    } else {res.push(next);
    }
  }
  // 反转恢复原数组的程序
  return res.reverse();}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

// 递归版本的反嵌套
function flatten(array) {var flattend = [];
  (function flat(array) {array.forEach(function(el) {if (Array.isArray(el)) flat(el);
      else flattend.push(el);
    });
  })(array);
  return flattend;
}

⑥ 应用 Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数齐全不同。

Generator 材料

以下为 MDN 示例????

function* flatArr(array) {for (const item of array) {if (Array.isArray(item)) {yield* flatArr(item);
      } else {yield item;}
  }
}

const arr = [1, 2, [3, 4, [5, 6]]];
const flattened = [...flatArr(arr)];
// [1, 2, 3, 4, 5, 6]

写在前面

总结不易，麻烦您给???? 点个赞????