Array.prototype.flat()
flat() 方法用于将一个嵌套多层的数组进行扁平,返回新数组。它不会改变原始数组。 flat 方法在处理多维数组时非常有用,它可以让数组操作变得更加灵活和简洁。
语法
js
flat()
flat(depth)
参数
depth(可选):指定要扁平的深度,默认值为 1。
返回值
一个新的数组,其中包含扁平完的数组元素。
用法
js
const arr = [0, 1, 2, [3, 4]]
arr.flat()
// [0, 1, 2, 3, 4]
描述
flat() 方法会忽略稀疏数组中的空槽
。
flat() 方法是个浅拷贝方法
,它不会改变原数组。
它只需要 this
值具有 length
属性和整数键属性即可。但是,如果要展开元素,则它们必须是数组
。
实现 flat 方法
从上面 flat 描述总结实现 flat 时注意实现这三点。
- 需要一个参数,默认值为 1。
- flat 会忽略稀疏数组中的空槽。
- 展开的元素必须是数组。
js
Array.prototype.myFlat = function (depth = 1) { // 需要一个参数,默认值为 1
const result = []
const flatten = (arr, currentDepth) => {
for (let i = 0; i < arr.length; i++) {
if (Object.hasOwn(arr, i)) { // 忽略稀疏数组的空槽
if (Array.isArray(arr[i]) && currentDepth < depth) { // 展开的元素必须是数组
flatten(arr[i], ++currentDepth)
} else {
result.push(arr[i])
}
}
}
}
flatten(this, 0)
return result
}
测试用例
js
Array.prototype.myFlat = function (depth = 1) {
const result = []
const flatten = (arr, currentDepth) => {
for (let i = 0; i < arr.length; i++) {
if (Object.hasOwn(arr, i)) {
if (Array.isArray(arr[i]) && currentDepth < depth) {
flatten(arr[i], ++currentDepth)
} else {
result.push(arr[i])
}
}
}
}
flatten(this, 0)
return result
}
console.log('扁平普通数组')
const arr1 = [1, 2, [3, 4]]
console.log(arr1.myFlat())
console.log(arr1.flat())
// [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]]
console.log(arr2.myFlat())
console.log(arr2.flat())
// [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]]
console.log(arr3.myFlat(2))
console.log(arr3.flat(2))
// [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
console.log(arr4.myFlat(Infinity))
console.log(arr4.flat(Infinity))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log('稀疏数组中使用 flat')
const arr5 = [1, 2, , 4, 5]
console.log(arr5.myFlat())
console.log(arr5.flat())
// [1, 2, 4, 5]
const arr6 = [1, , 3, ["a", , "c"]]
console.log(arr6.myFlat())
console.log(arr6.flat())
// [ 1, 3, "a", "c" ]
const arr7 = [1, , 3, ["a", , ["d", , "e"]]]
console.log(arr7.myFlat())
console.log(arr7.flat())
// [ 1, 3, "a", ["d", empty, "e"] ]
console.log(arr7.myFlat(2))
console.log(arr7.flat(2))
// [ 1, 3, "a", "d", "e"]
console.log('在非数组对象上使用 flat')
const arrayLike = {
length: 3,
0: [1, 2],
1: { length: 2, 0: 3, 1: 4 },
2: 5,
}
console.log(Array.prototype.myFlat.call(arrayLike))
console.log(Array.prototype.flat.call(arrayLike))
// [1, 2, { "0": 3, "1": 4, "length": 2 }, 5]
结语
到这里 Array 实例方法 flat 实现完成啦。
JavaScript 中的 Array 类型提供了一系列强大的实例方法。在 Array 实例方法实现系列
专栏中,我将深入探讨一些常见的 Array 实例方法,解析它们的实现原理。
如果有错误或者不严谨的地方,请大家务必给予指正,十分感谢。欢迎大家在评论区中讨论。