脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js map 和 filter 方法

JavaScript中map和filter方法综合案例详解

 更新时间：2025年09月26日 11:30:29   作者：Pu_Nine_9  
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 的主要区别：

特性mapfilter
用途转换数组元素筛选符合要求数组元素
返回值新数组，包含转换后的元素新数组，包含通过测试的元素
空位处理保留空位跳过空位
是否修改原数组不修改不修改
返回数组长度与原数组等长可能小于原数组长度

综合案例：筛选并转换数组元素

为了进一步巩固对 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 方法。通过实际的代码示例和综合案例，你可以更好地理解和应用这两个强大的数组方法。

到此这篇关于JavaScript中map和filter方法综合案例详解的文章就介绍到这了,更多相关js map 和 filter 方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    这篇文章主要介绍了JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法,涉及javascript事件的触发与执行原理及相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • bootstrap改变按钮加载状态

    bootstrap改变按钮加载状态

    这篇文章主要介绍了bootstrap改变按钮加载状态的方法,需要的朋友可以参考下
    2014-12-12
  • laravel实现中文和英语互相切换的例子

    laravel实现中文和英语互相切换的例子

    今天小编就为大家分享一篇laravel实现中文和英语互相切换的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript闭包的使用之按钮切换功能

    javascript闭包的使用之按钮切换功能

    闭包就是能够读取其他函数内部变量的函数.这篇文章通过实例代码给大家介绍了javascript闭包的使用之按钮切换功能，感兴趣的朋友一起看看吧
    2018-08-08
  • 原生js实现旋转木马效果

    原生js实现旋转木马效果

    这篇文章主要为大家详细介绍了原生js实现旋转木马效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • JavaScript对象与数组的几种常见复制方法

    JavaScript对象与数组的几种常见复制方法

    在 JavaScript 开发中,对象和数组的复制是一个非常常见的操作,无论是函数参数传递、状态管理,还是避免不必要的副作用,了解和掌握各种复制方式至关重要,我们将系统梳理 JavaScript 中的几种常见复制方法,并对其应用场景进行详细说明,需要的朋友可以参考下
    2024-10-10
  • bootstrap-paginator服务器端分页使用方法详解

    bootstrap-paginator服务器端分页使用方法详解

    这篇文章主要为大家详细介绍了bootstrap-paginator服务器端分页的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 60行js代码实现俄罗斯方块

    60行js代码实现俄罗斯方块

    这篇文章主要介绍了60行js代码实现俄罗斯方块，可能会有些小bug，不过总体上还是比较不错的。大伙来研究下代码，给出意见。
    2015-03-03
  • JS前端首屏优化技巧

    JS前端首屏优化技巧

    这篇文章主要为大家介绍了JS前端首屏优化技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • js验证模型自我实现的具体方法

    js验证模型自我实现的具体方法

    js验证模型自我实现的具体方法，需要的朋友可以参考一下
    2013-06-06

最新评论