數組的flat方法【Array.prototype.flat()】
一、 概念
flat() 方法會按照一個可指定的深度遞歸遍歷數組,並將所有元素與遍歷到的子數組中的元素合併爲一個新數組返回。
二、語法結構
var newArray = arr.flat([depth])
- 參數depth: 指定要提取嵌套數組的結構深度,默認值爲 1。
- 返回值: 一個包含將數組與子數組中所有元素的新數組。
三、示例
console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
// 指定轉換的嵌套層數
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
// 不管嵌套多少層【使用 Infinity 作爲深度,展開任意深度的嵌套數組】
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
// 自動跳過空位【會移除數組中的空項】
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
四、 替代方案【reduce 與 concat】
- reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行),將其結果彙總爲單個返回值。
- concat() 方法用於合併兩個或多個數組。此方法不會更改現有數組,而是返回一個新數組。
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// 反嵌套一層數組
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]
// 或使用 ...
const flatSingle = arr => [].concat(...arr);
// 使用 reduce、concat 和遞歸無限反嵌套多層嵌套的數組
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]
// 不使用遞歸,使用 stack 無限反嵌套多層嵌套數組
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 送回內層數組中的元素,不會改動原始輸入 original input
stack.push(...next);
} else {
res.push(next);
}
}
// 使用 reverse 恢復原數組的順序
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;
}