JavaScript中map和filter方法綜合案例詳解
在 JavaScript 編程中，數(shù)組操作是常見(jiàn)的任務(wù)之一。map 和 filter 是兩個(gè)非常強(qiáng)大且常用的數(shù)組方法，它們可以幫助我們高效地處理數(shù)組數(shù)據(jù)。本文將通過(guò)一個(gè)色彩輪播圖的示例，逐步介紹這兩個(gè)方法的使用，并提供一個(gè)綜合案例供讀者練習(xí)。
基礎(chǔ)色彩輪播圖
首先，我們從一個(gè)簡(jiǎn)單的色彩輪播圖開(kāi)始。這個(gè)輪播圖會(huì)每隔一段時(shí)間改變背景顏色，并顯示當(dāng)前顏色的編號(hào)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>色彩輪播圖</title>
</head>
<body>
<div id="container" style="height: 200px; width: 100px; text-align: center;">0</div>
<script>
const box = document.getElementById('container');
const colorArray = [
{ color: '#FF5733', id: 1 }, // 紅色
{ color: '#33FF57', id: 2 }, // 綠色
{ color: '#3357FF', id: 3 }, // 藍(lán)色
{ color: '#FFFF33', id: 4 }, // 黃色
{ color: '#FF33FF', id: 5 } // 粉色
];
let timer = 0;
setInterval(() => {
box.style.backgroundColor = colorArray[timer].color;
box.innerText = colorArray[timer].id;
timer = (timer + 1) % colorArray.length;
}, 2000);
</script>
</body>
</html>在這個(gè)代碼中，我們定義了一個(gè)包含顏色和編號(hào)的數(shù)組 colorArray，并通過(guò) setInterval 每隔兩秒改變 div 的背景顏色和文本內(nèi)容。
使用 map 方法
map 方法是數(shù)組的一個(gè)高階函數(shù)，它會(huì)創(chuàng)建一個(gè)新數(shù)組，其元素是調(diào)用一次提供的函數(shù)后的返回值。map 方法不會(huì)修改原數(shù)組，而是返回一個(gè)新的數(shù)組。
map 方法的原理
map 方法遍歷數(shù)組中的每個(gè)元素，并對(duì)每個(gè)元素執(zhí)行提供的函數(shù)。該函數(shù)的返回值將作為新數(shù)組的對(duì)應(yīng)元素。map 方法的簽名如下：
array.map(function(element, index, array) {
// 對(duì)元素進(jìn)行操作并返回新值
}, thisArg);element：當(dāng)前正在處理的元素。index（可選）：當(dāng)前正在處理的元素的索引。array（可選）：調(diào)用map方法的數(shù)組。thisArg（可選）：執(zhí)行回調(diào)時(shí)使用的this值。
示例代碼
在基礎(chǔ)輪播圖的基礎(chǔ)上，我們使用 map 方法對(duì)顏色數(shù)組的 id 進(jìn)行轉(zhuǎn)換，將每個(gè) id 乘以 3。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>色彩輪播圖 - 使用 map 方法</title>
</head>
<body>
<div id="container" style="height: 200px; width: 100px; text-align: center;">0</div>
<script>
const box = document.getElementById('container');
const colorArray = [
{ color: '#FF5733', id: 1 }, // 紅色
{ color: '#33FF57', id: 2 }, // 綠色
{ color: '#3357FF', id: 3 }, // 藍(lán)色
{ color: '#FFFF33', id: 4 }, // 黃色
{ color: '#FF33FF', id: 5 } // 粉色
];
let timer = 0;
// 使用 map 方法對(duì) id 進(jìn)行轉(zhuǎn)換
const newIdArrayInColorArray = colorArray.map(i => i.id * 3);
console.log(newIdArrayInColorArray);
setInterval(() => {
box.style.backgroundColor = colorArray[timer].color;
box.innerText = newIdArrayInColorArray[timer];
timer = (timer + 1) % colorArray.length;
}, 2000);
</script>
</body>
</html>在這個(gè)代碼中，map 方法創(chuàng)建了一個(gè)新的數(shù)組 newIdArrayInColorArray，其中每個(gè)元素是原數(shù)組中對(duì)應(yīng)元素的 id 乘以 3 的結(jié)果。
使用 filter 方法
filter 方法用于篩選數(shù)組中的元素，它會(huì)創(chuàng)建一個(gè)新數(shù)組，包含通過(guò)測(cè)試的所有元素。filter 方法同樣不會(huì)修改原數(shù)組，而是返回一個(gè)新的數(shù)組。
filter 方法的原理
filter 方法遍歷數(shù)組中的每個(gè)元素，并對(duì)每個(gè)元素執(zhí)行提供的函數(shù)。如果該函數(shù)返回 true，則當(dāng)前元素會(huì)被包含在新數(shù)組中。filter 方法的簽名如下：
array.filter(function(element, index, array) {
// 返回布爾值
}, thisArg);element：當(dāng)前正在處理的元素。index（可選）：當(dāng)前正在處理的元素的索引。array（可選）：調(diào)用filter方法的數(shù)組。thisArg（可選）：執(zhí)行回調(diào)時(shí)使用的this值。
示例代碼
在基礎(chǔ)輪播圖的基礎(chǔ)上，我們使用 filter 方法篩選出 id 為奇數(shù)的顏色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>色彩輪播圖 - 使用 filter 方法</title>
</head>
<body>
<div id="container" style="height: 200px; width: 100px; text-align: center;">0</div>
<script>
const box = document.getElementById('container');
const colorArray = [
{ color: '#FF5733', id: 1 }, // 紅色
{ color: '#33FF57', id: 2 }, // 綠色
{ color: '#3357FF', id: 3 }, // 藍(lán)色
{ color: '#FFFF33', id: 4 }, // 黃色
{ color: '#FF33FF', id: 5 } // 粉色
];
let timer = 0;
// 使用 filter 方法篩選出 id 為奇數(shù)的顏色
const newColorArrayInOldColorArray = colorArray.filter(i => i.id % 2 !== 0);
console.log(newColorArrayInOldColorArray);
setInterval(() => {
box.style.backgroundColor = newColorArrayInOldColorArray[timer].color;
box.innerText = newColorArrayInOldColorArray[timer].id;
timer = (timer + 1) % newColorArrayInOldColorArray.length;
}, 2000);
</script>
</body>
</html>在這個(gè)代碼中，filter 方法創(chuàng)建了一個(gè)新的數(shù)組 newColorArrayInOldColorArray，其中只包含 id 為奇數(shù)的元素。
map 和 filter 的區(qū)別
最后我們?cè)诹私饬嘶居梅ㄒ约斑M(jìn)入綜合案例之前，通過(guò)表格來(lái)對(duì)比 map 和 filter 的主要區(qū)別：
| 特性 | map | filter |
|---|---|---|
| 用途 | 轉(zhuǎn)換數(shù)組元素 | 篩選符合要求數(shù)組元素 |
| 返回值 | 新數(shù)組，包含轉(zhuǎn)換后的元素 | 新數(shù)組，包含通過(guò)測(cè)試的元素 |
| 空位處理 | 保留空位 | 跳過(guò)空位 |
| 是否修改原數(shù)組 | 不修改 | 不修改 |
| 返回?cái)?shù)組長(zhǎng)度 | 與原數(shù)組等長(zhǎng) | 可能小于原數(shù)組長(zhǎng)度 |
綜合案例：篩選并轉(zhuǎn)換數(shù)組元素
為了進(jìn)一步鞏固對(duì) map 和 filter 方法的理解，uo給大家提供一個(gè)綜合案例。假設(shè)我們有一個(gè)包含多個(gè)對(duì)象的數(shù)組，每個(gè)對(duì)象包含一個(gè)數(shù)字和一個(gè)字符串。我們需要篩選出數(shù)字大于 10 的對(duì)象，并將字符串轉(zhuǎn)換為大寫(xiě)。
初始數(shù)據(jù)
const dataArray = [
{ num: 5, str: 'apple' },
{ num: 15, str: 'banana' },
{ num: 8, str: 'cherry' },
{ num: 20, str: 'date' },
{ num: 3, str: 'elderberry' }
];接下來(lái)請(qǐng)讀者自行練習(xí)，答案up主附在下面了，寫(xiě)完了來(lái)對(duì)答案吧
綜合案例代碼
const dataArray = [
{ num: 5, str: 'apple' },
{ num: 15, str: 'banana' },
{ num: 8, str: 'cherry' },
{ num: 20, str: 'date' },
{ num: 3, str: 'elderberry' }
];
// TODO.1 使用 filter 方法篩選出 num 大于 10 的對(duì)象
const filteredArray = dataArray.filter(item => item.num > 10);
// TODO.2 使用 map 方法將字符串轉(zhuǎn)換為大寫(xiě)
const upperCaseArray = filteredArray.map(item => {
return {
num: item.num,
str: item.str.toUpperCase() // toUpperCase() 方法將字符串中的所有字母字符轉(zhuǎn)換為大寫(xiě)；對(duì)應(yīng)的相反方法是 toLowerCase()
};
});
console.log(upperCaseArray);答案
在這個(gè)綜合案例中，我們首先使用 filter 方法篩選出 num 大于 10 的對(duì)象，然后使用 map 方法將字符串轉(zhuǎn)換為大寫(xiě)。最終，我們得到了一個(gè)新的數(shù)組 upperCaseArray，其中包含篩選和轉(zhuǎn)換后的對(duì)象。
希望本文能幫助你快速上手 JavaScript 的 map 和 filter 方法。通過(guò)實(shí)際的代碼示例和綜合案例，你可以更好地理解和應(yīng)用這兩個(gè)強(qiáng)大的數(shù)組方法。
到此這篇關(guān)于JavaScript中map和filter方法綜合案例詳解的文章就介紹到這了,更多相關(guān)js map 和 filter 方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡時(shí)執(zhí)行順序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡時(shí)執(zhí)行順序的方法,涉及javascript事件的觸發(fā)與執(zhí)行原理及相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了bootstrap改變按鈕加載狀態(tài)的方法,需要的朋友可以參考下2014-12-12
laravel實(shí)現(xiàn)中文和英語(yǔ)互相切換的例子
今天小編就為大家分享一篇laravel實(shí)現(xiàn)中文和英語(yǔ)互相切換的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).這篇文章通過(guò)實(shí)例代碼給大家介紹了javascript閉包的使用之按鈕切換功能，感興趣的朋友一起看看吧2018-08-08
原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript對(duì)象與數(shù)組的幾種常見(jiàn)復(fù)制方法
在 JavaScript 開(kāi)發(fā)中,對(duì)象和數(shù)組的復(fù)制是一個(gè)非常常見(jiàn)的操作,無(wú)論是函數(shù)參數(shù)傳遞、狀態(tài)管理,還是避免不必要的副作用,了解和掌握各種復(fù)制方式至關(guān)重要,我們將系統(tǒng)梳理 JavaScript 中的幾種常見(jiàn)復(fù)制方法,并對(duì)其應(yīng)用場(chǎng)景進(jìn)行詳細(xì)說(shuō)明,需要的朋友可以參考下2024-10-10
bootstrap-paginator服務(wù)器端分頁(yè)使用方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap-paginator服務(wù)器端分頁(yè)的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了60行js代碼實(shí)現(xiàn)俄羅斯方塊，可能會(huì)有些小bug，不過(guò)總體上還是比較不錯(cuò)的。大伙來(lái)研究下代碼，給出意見(jiàn)。2015-03-03
這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法
js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法，需要的朋友可以參考一下2013-06-06