[譯]在 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)));
複製代碼
這個倉庫裏還有許多其餘功能的代碼段，你們能夠偶爾看看作學習使用。