剖析javascript forEach 和 jquery $.each 区别

对于 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 也没有试图去把使用方法写得跟原生一样。

走一波关注!

    原文作者:代码解剖专家
    原文地址: https://www.jianshu.com/p/30cbe7944dde
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