JavaScript Array实例方法flat的实现

 更新时间:2024年03月26日 11:20:34   作者:Aimilali  
flat() 方法用于将一个嵌套多层的数组进行扁平,返回新数组,它不会改变原始数组, flat 方法在处理多维数组时非常有用,它可以让数组操作变得更加灵活和简洁,本文给大家介绍了JavaScript Array实例方法flat的实现,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

Array.prototype.flat()

flat() 方法用于将一个嵌套多层的数组进行扁平,返回新数组。它不会改变原始数组。 flat 方法在处理多维数组时非常有用,它可以让数组操作变得更加灵活和简洁。

语法

flat()
flat(depth)

参数

depth(可选):指定要扁平的深度,默认值为 1。

返回值

一个新的数组,其中包含扁平完的数组元素。

用法

const arr = [0, 1, 2, [3, 4]]
arr.flat()
// [0, 1, 2, 3, 4]

描述

flat() 方法会忽略稀疏数组中的空槽

flat() 方法是个浅拷贝方法,它不会改变原数组。

它只需要 this 值具有 length 属性和整数键属性即可。但是,如果要展开元素,则它们必须是数组

实现 flat 方法

从上面 flat 描述总结实现 flat 时注意实现这三点。

  • 需要一个参数,默认值为 1。
  • flat 会忽略稀疏数组中的空槽。
  • 展开的元素必须是数组。
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
}

测试用例

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实例方法flat的实现的文章就介绍到这了,更多相关JavaScript Array flat实现内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • JS实现根据用户输入分钟进行倒计时功能

    JS实现根据用户输入分钟进行倒计时功能

    倒计时功能大家无论在各大网站都可以看到,今天小编给大家分享一段基于js实现的根据用户输入分钟进行倒计时功能,非常不错,需要的朋友参考下吧
    2016-11-11
  • JS 实现请求调度器

    JS 实现请求调度器

    这篇文章主要介绍了JS 实现请求调度器的方法,帮助大家更好的理解和学习使用js,感兴趣的朋友可以了解下
    2021-03-03
  • JavaScript数据结构学习之数组、栈与队列

    JavaScript数据结构学习之数组、栈与队列

    这篇文章主要给大家介绍了JavaScript数据结构之数组、栈与队列的相关资料,文中对数组、栈与队列的使用方法进行了详细的总结,相信对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • Nuxt.js 数据双向绑定的实现

    Nuxt.js 数据双向绑定的实现

    这篇文章主要介绍了Nuxt.js 数据双向绑定的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 浅析JavaScript 函数防抖和节流

    浅析JavaScript 函数防抖和节流

    这篇文章主要介绍了JavaScript 函数防抖和节流的相关资料,文中讲解非常细致,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • JavaScript Event学习第七章 事件属性

    JavaScript Event学习第七章 事件属性

    为了理解Event属性,我将在这里给出一些示例代码。在这个范畴内有非常严重的浏览器兼容性问题。
    2010-02-02
  • JavaScript中的object转换成number或string规则介绍

    JavaScript中的object转换成number或string规则介绍

    这篇文章主要介绍了JavaScript中的object转换成number或string规则介绍,本文讲解了object自动转换成string的规则、object自动转换成number的规则等内容,需要的朋友可以参考下
    2014-12-12
  • 微信小程序实现日历效果

    微信小程序实现日历效果

    这篇文章主要为大家详细介绍了微信小程序实现日历效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • js实现页面多个日期时间倒计时效果

    js实现页面多个日期时间倒计时效果

    这篇文章主要为大家详细介绍了js实现页面多个日期时间倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 详解JavaScript中哪一种循环最快呢

    详解JavaScript中哪一种循环最快呢

    这篇文章主要介绍了详解JavaScript中哪一种循环最快呢,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论

?


http://www.vxiaotou.com