手写 flat
create by db on 2020-9-2 13:30:46
Recently revised in 2023-2-24 12:26:15闲时要有吃紧的心思，忙时要有悠闲的趣味
前言
如题。
正文
flat
详情请参考：Array.prototype.flat() | MDN
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
也就是说，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。
该方法返回一个新数组，会移除数组中的空项，对原数据没有影响。
语法：
var newArray = arr.flat([depth])
参数：
：depth可选；指定要提取嵌套数组的结构深度，默认值为 1。
返回值:
一个包含将数组与子数组中所有元素的新数组。
使用：
var arr1 = [1, 2, [3, 4]]
arr1.flat()
// [1, 2, 3, 4]
var arr2 = [1, 2, [, 4, [5, 6]]]
arr2.flat()
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]]
arr3.flat(2)
// [1, 2, 3, 4, 5, 6]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
arr4.flat(Infinity)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
//存在多个数组及空值的数组
var arr6 = [
1,
,
[3, , [5, , [7, , [9, 10], 11], 12], 13],
14,
15,
[16, 17, [18, 19, [20, 21, [22, 23], 24], 25], 26],
27,
28,
];
arr6.flat(Infinity)
[1, 3, 5, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
实现 myFlat
代码实现：
递归实现
Array.prototype.myFlat1 = function (dep = 1) {
// 声明一个新数组
let result = [];
// 遍历原数组
this.forEach((item, index) => {
// 当原数组内存在数组
if (Array.isArray(item) && dep) {
// 并且层级dep大于1时递归
if (dep > 1) {
// 使用concat链接数组
result = result.concat(item.myFlat1(dep - 1));
} else {
result = result.concat(item.filter(item => item));
}
} else {
result.push(item);
}
});
return result;
};
简洁版：
// 重写数组flat方法
// 1.会去掉数组的空项
// 2.返回新数组
Array.prototype.myFlat2 = function (dep = 1) {
return this.reduce((acc, val) => {
return acc.concat(
Array.isArray(val) && dep > 0
? // 这里的三目就是防止这个现象：[3].concat([4]) // 结果为[3, 4]
val.myFlat2(dep - 1)
: Array.isArray(val)
? [val]
: val
);
}, []);
};
循环实现
Array.prototype.myFlat3 = function (dep = 1) {
// 声明一个新数组
let result = this;
// // 当原数组内存在数组并且层级dep大于时循环
while (result.some(Array.isArray) && dep > 0) {
// 连接数组，并去除空值
result = [].concat(...result.filter(item => item));
dep--;
}
return result.filter(item => item);
};
验证
for (let dep = 0; dep < 5; dep++) {
console.log("=============================");
console.log("系统flat=========", arr6.flat(dep));
console.log("我的arr6==myFlat1", arr6.myFlat1(dep));
console.log("我的arr6==myFlat2", arr6.myFlat2(dep));
console.log("我的arr6==myFlat3", arr6.myFlat3(dep));
}
// =============================
// flat.html:114 原生flat=== (7) [1, Array(4), 14, 15, Array(4), 27, 28]
// flat.html:115 myFlat1==== (7) [1, Array(4), 14, 15, Array(4), 27, 28]
// flat.html:116 myFlat2==== (7) [1, Array(4), 14, 15, Array(4), 27, 28]
// flat.html:117 myFlat3==== (7) [1, Array(4), 14, 15, Array(4), 27, 28]
// flat.html:113 =============================
// flat.html:114 原生flat=== (12) [1, 3, Array(4), 13, 14, 15, 16, 17, Array(4), 26, 27, 28]
// flat.html:115 myFlat1==== (12) [1, 3, Array(4), 13, 14, 15, 16, 17, Array(4), 26, 27, 28]
// flat.html:116 myFlat2==== (12) [1, 3, Array(4), 13, 14, 15, 16, 17, Array(4), 26, 27, 28]
// flat.html:117 myFlat3==== (12) [1, 3, Array(4), 13, 14, 15, 16, 17, Array(4), 26, 27, 28]
// flat.html:113 =============================
// flat.html:114 原生flat=== (17) [1, 3, 5, Array(4), 12, 13, 14, 15, 16, 17, 18, 19, Array(4), 25, 26, 27, 28]
// flat.html:115 myFlat1==== (17) [1, 3, 5, Array(4), 12, 13, 14, 15, 16, 17, 18, 19, Array(4), 25, 26, 27, 28]
// flat.html:116 myFlat2==== (17) [1, 3, 5, Array(4), 12, 13, 14, 15, 16, 17, 18, 19, Array(4), 25, 26, 27, 28]
// flat.html:117 myFlat3==== (17) [1, 3, 5, Array(4), 12, 13, 14, 15, 16, 17, 18, 19, Array(4), 25, 26, 27, 28]
// flat.html:113 =============================
// flat.html:114 原生flat=== (22) [1, 3, 5, 7, Array(2), 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, Array(2), 24, 25, 26, 27, 28]
// flat.html:115 myFlat1==== (22) [1, 3, 5, 7, Array(2), 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, Array(2), 24, 25, 26, 27, 28]
// flat.html:116 myFlat2==== (22) [1, 3, 5, 7, Array(2), 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, Array(2), 24, 25, 26, 27, 28]
// flat.html:117 myFlat3==== (22) [1, 3, 5, 7, Array(2), 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, Array(2), 24, 25, 26, 27, 28]
// flat.html:113 =============================
// flat.html:114 原生flat=== (24) [1, 3, 5, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
// flat.html:115 myFlat1==== (24) [1, 3, 5, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
// flat.html:116 myFlat2==== (24) [1, 3, 5, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
// flat.html:117 myFlat3==== (24) [1, 3, 5, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
总结
路漫漫其修远兮，与诸君共勉。
参考文档、
后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址
文档协议
db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。
