小編給大家分享一下JavaScript中Array.map()有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

發(fā)展壯大離不開廣大客戶長(zhǎng)期以來的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都宴會(huì)酒店設(shè)計(jì)等，在重慶網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。

前言

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

.map() 通過指定函數(shù)調(diào)用一個(gè)數(shù)組中每一項(xiàng)元素，來創(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è)值得注意的用法。讓我們開始！

• 在數(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 并沒有被修改，所以 .map() 是一種 non-mutating(非變異) 方法。這里值得一提的是 forEach() 方法，它是遍歷數(shù)組，對(duì)原來的數(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)心，我們不需要再開發(fā)一個(gè)方法來處理字符串，而是使用特殊的 .call() 方法。

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

.call() 可以傳遞參數(shù)，要使用的上下文和“參數(shù)原始函數(shù)的參數(shù)”。 聽起來有點(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)里打印出來的內(nèi)容。

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

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

像 React 這樣的 JavaScript 庫(kù)利用 .map() 來渲染列表中的項(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 = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

如果你不熟悉 React ，那么我告訴這是 React 中的一個(gè)簡(jiǎn)單的無狀態(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)容來完成的。這里有一個(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ù)組。

來看一下例子：

// 下面的語(yǔ)句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能覺的會(huì)是[1, 2, 3]
// 但實(shí)際的結(jié)果是 [1, NaN, NaN]

// 通常使用parseInt時(shí),只需要傳遞一個(gè)參數(shù).
// 但實(shí)際上,parseInt可以有兩個(gè)參數(shù).第二個(gè)參數(shù)是進(jìn)制數(shù).
// 可以通過語(yǔ)句"alert(parseInt.length)===2"來驗(yàn)證.
// map方法在調(diào)用callback函數(shù)時(shí),會(huì)給它傳遞三個(gè)參數(shù):當(dāng)前正在遍歷的元素, 
// 元素索引, 原數(shù)組本身.
// 第三個(gè)參數(shù)parseInt會(huì)忽視, 但第二個(gè)參數(shù)不會(huì),也就是說,
// parseInt把傳過來的索引值當(dāng)成進(jìn)制數(shù)來使用.從而返回了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

以上是“JavaScript中Array.map()有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：JavaScript中Array.map()有什么用
當(dāng)前地址：http://jinyejixie.com/article48/pdcshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、ChatGPT、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)