在jQuery中,map和每个函数似乎都在做同样的事情。两者之间有什么实际的区别吗?什么时候你会选择使用其中一种而不是另一种?
Jquery。Map在处理数组时更有意义,因为它在处理数组时表现得非常好。
Jquery。Each最好在遍历选择器项时使用。map函数不使用选择器就证明了这一点。
$(selector).each(...)
$.map(arr....)
如您所见,map并不打算与选择器一起使用。
each方法意味着是一个不可变迭代器,而map方法可以用作迭代器,但实际上是为了操作提供的数组并返回一个新数组。
另一件需要注意的重要事情是,each函数返回原始数组,而map函数返回一个新数组。如果过度使用map函数的返回值,可能会浪费大量内存。
例如:
var items = [1,2,3,4];
$.each(items, function() {
alert('this is ' + this);
});
var newItems = $.map(items, function(i) {
return i + 1;
});
// newItems is [2,3,4,5]
还可以使用map函数从数组中删除项。例如:
var items = [0,1,2,3,4,5,6,7,8,9];
var itemsLessThanEqualFive = $.map(items, function(i) {
// removes all items > 5
if (i > 5)
return null;
return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]
您还将注意到,在map函数中没有映射this。你必须在回调中提供第一个参数(例如我们在上面使用i)。具有讽刺意味的是,each方法中使用的回调参数与map函数中的回调参数相反,因此要小心。
map(arr, function(elem, index) {});
// versus
each(arr, function(index, elem) {});
each函数遍历一个数组,对每个元素调用一次提供的函数,并将其设置为活动元素。这样的:
function countdown() {
alert(this + "..");
}
$([5, 4, 3, 2, 1]).each(countdown);
会提醒5..4 . .3 . .2 . .然后1 . .
另一方面,Map接受一个数组,并返回一个新数组,其中每个元素都被函数更改。这样的:
function squared() {
return this * this;
}
var s = $([5, 4, 3, 2, 1]).map(squared);
结果s为[25,16,9,4,1]。
1:回调函数的参数颠倒。
.each(), $.each()和.map()的回调函数先取索引,再取元素
function (index, element)
$.map()的回调函数有相同的参数,但是相反
function (element, index)
2: .each(), $.each(),和.map()做一些特殊的事情
Each()以this指向当前元素的方式调用函数。在大多数情况下,你甚至不需要回调函数中的两个参数。
function shout() { alert(this + '!') }
result = $.each(['lions', 'tigers', 'bears'], shout)
// result == ['lions', 'tigers', 'bears']
对于$.map(), this变量引用全局窗口对象。
3: map()对回调函数的返回值做一些特殊的处理
Map()在每个元素上调用函数,并将结果存储在一个新数组中,并返回该数组。通常只需要使用回调函数中的第一个参数。
function shout(el) { return el + '!' }
result = $.map(['lions', 'tigers', 'bears'], shout)
// result == ['lions!', 'tigers!', 'bears!']
我是这样理解的:
function fun1() {
return this + 1;
}
function fun2(el) {
return el + 1;
}
var item = [5,4,3,2,1];
var newitem1 = $.each(item, fun1);
var newitem2 = $.map(item, fun2);
console.log(newitem1); // [5, 4, 3, 2, 1]
console.log(newitem2); // [6, 5, 4, 3, 2]
因此,“each”函数返回原始数组,而“map”函数返回一个新数组
var intArray = [1, 2, 3, 4, 5];
//lets use each function
$.each(intArray, function(index, element) {
if (element === 3) {
return false;
}
console.log(element); // prints only 1,2. Breaks the loop as soon as it encountered number 3
});
//lets use map function
$.map(intArray, function(element, index) {
if (element === 3) {
return false;
}
console.log(element); // prints only 1,2,4,5. skip the number 3.
});
推荐文章
- 在setInterval中使用React状态钩子时状态不更新
- 使用JavaScript显示/隐藏'div'
- 使用JavaScript获取所选的选项文本
- AngularJS模板中的三元运算符
- 让d3.js可视化布局反应灵敏的最好方法是什么?
- 原型的目的是什么?
- 检查jquery是否使用Javascript加载
- 将camelCaseText转换为标题大小写文本
- 如何在JavaScript客户端截屏网站/谷歌怎么做的?(无需存取硬盘)
- 如何在JavaScript中遍历表行和单元格?
- jQuery map vs. each
- 自定义异常类型
- 窗口。Onload vs <body Onload =""/>
- 不能与文件列表一起使用forEach
- Jquery 3.0 url。indexOf错误