lgwebdream / FE-Interview

🔥🔥🔥 前端面试,独有前端面试题详解,前端面试刷题必备,1000+前端面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器
https://lgwebdream.github.io/FE-Interview/
Other
6.82k stars 896 forks source link

Day256:将二维数组转成一维数组的方法有哪些? #1075

Open Genzhen opened 3 years ago

Genzhen commented 3 years ago

每日一题会在下午四点在交流群集中讨论,五点小程序中更新答案 欢迎大家在下方发表自己的优质见解 二维码加载失败可点击 小程序二维码

扫描下方二维码,收藏关注,及时获取答案以及详细解析,同时可解锁800+道前端面试题。


参考答案

1.1 flat

ES10 的方法,默认将二维数组转成一维数组

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

flat() 可以将任意维数组转成一维数组,只需要传入被扁平化的层数,比如将三维数组转成一维数组就是 flat(2)。如果是未知层数,还可以使用参数 Infinity。

1.2 concat + 扩展符

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

1.3 reduce + concat

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

1.4 toString + split

先使用 toString 把数组转成字符串,再使用 split 把字符串转回数组:

[
  [1, 2],
  [3, 4],
]
  .toString()
  .split(",")
  .map((item) => +item); // [1,2,3,4]

该方法存在局限性,不适用于一些包含相对特殊子元素的数组,比如包含 null、undefined、对象类型等。

1.5 扩展:递归降维

const oldArr = [1, [2, [3, [10]]], [4, 5, 6], 7, 8];
const newArr = [];
const flatArr = (arr) =>
  arr.forEach((item) => {
    if (Array.isArray(item)) {
      flatArr(item);
    } else {
      newArr.push(item);
    }
  });
flatArr(oldArr);
console.log(newArr); //[1, 2, 3, 10, 4, 5, 6, 7, 8]
const oldArr = [1, [2, [3, [10]]], [4, 5, 6], 7, 8];
const flatArr = (arr) =>
  arr.reduce((prev, cur, index, arr) => {
    if (Array.isArray(cur)) {
      return prev.concat(...flatArr(cur));
    }
    return prev.concat(cur);
  }, []);
console.log(flatArr(oldArr)); //[1, 2, 3, 10, 4, 5, 6, 7, 8]
LoveEocding commented 3 years ago

ES6 提供的flat .或者自己写递归函数,归并拉平