快捷導(dǎo)航

JavaScript中Array實(shí)例方法map的實(shí)現(xiàn)方法

更新時(shí)間：2024年03月24日 08:29:53 作者：Aimilali

這篇文章主要介紹了JavaScript中Array實(shí)例方法map的實(shí)現(xiàn)方法,map() 方法創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是原數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下

Array.prototype.map()

map() 方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是原數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。 map() 方法不會改變原數(shù)組，然而接受的回調(diào)函數(shù)可以改變原數(shù)組。

語法

map(callbackFn) 
map(callbackFn, thisArg)

參數(shù)

map 方法接受兩個(gè)參數(shù)：回調(diào)函數(shù) 和指定回調(diào)函數(shù)中的 this 值。

1、callbackFn：為數(shù)組中的每個(gè)元素執(zhí)行的函數(shù)。它的返回值作為一個(gè)元素被添加到新數(shù)組中（是添加不是追加）。

該函數(shù)被調(diào)用時(shí)將傳入以下參數(shù)：

currentValue：數(shù)組中當(dāng)前正在處理的元素。
index：正在處理的元素在數(shù)組中的索引。
array：調(diào)用了 map() 的數(shù)組本身。

2、thisArg（可選）：執(zhí)行 callbackFn 時(shí)用作 this 的值。

返回值

一個(gè)新數(shù)組，每個(gè)元素都是回調(diào)函數(shù)的返回值。

用法

第一種（推薦）

const array = [1, 2, 3]
const newArray = array.map((currentValue, index, array) => {
    // 返回新數(shù)組中的元素值
    return currentValue + 1
})
// [2, 3, 4]

第二種（基于 this 進(jìn)行操作時(shí)）

const thisArg = { name: 'Aimilali' }
const array = [1, 2, 3]
const newArray = array.map(function (currentValue, index, array) {
    // 返回新數(shù)組中的元素值
    return this.name + currentValue
}, thisArg)
// ['Aimilali1', 'Aimilali2', 'Aimilali3']

描述

map() 方法是一個(gè)迭代方法。它為數(shù)組中的每個(gè)元素調(diào)用一次提供的 callbackFn 函數(shù)，并用結(jié)果構(gòu)建一個(gè)新數(shù)組。

callbackFn 僅在已分配值的數(shù)組索引處被調(diào)用。它不會在稀疏數(shù)組中的空槽處被調(diào)用。

稀疏數(shù)組使用 map() 方法后返回值仍然是稀疏數(shù)組。空槽的索引在返回的數(shù)組中仍然為空，并且回調(diào)函數(shù)不會對它們進(jìn)行調(diào)用。

請注意，在第一次調(diào)用 callbackFn之前，數(shù)組的長度已經(jīng)被保存。因此：

當(dāng)開始調(diào)用 map() 時(shí)，callbackFn 將不會訪問超出數(shù)組初始長度的任何元素。
對已訪問索引的更改不會導(dǎo)致再次在這些元素上調(diào)用 callbackFn。
如果數(shù)組中一個(gè)現(xiàn)有的、尚未訪問的元素被 callbackFn 更改，則它傳遞給 callbackFn 的值將是該元素被修改后的值。被刪除的元素則不會被訪問。

上述類型的并發(fā)修改經(jīng)常導(dǎo)致難以理解的代碼，通常應(yīng)避免（特殊情況除外）。

map() 方法是通用的。它只期望 this 值具有 length 屬性和整數(shù)鍵屬性。

由于 map 創(chuàng)建一個(gè)新數(shù)組，在不使用 map 返回的新數(shù)組的情況下不推薦使用 map。應(yīng)該使用 forEach 或 for...of 作為代替。

實(shí)現(xiàn) map 方法

從上面 map 描述總結(jié)實(shí)現(xiàn) map 時(shí)注意實(shí)現(xiàn)這三點(diǎn)。

回調(diào)函數(shù)調(diào)用之前，數(shù)組的長度已經(jīng)被保存。
回調(diào)函數(shù)不會在稀疏數(shù)組中的空槽處被調(diào)用。
稀疏數(shù)組使用 map() 方法后返回值仍然是稀疏數(shù)組。

Array.prototype.myMap = function (fun, context) {
    if (!Object.is(typeof fun, 'function')) {
        throw TypeError(`${typeof fun} is not a function`)
    }
    const length = this.length   // 保存數(shù)組長度
    const newArr = Array(length)
    for (let i = 0; i < length; i++) {
        if (Object.hasOwn(this, i)) {  // 跳過稀疏數(shù)組
            newArr[i] = fun.call(context, this[i], i, this) // 確保返回值仍然是稀疏數(shù)組
        }
    }
    return newArr
}