JavaScript 中 map 和 filter 方法的快速上手指南 (附综合案例)
在 JavaScript 编程中，数组操作是常见的任务之一。map 和 filter 是两个非常强大且常用的数组方法，它们可以帮助我们高效地处理数组数据。本文将通过一个色彩轮播图的示例，逐步介绍这两个方法的使用，并提供一个综合案例供读者练习。
基础色彩轮播图
首先，我们从一个简单的色彩轮播图开始。这个轮播图会每隔一段时间改变背景颜色，并显示当前颜色的编号。
<!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>
在这个代码中，我们定义了一个包含颜色和编号的数组 colorArray，并通过 setInterval 每隔两秒改变 div 的背景颜色和文本内容。
使用 map 方法
map 方法是数组的一个高阶函数，它会创建一个新数组，其元素是调用一次提供的函数后的返回值。map 方法不会修改原数组，而是返回一个新的数组。
map 方法的原理
map 方法遍历数组中的每个元素，并对每个元素执行提供的函数。该函数的返回值将作为新数组的对应元素。map 方法的签名如下：
array.map(function(element, index, array) {// 对元素进行操作并返回新值
}, thisArg);
element：当前正在处理的元素。index（可选）：当前正在处理的元素的索引。array（可选）：调用map方法的数组。thisArg（可选）：执行回调时使用的this值。
示例代码
在基础轮播图的基础上，我们使用 map 方法对颜色数组的 id 进行转换，将每个 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 进行转换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 方法创建了一个新的数组 newIdArrayInColorArray，其中每个元素是原数组中对应元素的 id 乘以 3 的结果。
使用 filter 方法
filter 方法用于筛选数组中的元素，它会创建一个新数组，包含通过测试的所有元素。filter 方法同样不会修改原数组，而是返回一个新的数组。
filter 方法的原理
filter 方法遍历数组中的每个元素，并对每个元素执行提供的函数。如果该函数返回 true，则当前元素会被包含在新数组中。filter 方法的签名如下：
array.filter(function(element, index, array) {// 返回布尔值
}, thisArg);
element：当前正在处理的元素。index（可选）：当前正在处理的元素的索引。array（可选）：调用filter方法的数组。thisArg（可选）：执行回调时使用的this值。
示例代码
在基础轮播图的基础上，我们使用 filter 方法筛选出 id 为奇数的颜色。
<!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 为奇数的颜色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 方法创建了一个新的数组 newColorArrayInOldColorArray，其中只包含 id 为奇数的元素。
map 和 filter 的区别
最后我们在了解了基本用法以及进入综合案例之前，通过表格来对比 map 和 filter 的主要区别：
| 特性 | map | filter |
|---|---|---|
| 用途 | 转换数组元素 | 筛选符合要求数组元素 |
| 返回值 | 新数组，包含转换后的元素 | 新数组，包含通过测试的元素 |
| 空位处理 | 保留空位 | 跳过空位 |
| 是否修改原数组 | 不修改 | 不修改 |
| 返回数组长度 | 与原数组等长 | 可能小于原数组长度 |
综合案例：筛选并转换数组元素
为了进一步巩固对 map 和 filter 方法的理解，uo给大家提供一个综合案例。假设我们有一个包含多个对象的数组，每个对象包含一个数字和一个字符串。我们需要筛选出数字大于 10 的对象，并将字符串转换为大写。
初始数据
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 方法将字符串转换为大写
const upperCaseArray = filteredArray.map(item => {return {num: item.num,str: item.str.toUpperCase() // toUpperCase() 方法将字符串中的所有字母字符转换为大写；对应的相反方法是 toLowerCase()};
});console.log(upperCaseArray);
答案
在这个综合案例中，我们首先使用 filter 方法筛选出 num 大于 10 的对象，然后使用 map 方法将字符串转换为大写。最终，我们得到了一个新的数组 upperCaseArray，其中包含筛选和转换后的对象。
希望本文能帮助你快速上手 JavaScript 的 map 和 filter 方法。通过实际的代码示例和综合案例，你可以更好地理解和应用这两个强大的数组方法。