快捷導(dǎo)航

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

更新時間：2022年11月11日 10:43:39 作者：芳草斜陽_晨光

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

前言

關(guān)鍵詞：map

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

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

一、概念

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

二、相關(guān)語法

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

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

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

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

三、示例

例1：對原數(shù)組元素進行平方后再賦值給新的數(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 = '暫無記錄';
                }
                return item;
              });

選擇Object還是Map

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

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

（2）插入性能

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

（3）查找速度

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

（4）刪除性能

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