举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > jquery map方法 jQuery.map()方法

jquery map方法 jQuery.map()方法

2023-06-03 16:18 jQuery教程

jquery map方法 jQuery.map()方法

jquery map方法

jQuery的map方法是一个非常有用的函数,它可以将一个数组中的每个元素映射到另一个数组中。它可以用来处理数据,并将其转换成新的形式。

// 例子1:将字符串转换成大写
var arr = ["a", "b", "c"];
var newArr = $.map(arr, function(item) { 
    return item.toUpperCase(); 
}); 
console.log(newArr); // ["A", "B", "C"] 

上面的代码使用jQuery map方法将字符串转换成大写,它会对原始数组中的每一项进行处理,然后返回一个新的数组。

 
// 例子2:将对象映射到新对象中 
var arr = [{name: 'John', age: 20}, {name: 'Bob', age: 30}]; 
var newArr = $.map(arr, function(item) { 
    return {name: item.name, age: item.age + 10}; 
});  
console.log(newArr); // [{name: 'John', age: 30}, {name: 'Bob', age: 40}]  

上面的代码使用jQuery map方法将对象映射到新对象中,它会对原始数组中的每一项进行处理,然后返回一个新的数组。

jQuery.map()方法

jQuery.map()方法

jQuery 杂项方法jQuery 杂项方法

实例

使用$.map() 修改一个数组的值

<div></div>
<
p></p>
<
span></span>
<
script>
$
(function () {
   
var arr = [ "a", "b", "c", "d", "e" ];
    $
("div").text(arr.join(", "));
   
arr = $.map(arr, function(n, i){
       
return (n.toUpperCase() + i);
   
});
    $
("p").text(arr.join(", "));
   
arr = $.map(arr, function (a) {
        return
a + a;
    }
);
    $
("span").text(arr.join(", "));
}
)
</
script>


定义和用法

$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。

注意:1. 在jQuery 1.6 之前,该函数只支持遍历数组;从 1.6 开始,该函数也支持遍历对象。
2. map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。
3. 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。


语法

$.map( object, callback )

参数描述
objectArray/Object类型 指定的需要处理的数组或对象。
callbackFunction类型 指定的处理函数。


实例

更多实例

原数组中的每个值加 4
将原始数组中的每个值加 4 后,映射到新的数组中。

原数组中大于 0 的数值加 1
将原数组中大于 0 的数值加 1 后映射到新的数组中。

原数组的值加 1
将原数组中的每个值及该值加 1 后的结果映射到新生成的数组。

原数组的值乘以 2
将原对象中的每个值乘 2 后,映射到新生成的数组中。

对象中的键
将对象中的键映射到新生成的数组中。

原数组的值的平方
将原始数组中每个值的两次方作为返回结果,映射到新生成的数组中。

移除元素
通过在处理函数中返回 null 的方式来移除该元素,移除小于 50的值,同时将未被移除的元素值减小 45。

添加元素
通过在处理函数中返回数组的方式,在最终返回的结果数组中添加元素。


jQuery 杂项方法jQuery 杂项方法

阅读全文
以上是编程学为你收集整理的jquery map方法 jQuery.map()方法全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部