数组扁平化

  • 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]// 不晓得数组维度，能够传 InfinityflatArr([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]

写在前面

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