JavaScript中map和filter方法綜合案例詳解
在 JavaScript 編程中，數(shù)組操作是常見的任務之一。map 和 filter 是兩個非常強大且常用的數(shù)組方法，它們可以幫助我們高效地處理數(shù)組數(shù)據(jù)。本文將通過一個色彩輪播圖的示例，逐步介紹這兩個方法的使用，并提供一個綜合案例供讀者練習。
基礎色彩輪播圖
首先，我們從一個簡單的色彩輪播圖開始。這個輪播圖會每隔一段時間改變背景顏色，并顯示當前顏色的編號。
<!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 }, // 藍色
{ 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>在這個代碼中，我們定義了一個包含顏色和編號的數(shù)組 colorArray，并通過 setInterval 每隔兩秒改變 div 的背景顏色和文本內(nèi)容。
使用 map 方法
map 方法是數(shù)組的一個高階函數(shù)，它會創(chuàng)建一個新數(shù)組，其元素是調(diào)用一次提供的函數(shù)后的返回值。map 方法不會修改原數(shù)組，而是返回一個新的數(shù)組。
map 方法的原理
map 方法遍歷數(shù)組中的每個元素，并對每個元素執(zhí)行提供的函數(shù)。該函數(shù)的返回值將作為新數(shù)組的對應元素。map 方法的簽名如下：
array.map(function(element, index, array) {
// 對元素進行操作并返回新值
}, thisArg);element：當前正在處理的元素。index（可選）：當前正在處理的元素的索引。array（可選）：調(diào)用map方法的數(shù)組。thisArg（可選）：執(zhí)行回調(diào)時使用的this值。
示例代碼
在基礎輪播圖的基礎上，我們使用 map 方法對顏色數(shù)組的 id 進行轉(zhuǎn)換，將每個 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 }, // 藍色
{ color: '#FFFF33', id: 4 }, // 黃色
{ color: '#FF33FF', id: 5 } // 粉色
];
let timer = 0;
// 使用 map 方法對 id 進行轉(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>在這個代碼中，map 方法創(chuàng)建了一個新的數(shù)組 newIdArrayInColorArray，其中每個元素是原數(shù)組中對應元素的 id 乘以 3 的結(jié)果。
使用 filter 方法
filter 方法用于篩選數(shù)組中的元素，它會創(chuàng)建一個新數(shù)組，包含通過測試的所有元素。filter 方法同樣不會修改原數(shù)組，而是返回一個新的數(shù)組。
filter 方法的原理
filter 方法遍歷數(shù)組中的每個元素，并對每個元素執(zhí)行提供的函數(shù)。如果該函數(shù)返回 true，則當前元素會被包含在新數(shù)組中。filter 方法的簽名如下：
array.filter(function(element, index, array) {
// 返回布爾值
}, thisArg);element：當前正在處理的元素。index（可選）：當前正在處理的元素的索引。array（可選）：調(diào)用filter方法的數(shù)組。thisArg（可選）：執(zhí)行回調(diào)時使用的this值。
示例代碼
在基礎輪播圖的基礎上，我們使用 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 }, // 藍色
{ 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>在這個代碼中，filter 方法創(chuàng)建了一個新的數(shù)組 newColorArrayInOldColorArray，其中只包含 id 為奇數(shù)的元素。
map 和 filter 的區(qū)別
最后我們在了解了基本用法以及進入綜合案例之前，通過表格來對比 map 和 filter 的主要區(qū)別：
| 特性 | map | filter |
|---|---|---|
| 用途 | 轉(zhuǎn)換數(shù)組元素 | 篩選符合要求數(shù)組元素 |
| 返回值 | 新數(shù)組，包含轉(zhuǎn)換后的元素 | 新數(shù)組，包含通過測試的元素 |
| 空位處理 | 保留空位 | 跳過空位 |
| 是否修改原數(shù)組 | 不修改 | 不修改 |
| 返回數(shù)組長度 | 與原數(shù)組等長 | 可能小于原數(shù)組長度 |
綜合案例：篩選并轉(zhuǎn)換數(shù)組元素
為了進一步鞏固對 map 和 filter 方法的理解，uo給大家提供一個綜合案例。假設我們有一個包含多個對象的數(shù)組，每個對象包含一個數(shù)字和一個字符串。我們需要篩選出數(shù)字大于 10 的對象，并將字符串轉(zhuǎn)換為大寫。
初始數(shù)據(jù)
const dataArray = [
{ num: 5, str: 'apple' },
{ num: 15, str: 'banana' },
{ num: 8, str: 'cherry' },
{ num: 20, str: 'date' },
{ num: 3, str: 'elderberry' }
];接下來請讀者自行練習，答案up主附在下面了，寫完了來對答案吧
綜合案例代碼
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 的對象
const filteredArray = dataArray.filter(item => item.num > 10);
// TODO.2 使用 map 方法將字符串轉(zhuǎn)換為大寫
const upperCaseArray = filteredArray.map(item => {
return {
num: item.num,
str: item.str.toUpperCase() // toUpperCase() 方法將字符串中的所有字母字符轉(zhuǎn)換為大寫；對應的相反方法是 toLowerCase()
};
});
console.log(upperCaseArray);答案
在這個綜合案例中，我們首先使用 filter 方法篩選出 num 大于 10 的對象，然后使用 map 方法將字符串轉(zhuǎn)換為大寫。最終，我們得到了一個新的數(shù)組 upperCaseArray，其中包含篩選和轉(zhuǎn)換后的對象。
希望本文能幫助你快速上手 JavaScript 的 map 和 filter 方法。通過實際的代碼示例和綜合案例，你可以更好地理解和應用這兩個強大的數(shù)組方法。
到此這篇關于JavaScript中map和filter方法綜合案例詳解的文章就介紹到這了,更多相關js map 和 filter 方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天學習的是window對象，還是有點用的。2010-01-01
這篇文章主要為大家詳細介紹了JS版的圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了JavaScript代碼實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
某一天我在刷抖音時,看到一個UI設計師分享了一個好看的網(wǎng)頁滾動動效設計,那種飄逸流暢的動畫效果立刻抓住了我的眼球,我腦海里立刻開始想象用代碼如何實現(xiàn)這個效果,所以本文給大家分享了如何使用threejs實現(xiàn)滾動效果,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了javascript初學者常用技巧,包括javascript的存放位置、格式及焦點事件等,需要的朋友可以參考下2014-09-09
微信小程序自定義頭部導航欄和導航欄背景圖片 navigationStyle問題
這篇文章主要介紹了微信小程序 自定義頭部導航欄和導航欄背景圖片 navigationStyle功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
Javascript圖像處理—圖像形態(tài)學(膨脹與腐蝕)
上一篇文章，我們講解了圖像處理中的閾值函數(shù),這一篇文章我們來做膨脹和腐蝕函數(shù)2013-01-01
這篇文章主要介紹了詳解微信小程序支付流程與梳理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了javascript 獲取網(wǎng)頁標題代碼實例，有需要的朋友可以參考一下2014-01-01
下面小編就為大家?guī)硪黄猨s中常用的Tab切換效果(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-08-08