快捷導(dǎo)航

js中map()函數(shù)的使用案例詳解

更新時(shí)間：2022年11月11日 10:43:39 作者：芳草斜陽(yáng)_晨光

map()方法定義在JavaScript的Array中，它返回一個(gè)新的數(shù)組，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值，這篇文章主要介紹了js中map()函數(shù)的使用,需要的朋友可以參考下

前言

關(guān)鍵詞：map

項(xiàng)目中我們常常會(huì)遇到要對(duì)后端返回的數(shù)據(jù)進(jìn)行修改，從而達(dá)到符合我們前端開發(fā)人員的需要，其中map是常用到的對(duì)數(shù)組元素進(jìn)行修改的重要函數(shù)。

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、概念

map() 方法定義在JavaScript的Array中，它返回一個(gè)新的數(shù)組，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值。值得注意的是：1、map()函數(shù)不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)；2、map()函數(shù)不會(huì)改變?cè)紨?shù)組，它形成的是一個(gè)新的數(shù)組

二、相關(guān)語(yǔ)法

array.map(function(currentValue, index, arr), thisIndex)—
參數(shù)說(shuō)明：

function(currentValue, index, arr)：必須。為一個(gè)函數(shù)，數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)。其中函數(shù)參數(shù)：

currentValue：必須。表述當(dāng)前元素的的值(item)
index：可選。當(dāng)前元素的索引也就是第幾個(gè)數(shù)組元素。
arr：可選。當(dāng)前元素屬于的數(shù)組對(duì)象

thisValue：可選。對(duì)象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作"this"的值

三、示例

例1：對(duì)原數(shù)組元素進(jìn)行平方后再賦值給新的數(shù)組

let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

例2：將int類型的數(shù)據(jù)換成字符串類型

this.tableData = list.map(function (item) {
                if (item.leaseStatus === 0) {
                  item.leaseStatus = '已租';
                } else if (item.leaseStatus === 1) {
                  item.leaseStatus = '未租';
                } else if (item.leaseStatus === 2) {
                  item.leaseStatus = '已租';
                }
                if (res.data.data === null) {
                  item = '暫無(wú)記錄';
                }
                return item;
              });

選擇Object還是Map

（1）內(nèi)存占用

Object和Map的工程級(jí)實(shí)現(xiàn)在不同瀏覽器間存在明顯差異，但存儲(chǔ)單個(gè)鍵/值對(duì)所占用的內(nèi)存數(shù)量都會(huì)隨鍵的數(shù)量線性增加。批量添加或刪除鍵/值對(duì)則取決于各瀏覽器對(duì)該類型內(nèi)存分配的工程實(shí)現(xiàn)。不同瀏覽器的情況不同，但給定固定大小的內(nèi)存，Map大約可以比Object多存儲(chǔ)50%的鍵/值對(duì)

（2）插入性能

向Object和Map中插入新鍵/值對(duì)的消耗大致相當(dāng)，不過插入Map在所有瀏覽器中一般會(huì)稍微快一點(diǎn)兒。對(duì)這兩個(gè)類型來(lái)說(shuō)，插入速度并不會(huì)隨著鍵/值對(duì)數(shù)量而線性增加。如果代碼涉及大量插入操作，那么顯然Map的性能更佳

（3）查找速度

與插入不同，從大型Object和Map中查找鍵/值對(duì)的差異極小，但如果只包含少量鍵/值對(duì)，則Object有時(shí)候速度更快。在把Object當(dāng)成數(shù)組使用的情況下（比如使用連續(xù)整數(shù)作為屬性），瀏覽器引擎可以進(jìn)行優(yōu)化，在內(nèi)存中使用更高效的布局。這對(duì)Map來(lái)說(shuō)是不可能的。對(duì)這兩個(gè)類型而言，查找速度不會(huì)隨著鍵/值對(duì)數(shù)量增加而線性增加。如果代碼涉及大量查找操作，那么某些情況下可能選擇Object更好一些

（4）刪除性能

使用delete刪除Object屬性的性能一直以來(lái)飽受詬病，目前在很多瀏覽器中仍然如此。為此，出現(xiàn)了一些偽刪除對(duì)象屬性的操作，包括把屬性設(shè)置為undefined或null。但很多時(shí)候，這都是一種討厭的或不適宜的折中。而對(duì)大多數(shù)瀏覽器引擎來(lái)說(shuō)，Map的delete()操作都比插入和查找更快。如果代碼涉及大量刪除操作，那么毫無(wú)疑問應(yīng)該選擇Map