剖析javascript forEach 和 jquery $.

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

走一波关注！