快捷導(dǎo)航

JavaScript Array實例方法flat的實現(xiàn)

更新時間：2024年03月26日 11:20:34 作者：Aimilali

flat() 方法用于將一個嵌套多層的數(shù)組進行扁平,返回新數(shù)組,它不會改變原始數(shù)組, flat 方法在處理多維數(shù)組時非常有用,它可以讓數(shù)組操作變得更加靈活和簡潔,本文給大家介紹了JavaScript Array實例方法flat的實現(xiàn),需要的朋友可以參考下

Array.prototype.flat()

flat() 方法用于將一個嵌套多層的數(shù)組進行扁平，返回新數(shù)組。它不會改變原始數(shù)組。 flat 方法在處理多維數(shù)組時非常有用，它可以讓數(shù)組操作變得更加靈活和簡潔。

語法

flat()
flat(depth)

參數(shù)

depth（可選）：指定要扁平的深度，默認值為 1。

返回值

一個新的數(shù)組，其中包含扁平完的數(shù)組元素。

用法

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

描述

flat() 方法會忽略稀疏數(shù)組中的空槽。

flat() 方法是個淺拷貝方法，它不會改變原數(shù)組。

它只需要 this 值具有 length 屬性和整數(shù)鍵屬性即可。但是，如果要展開元素，則它們必須是數(shù)組。

實現(xiàn) flat 方法

從上面 flat 描述總結(jié)實現(xiàn) flat 時注意實現(xiàn)這三點。

需要一個參數(shù)，默認值為 1。
flat 會忽略稀疏數(shù)組中的空槽。
展開的元素必須是數(shù)組。

Array.prototype.myFlat = function (depth = 1) { // 需要一個參數(shù)，默認值為 1
    const result = []

    const flatten = (arr, currentDepth) => {
        for (let i = 0; i < arr.length; i++) {
            if (Object.hasOwn(arr, i)) { // 忽略稀疏數(shù)組的空槽
                if (Array.isArray(arr[i]) && currentDepth < depth) { // 展開的元素必須是數(shù)組
                    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('扁平普通數(shù)組')
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('稀疏數(shù)組中使用 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('在非數(shù)組對象上使用 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]

結(jié)語

到這里 Array 實例方法 flat 實現(xiàn)完成啦。

到此這篇關(guān)于JavaScript Array實例方法flat的實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript Array flat實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: