jQuery 的 map() 方法主要用于遍历数组或对象，并根据遍历过程中的每一个元素，生成一个新的数组或对象。本篇攻略将详细讲解 map() 方法的用法及示例。
一、map() 方法的基本语法
jQuery 的 map() 方法基本语法如下：
$.map(obj, callback)
其中，obj 为要遍历的数组或对象，callback 是回调函数，用来处理遍历过程中的每一个元素。callback 函数有两个参数：第一个参数为当前元素的值，第二个参数为当前元素的下标。callback 函数必须返回一个值，用于生成新的数组或对象。
二、map() 方法返回值
map() 方法返回一个新的数组或对象，该数组或对象由 callback 函数处理每个元素生成。
三、map() 方法示例
1. 遍历数组并生成新数组
下面的示例展示了如何使用 map() 方法，将一个数组中的所有元素的值都加上固定值，生成一个新的数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery map() 方法示例</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var arr = [1, 2, 3, 4, 5];
var newArr = $.map(arr, function(value, index) {
return value + 10; // 将数组中每个元素的值增加10
});
console.log(newArr); // 输出 [11, 12, 13, 14, 15]
</script>
</body>
</html>
在上面的示例中，首先定义一个包含 5 个整数的数组 arr，然后使用 map() 方法遍历该数组，将每个元素的值都加上固定值并返回，生成新的数组 newArr。最后在控制台中输出新数组 newArr，可以看到数组中的每个元素的值都增加了 10。
2. 遍历对象并生成新对象
下面的示例展示了如何使用 map() 方法，遍历一个对象中的所有属性，生成一个新的对象，新对象的属性名与原对象的属性名相同，值都加上固定值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery map() 方法示例</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var obj = {a: 1, b: 2, c: 3};
var newObj = $.map(obj, function(value, key) {
var item = {};
item[key] = value + 10; // 将对象中每个属性的值增加10
return item;
});
console.log(newObj); // 输出 [{a: 11}, {b: 12}, {c: 13}]
</script>
</body>
</html>
在上面的示例中，首先定义一个包含 3 个属性的对象 obj，然后使用 map() 方法遍历该对象，生成新的对象 newObj。新对象的每个属性名与原对象相同，值都加上固定值。最后在控制台中输出新对象 newObj，可以看到新对象中的每个属性的值都增加了 10。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 遍历map()方法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 