前言

從經(jīng)典的 for 循環(huán)到 forEach() 方法，用于迭代數(shù)據(jù)集合的各種技術(shù)和方法比比皆是。但是現(xiàn)在比較流行的方法是 .map() 方法。

.map() 通過(guò)指定函數(shù)調(diào)用一個(gè)數(shù)組中每一項(xiàng)元素，來(lái)創(chuàng)建一個(gè)新數(shù)組。 .map() 是一種 non-mutating(非變異) 方法，它創(chuàng)建一個(gè)新數(shù)組，而不是只對(duì)調(diào)用數(shù)組進(jìn)行更改的 mutating(變異) 方法。這可能很難記住。

語(yǔ)法：

array.map(function(currentValue,index,arr), thisValue)

currentValue：必須。當(dāng)前元素的值

index：可選。當(dāng)期元素的索引值

arr：可選。當(dāng)期元素屬于的數(shù)組對(duì)象

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

map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

map() 方法按照原始數(shù)組元素順序依次處理元素。

注意：map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

注意：map() 不會(huì)改變?cè)紨?shù)組。

在這篇文章中，我們將探討一下 JavaScript 中 .map() 的 4 個(gè)值得注意的用法。讓我們開(kāi)始！

在數(shù)組中的每一項(xiàng)元素上調(diào)用一個(gè)函數(shù)

將字符串轉(zhuǎn)換為數(shù)組

在 JavaScript 庫(kù)中用于渲染列表

重新格式化數(shù)組對(duì)象

小技巧使用案例

1. 在數(shù)組中的每一項(xiàng)元素上調(diào)用一個(gè)函數(shù)

如前所述，.map() 接受回調(diào)函數(shù)作為其參數(shù)之一，該函數(shù)的一個(gè)重要參數(shù)是由該函數(shù)處理的項(xiàng)的當(dāng)前值。這是一個(gè)必需的參數(shù)。有了這個(gè)參數(shù)，我們可以修改數(shù)組中的每個(gè)單獨(dú)項(xiàng)，并在其上創(chuàng)建一個(gè)新元素。這里有一個(gè)例子：

const sweetArray = [2, 3, 4, 5, 35]

const sweeterArray = sweetArray.map(sweetItem => {

return sweetItem * 2

})

console.log(sweetArray) // [2, 3, 4, 5, 35]

console.log(sweeterArray) // [4, 6, 8, 10, 70]

我們可以看到，原數(shù)組 sweetArray 并沒(méi)有被修改，所以 .map() 是一種 non-mutating(非變異) 方法。這里值得一提的是 forEach() 方法，它是遍歷數(shù)組，對(duì)原來(lái)的數(shù)據(jù)操作，會(huì)改變?cè)瓟?shù)組。

這甚至可以進(jìn)一步簡(jiǎn)化，使其更清潔：

// 創(chuàng)建一個(gè)要使用的函數(shù)

const makeSweeter = sweetItem => sweetItem * 2;

// 我們有一個(gè)數(shù)組

const sweetArray = [2, 3, 4, 5, 35];

// 調(diào)用我們制作的函數(shù)。更具可讀性

const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray); // [4, 6, 8, 10, 70]

擁有像 sweetArray.map(makeSweeter) 這樣的代碼可以讓你在跳轉(zhuǎn)到這段代碼時(shí)更具可讀性。

2.將字符串轉(zhuǎn)換為數(shù)組

已知的 .map() 屬于 Array 原型。 我們?nèi)绾问褂盟鼘⒆址D(zhuǎn)換為數(shù)組。 不用擔(dān)心，我們不需要再開(kāi)發(fā)一個(gè)方法來(lái)處理字符串，而是使用特殊的 .call() 方法。

JavaScript 中的所有內(nèi)容都是對(duì)象，方法只是附加到這些對(duì)象的函數(shù)。 .call() 允許我們利用另一個(gè)對(duì)象的上下文。 因此，我們將數(shù)組中的 .map() 上下文復(fù)制到字符串。

.call() 可以傳遞參數(shù)，要使用的上下文和“參數(shù)原始函數(shù)的參數(shù)”。 聽(tīng)起來(lái)有點(diǎn)拗口？ 這是一個(gè)例子：

const name = "Chuloo"

const map = Array.prototype.map

const newName = map.call(name, eachLetter => {

return `${eachLetter}a`

})

console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]

這里，我們只是在String上使用 .map() 的上下文，并傳遞了 .map() 所期望的函數(shù)參數(shù)。 你可以看看控制臺(tái)里打印出來(lái)的內(nèi)容。

這類似于 String 的 .split() 方法，不過(guò) .split() 方法只能在返回?cái)?shù)組之前修改每個(gè)單獨(dú)的字符串字符。

3.在 JavaScript 庫(kù)中用于渲染列表

像 React 這樣的 JavaScript 庫(kù)利用 .map() 來(lái)渲染列表中的項(xiàng)目。這需要 JSX 語(yǔ)法，但是 .map() 方法包含在類似于 mustache 的 JSX 語(yǔ)法中。這是 React 組件的一個(gè)很好的例子。

import React from "react";

import ReactDOM from "react-dom";

const names = ["john", "sean", "mike", "jean", "chris"];

const NamesList = () => (

• {names.map(name =>
• {name} )}

);

const rootElement = document.getElementById("root");

ReactDOM.render(, rootElement);

