[译]在 JavaScript 中使用 Array.flat() 扁平化数组

时间 2019-11-29

标签 javascript 使用 array.flat array flat 扁平数组栏目 JavaScript 繁體版

原文原文链接

原文连接：Flatten Array using Array.flat() in JavaScriptjavascript

译者注：本篇短文翻译自加拿大程序程序媛 Samantha Ming 写的一个博客专栏“Code Tidbits”，这个专栏每周会不按期分享一些 JS、HTML、CSS 上的小知识点。篇幅简短且易于理解，每篇文章还会配一张精美的能够总结文章概要的图片。你们能够找来看一下，俗话说得好呀，“授人以鱼不如授人以渔”，“本身动手，丰衣足食”😀。html

ES2019 引入了扁平化数组的新方法 flat()，完整语法是：java

array.flat([depth]);
复制代码

这个方法接收的可选参数 depth，表示扁平的深度。AMAZING 🤩数组

const nested = [ ['📦', '📦'], ['📦']];

const flattened = nested.flat();

console.log(flattened);
// ['📦', '📦', '📦']
复制代码

设置深度值 depth

上面已经提到了这个方法的完整语法：浏览器

array.flat([depth]);
复制代码

flat() 方法的可选参数 depth，默认值为 1，表示扁平至一层的深度。bash

array.flat()
// 等同于
array.flat(1)
复制代码

更深层次的数组扁平

这个方法最好的地方就在于能够扁平超过 1 层深度的嵌套数组，只须要简单设置 depth 参数值便可。app

const twoLevelsDeep = [[1, [2, 2], 1]];

// depth = 1
twoLevelsDeep.flat()
// [1, [2, 2], 1]

// depth = 2
twoLevelsDeep.flat(2)
// [1, 2, 2, 1]
复制代码

扁平化嵌套了不少层的数组

若是你不知道要扁平的数组的具体深度，只想彻底扁平这个嵌套数组里的成员话，可使用 Infinity 这个值。学习

const veryDeep = [[1, [2, 2, [3,[4,[5,[6]]]]], 1]];

veryDeep.flat(Infinity);
// [1, 2, 2, 3, 4, 5, 6, 1]
复制代码

忽略数组空位

flat() 方法有一个比较 cool 的地方在于，扁平数组的同时，还能移除数组中的空位（Empty Slots）。ui

const missingNumbers = [1, ,3, ,5];

missingNumbers.flat();
// [1, 3, 5];
复制代码

浏览器支持

由于 flat 是 ES2019 里定义的新特性，所以仍是请你们忘记 Internet Explorer 和 Edge 吧，没毛病 😅spa

Browser Support: flat

替代方案

由于这个方法的支持度不太好，这里也提供了一些替代方案。

ES6 式的

下面方案是基于 ES56 的解构语法。但只能扁平一层嵌套数组。

const oneLevelDeep = [ [1, 2], [3]];

const flattened = [].concat(...oneLevelDeep);
// [1, 2, 3,]
复制代码

ES6 以前

一样，下面的方法也只能扁平一层嵌套数组。

const oneLevelDeep = [ [1, 2], [3]];

const flattened = [].concat.apply([], oneLevelDeep);
// [1, 2, 3,]
复制代码

递归扁平

对于深层嵌套数组的扁平化，可使用递归调用的方式。下面的代码摘自 MDN 文档。

var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];

function flattenDeep(arr1) {
   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
复制代码

译者注：啰嗦一下，有一个“30秒系列”的 JS 代码段仓库，对上述一样功能的方法实现以下：
const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
复制代码
这个仓库里还有许多其余功能的代码段，你们能够偶尔看看作学习使用。

资源列表

（完）