对于 js 的迭代,最基础的就是使用 for 循环进行遍历,但写法太繁琐,不优雅,使得代码看起来很丑,没到必不得已的时候,基本上不会用 for 循环来遍历数组。
除了 for 循环,js 还可以使用 forEach 对数组进行迭代,但它有个弊端,它是异步的。一般我们所使用的项目都会使用 jquery,所以这时候我就使用 jquery 的 $.each 来对数组进行遍历,这样就优雅了许多,并且也更符合 js 的风格,更加 javascriptnic。可是有人说 $.each 是包装过的,性能会下降很多,果真如此吗?作为代码解剖专家,让我们一同剖析$.each内部到底是怎么实现的。
在 github 上有jquery的源码,以这为例,地址:https://github.com/jquery/jquery/blob/master/src/core.js
我们看看这一行:
Line 85
// Execute a callback for every element in the matched set.
each: function( callback ) {
return jQuery.each( this, callback );
},
再定位到246 行
each: function( 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;
},
从这段代码其实看出,如果没有长度属性,或者它的值没有定义,jQuery认为它是一个简单的对象,并将为它做一个 for 在可枚举属性的循环中,没有对继承属性进行保护。jquery 是 通过 call 来改变 this 指针的上下文环境,不断地切换 this 指针上下文,如果数组又长又硬,那么确实相当耗性能。这种写法其实这也比较奇特,$.each 调用对象的函数,而不使用长度属性,暂时我还没有去研究这两种方法的区别,有空再剖析这两种写法区别。
那$.each 跟foreach 有什么区别呢?
1、都可以在回调函数中放置参数
2、回调函数中的参数量,forEach 提供了对原始集合的引用
3、回调函数 this 值:jquery 指的是当前的元素,forEach 是JavaScript的默认值
4、在回调中手动设置 this 值的功能,jquery 没有提供这个功能,forEach 可以通过第三个参数来设置
5、在稀疏数组中避免非定义属性。forEach 避免非定义属性,而 jquery 包含了它们。
它们使用方法有很多不同,jquery 也没有试图去把使用方法写得跟原生一样。
走一波关注!