快捷導(dǎo)航

JavaScript中map和filter方法綜合案例詳解

更新時間：2025年09月26日 11:30:29 作者：Pu_Nine_9

map和filter是兩個非常強(qiáng)大且常用的數(shù)組方法,它們可以幫助我們高效地處理數(shù)組數(shù)據(jù),本文將通過一個色彩輪播圖的示例,逐步介紹這兩個方法的使用,并提供一個綜合案例供讀者練習(xí),感興趣的朋友一起看看吧

在 JavaScript 編程中，數(shù)組操作是常見的任務(wù)之一。map 和 filter 是兩個非常強(qiáng)大且常用的數(shù)組方法，它們可以幫助我們高效地處理數(shù)組數(shù)據(jù)。本文將通過一個色彩輪播圖的示例，逐步介紹這兩個方法的使用，并提供一個綜合案例供讀者練習(xí)。

基礎(chǔ)色彩輪播圖

首先，我們從一個簡單的色彩輪播圖開始。這個輪播圖會每隔一段時間改變背景顏色，并顯示當(dāng)前顏色的編號。

<!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>

在這個代碼中，我們定義了一個包含顏色和編號的數(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ù)組的對應(yīng)元素。map 方法的簽名如下：

array.map(function(element, index, array) {
    // 對元素進(jìn)行操作并返回新值
}, thisArg);

element：當(dāng)前正在處理的元素。
index（可選）：當(dāng)前正在處理的元素的索引。
array（可選）：調(diào)用 map 方法的數(shù)組。
thisArg（可選）：執(zhí)行回調(diào)時使用的 this 值。

示例代碼

在基礎(chǔ)輪播圖的基礎(chǔ)上，我們使用 map 方法對顏色數(shù)組的 id 進(jìn)行轉(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 }, // 藍(lán)色
            { color: '#FFFF33', id: 4 }, // 黃色
            { color: '#FF33FF', id: 5 } // 粉色
        ];
        let timer = 0;
        // 使用 map 方法對 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>

在這個代碼中，map 方法創(chuàng)建了一個新的數(shù)組 newIdArrayInColorArray，其中每個元素是原數(shù)組中對應(yīng)元素的 id 乘以 3 的結(jié)果。

使用 filter 方法

filter 方法用于篩選數(shù)組中的元素，它會創(chuàng)建一個新數(shù)組，包含通過測試的所有元素。filter 方法同樣不會修改原數(shù)組，而是返回一個新的數(shù)組。

filter 方法的原理

filter 方法遍歷數(shù)組中的每個元素，并對每個元素執(zhí)行提供的函數(shù)。如果該函數(shù)返回 true，則當(dāng)前元素會被包含在新數(shù)組中。filter 方法的簽名如下：

array.filter(function(element, index, array) {
    // 返回布爾值
}, thisArg);

element：當(dāng)前正在處理的元素。
index（可選）：當(dāng)前正在處理的元素的索引。
array（可選）：調(diào)用 filter 方法的數(shù)組。
thisArg（可選）：執(zhí)行回調(diào)時使用的 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>

在這個代碼中，filter 方法創(chuàng)建了一個新的數(shù)組 newColorArrayInOldColorArray，其中只包含 id 為奇數(shù)的元素。

map 和 filter 的區(qū)別

最后我們在了解了基本用法以及進(jìn)入綜合案例之前，通過表格來對比 map 和 filter 的主要區(qū)別：

特性	map	filter
用途	轉(zhuǎn)換數(shù)組元素	篩選符合要求數(shù)組元素
返回值	新數(shù)組，包含轉(zhuǎn)換后的元素	新數(shù)組，包含通過測試的元素
空位處理	保留空位	跳過空位
是否修改原數(shù)組	不修改	不修改
返回數(shù)組長度	與原數(shù)組等長	可能小于原數(shù)組長度

綜合案例：篩選并轉(zhuǎn)換數(shù)組元素

為了進(jìn)一步鞏固對 map 和 filter 方法的理解，uo給大家提供一個綜合案例。假設(shè)我們有一個包含多個對象的數(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' }
];

接下來請讀者自行練習(xí)，答案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)換為大寫；對應(yīng)的相反方法是 toLowerCase()
    };
});
console.log(upperCaseArray);