译者注:本篇短文翻译自加拿大程序程序媛 Samantha Ming 写的一个博客专栏“Code Tidbits”,这个专栏每周会不定期分享一些 JS、HTML、CSS 上的小知识点。篇幅简短且易于理解,每篇文章还会配一张精美的可以总结文章概要的图片。大家可以找来看一下,俗话说得好呀,“授人以鱼不如授人以渔”,“自己动手,丰衣足食”😀。
ES2019 引入了扁平化数组的新方法 flat()
,完整语法是:
array.flat([depth]);
这个方法接收的可选参数 depth
,表示扁平的深度。AMAZING 🤩
const nested = [ ['📦', '📦'], ['📦']];
const flattened = nested.flat();
console.log(flattened);
// ['📦', '📦', '📦']
设置深度值 depth
上面已经提到了这个方法的完整语法:
array.flat([depth]);
flat()
方法的可选参数 depth
,默认值为 1
,表示扁平至一层的深度。
array.flat()
// 等同于
array.flat(1)
更深层次的数组扁平
这个方法最好的地方就在于可以扁平超过 1 层深度的嵌套数组,只需要简单设置 depth
参数值即可。
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)。
const missingNumbers = [1, ,3, ,5];
missingNumbers.flat();
// [1, 3, 5];
浏览器支持
因为 flat()
是 ES2019 里定义的新特性,因此还是请大家忘记 Internet Explorer 和 Edge 吧,没毛病 😅
替代方案
因为这个方法的支持度不太好,这里也提供了一些替代方案。
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)));
这个仓库里还有许多其他功能的代码段,大家可以偶尔看看做学习使用。
资源列表
- MDN Web Docs: flat()
- Alligator: Flatten Arrays in Vanilla JavaScript with flat and flatMap
- Flatten array of arrays with JavaScript
- Stack Overflow: Merge/flatten an array of arrays
- Flattening multidimensional Arrays in JavaScript
- Flattening Arrays in JavaScript with flat and flatMap
(完)