Array 实例方法 flat 的实现

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 实例方法,解析它们的实现原理。

如果有错误或者不严谨的地方,请大家务必给予指正,十分感谢。欢迎大家在评论区中讨论。

相关推荐
有梦想的刺儿12 分钟前
webWorker基本用法
前端·javascript·vue.js
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
测试19983 小时前
2024软件测试面试热点问题
自动化测试·软件测试·python·测试工具·面试·职场和发展·压力测试