JavaScript 专题系列第十一篇,解说 jQuery 通用遍历要领 each 的完成
each引见
jQuery 的 each 要领,作为一个通用遍历要领,可用于遍历对象和数组。
语法为:
jQuery.each(object, [callback])
回调函数具有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。
// 遍历数组
$.each( [0,1,2], function(i, n){
console.log( "Item #" + i + ": " + n );
});
// Item #0: 0
// Item #1: 1
// Item #2: 2
// 遍历对象
$.each({ name: "John", lang: "JS" }, function(i, n) {
console.log("Name: " + i + ", Value: " + n);
});
// Name: name, Value: John
// Name: lang, Value: JS
退出轮回
只管 ES5 供应了 forEach 要领,然则 forEach 没有办法中断或许跳出 forEach 轮回,除了抛出一个非常。然则关于 jQuery 的 each 函数,假如须要退出 each 轮回能够使回调函数返回 false,别的返回值将被疏忽。
$.each( [0, 1, 2, 3, 4, 5], function(i, n){
if (i > 2) return false;
console.log( "Item #" + i + ": " + n );
});
// Item #0: 0
// Item #1: 1
// Item #2: 2
初版
那末我们该怎样完成如许一个 each 要领呢?
起首,我们一定要根据参数的范例举行推断,假如是数组,就挪用 for 轮回,假如是对象,就运用 for in 轮回,有一个破例是类数组对象,关于类数组对象,我们依旧能够运用 for 轮回。
更多关于类数组对象的学问,我们能够检察《JavaScript专题之类数组对象与arguments》
那末又该怎样推断类数组对象和数组呢?现实上,我们在《JavaScript专题之范例推断(下)》就讲过jQuery 数组和类数组对象推断函数 isArrayLike 的完成。
所以,我们能够轻松写出初版:
// 初版
function each(obj, callback) {
var length, i = 0;
if ( isArrayLike(obj) ) {
length = obj.length;
for ( ; i < length; i++ ) {
callback(i, obj[i])
}
} else {
for ( i in obj ) {
callback(i, obj[i])
}
}
return obj;
}
中断轮回
如今已能够遍历对象和数组了,然则依旧有一个效果没有完成,就是中断轮回,根据 jQuery each 的完成,当回调函数返回 false 的时刻,我们就中断轮回。这个完成起来也很简单:
我们只用把:
callback(i, obj[i])
替换成:
if (callback(i, obj[i]) === false) {
break;
}
轻松完成中断轮回的功用。
this
我们在现实的开辟中,我们偶然会在 callback 函数中用到 this,先举个不怎样适当的例子:
// 我们给每一个人增加一个 age 属性,age 的值为 18 + index
var person = [
{name: 'kevin'},
{name: 'daisy'}
]
$.each(person, function(index, item){
this.age = 18 + index;
})
console.log(person)
这个时刻,我们就愿望 this 能指向当前遍历的元素,然后给每一个元素增加 age 属性。
指定 this,我们能够运用 call 或许 apply,实在也很简单:
我们把:
if (callback(i, obj[i]) === false) {
break;
}
替换成:
if (callback.call(obj[i], i, obj[i]) === false) {
break;
}
关于 this,我们再举个经常使用的例子:
$.each($("p"), function(){
$(this).hover(function(){ ... });
})
虽然我们经常会如许写:
$("p").each(function(){
$(this).hover(function(){ ... });
})
然则由于 $(“p”).each() 要领是定义在 jQuery 函数的 prototype 对象上面的,而 $.data()要领是定义 jQuery 函数上面的,挪用的时刻不从庞杂的 jQuery 对象上挪用,速率快得多。所以我们引荐运用第一种写法。
回到第一种写法上,就是由于将 this 指向了当前 DOM 元素,我们才运用 $(this)将当前 DOM 元素包装成 jQuery 对象,文雅的运用 hover 要领。
所以终究的 each 源码为:
function each(obj, callback) {
var length, i = 0;
if (isArrayLike(obj)) {
length = obj.length;
for (; i < length; i++) {
if (callback.call(obj[i], i, obj[i]) === false) {
break;
}
}
} else {
for (i in obj) {
if (callback.call(obj[i], i, obj[i]) === false) {
break;
}
}
}
return obj;
}
机能比较
我们在机能上比较下 for 轮回和 each 函数:
var arr = Array.from({length: 1000000}, (v, i) => i);
console.time('for')
var i = 0;
for (; i < arr.length; i++) {
i += arr[i];
}
console.timeEnd('for')
console.time('each')
var j = 0;
$.each(arr, function(index, item){
j += item;
})
console.timeEnd('each')
这里显现一次运算的效果:
从上图能够看出,for 轮回的机能是显著好过 each 函数的,each 函数本质上也是用的 for 轮回,究竟是慢在了那里呢?
我们再看一个例子:
function each(obj, callback) {
var i = 0;
var length = obj.length
for (; i < length; i++) {
value = callback(i, obj[i]);
}
}
function eachWithCall(obj, callback) {
var i = 0;
var length = obj.length
for (; i < length; i++) {
value = callback.call(obj[i], i, obj[i]);
}
}
var arr = Array.from({length: 1000000}, (v, i) => i);
console.time('each')
var i = 0;
each(arr, function(index, item){
i += item;
})
console.timeEnd('each')
console.time('eachWithCall')
var j = 0;
eachWithCall(arr, function(index, item){
j += item;
})
console.timeEnd('eachWithCall')
这里显现一次运算的效果:
each 函数和 eachWithCall 函数唯一的区分就是 eachWithCall 挪用了 call,从效果我们能够推测出,call 会致使机能丧失,但也恰是 call 的存在,我们才将 this 指向轮回中当前的元素。
有舍有得吧。
专题系列
JavaScript专题系列目次地点:https://github.com/mqyqingfeng/Blog。
JavaScript专题系列估计写二十篇摆布,重要研讨一样平常开辟中一些功用点的完成,比方防抖、撙节、去重、范例推断、拷贝、最值、扁平、柯里、递归、乱序、排序等,特点是研(chao)究(xi) underscore 和 jQuery 的完成体式格局。
假如有毛病或许不严谨的处所,请务必赋予斧正,非常谢谢。假如喜好或许有所启示,迎接 star,对作者也是一种勉励。