如果你不熟悉 React ，那么我告訴這是 React 中的一個(gè)簡(jiǎn)單的無(wú)狀態(tài)組件，它使用列表渲染div。 使用 .map() 渲染單個(gè)列表項(xiàng)以迭代最初創(chuàng)建的 names 數(shù)組。 此組件使用 ReactDOM 渲染 ID為 root 的 DOM 元素 。

4.重新格式化數(shù)組對(duì)象

如何處理數(shù)組中的對(duì)象？ .map() 可用于迭代數(shù)組中的對(duì)象，并以與傳統(tǒng)數(shù)組類似的方式，修改每個(gè)單獨(dú)對(duì)象的內(nèi)容 并返回一個(gè)新數(shù)組。 這個(gè)修改是基于回調(diào)函數(shù)中返回的內(nèi)容來(lái)完成的。這里有一個(gè)例子:

const myUsers = [

{ name: 'chuloo', likes: 'grilled chicken' },

{ name: 'chris', likes: 'cold beer' },

{ name: 'sam', likes: 'fish biscuits' }

]

const usersByFood = myUsers.map(item => {

const container = {};

container[item.name] = item.likes;

container.age = item.name.length * 10;

return container;

})

console.log(usersByFood);

// [{chuloo: "grilled chicken", age: 60}, {chris: "cold beer", age: 50}, {sam: "fish biscuits", age: 30}]

我們所做的就是使用括號(hào)和點(diǎn)符號(hào)簡(jiǎn)單地修改數(shù)組中的每個(gè)對(duì)象。這個(gè)用例可以用于在前端應(yīng)用程序上保存或解析之前處理或壓縮接收到的數(shù)據(jù)。

5.小技巧使用案例

通常情況下，.map() 方法中的 callback 函數(shù)只需要接受一個(gè)參數(shù)，就是正在被遍歷的數(shù)組元素本身。但這并不意味著 map 只給 callback 傳了一個(gè)參數(shù)。這個(gè)思維慣性可能會(huì)讓我們犯一個(gè)很容易犯的錯(cuò)誤。 生成新數(shù)組元素的 callback 函數(shù)，有 三個(gè)參數(shù)：

currentValue – callback 的第一個(gè)參數(shù)，數(shù)組中正在處理的當(dāng)前元素，最常用的參數(shù)。

index – callback 的第二個(gè)參數(shù)，數(shù)組中正在處理的當(dāng)前元素的索引。

array – callback 的第三個(gè)參數(shù)，map 方法被調(diào)用的數(shù)組。

來(lái)看一下例子：

// 下面的語(yǔ)句返回什么呢:

["1", "2", "3"].map(parseInt);

// 你可能覺(jué)的會(huì)是[1, 2, 3]

// 但實(shí)際的結(jié)果是 [1, NaN, NaN]

// 通常使用parseInt時(shí),只需要傳遞一個(gè)參數(shù).

// 但實(shí)際上,parseInt可以有兩個(gè)參數(shù).第二個(gè)參數(shù)是進(jìn)制數(shù).

// 可以通過(guò)語(yǔ)句"alert(parseInt.length)===2"來(lái)驗(yàn)證.

// map方法在調(diào)用callback函數(shù)時(shí),會(huì)給它傳遞三個(gè)參數(shù):當(dāng)前正在遍歷的元素,

// 元素索引, 原數(shù)組本身.

// 第三個(gè)參數(shù)parseInt會(huì)忽視, 但第二個(gè)參數(shù)不會(huì),也就是說(shuō),

// parseInt把傳過(guò)來(lái)的索引值當(dāng)成進(jìn)制數(shù)來(lái)使用.從而返回了NaN.

function returnInt(element) {

return parseInt(element, 10);

}

['1', '2', '3'].map(returnInt); // [1, 2, 3]

// 意料之中的結(jié)果

// 也可以使用簡(jiǎn)單的箭頭函數(shù)，結(jié)果同上

['1', '2', '3'].map( str => parseInt(str) );

// 一個(gè)更簡(jiǎn)單的方式:

['1', '2', '3'].map(Number); // [1, 2, 3]

// 與`parseInt` 不同，下面的結(jié)果會(huì)返回浮點(diǎn)數(shù)或指數(shù):

['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

還有一個(gè)非常實(shí)用的小技巧，像 .map() ，.reduce(), .filter() 這些方法支持鏈?zhǔn)秸{(diào)用。例如：

var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

var result = myArr

.map(function(element) {

// 數(shù)值大于5的數(shù)值視為5

if (element > 5)

return 5;

return element;

})

.reduce(function(prev, element) {

// 與之前的數(shù)值加總，回傳后代入下一輪的處理

return prev + element;

}, 0);

// 40

console.log(result);

這代碼看著有點(diǎn)啰嗦是吧？感謝 pythonicx 提供的優(yōu)化代碼：

var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

let result = myArr.map(m => m>5 ? 5 : m).reduce((x,y) => x+y);

console.log(result); // 40

小結(jié)

在這篇文章中，我們研究了 JavaScript 中 .map() 方法的主要用途。 需要注意的是，與其他方法結(jié)合使用時(shí)，.map() 的函數(shù)可以得到強(qiáng)大的擴(kuò)展和利用。 嘗試找出更多用例。

總結(jié)

以上是生活随笔為你收集整理的python的array如何使用map_你应该了解的JavaScript Array.map()五种用途小结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。