每天学习API之四，zepto源码each,map

最新推荐文章于 2020-12-10 11:07:59 发布

原创最新推荐文章于 2020-12-10 11:07:59 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#api

javascript 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了jQuery中的工具函数$.each和$.map的实现原理与使用方法。详细解释了这两个函数如何遍历数组或对象，并通过回调函数处理每个元素。此外，还提到了$.each在遍历过程中如何根据回调函数的返回值决定是否继续遍历，以及$.map如何根据回调函数的返回值构造新的数组。

工具函数

$.each 遍历数组元素或以key-value值对方式遍历对象。回调函数返回 false 时停止遍历。

$.each = function (elements, callback) {
  var i,key;
  //类数组 likeArray
  if (likeArray(elements)) {
    for (i = 0; i < elements.length; i++) {
      if (callback.call(elements[i], i, elements[i]) === false) {
        return elements;
      }
    }
  } else {
    for (key in elements) {
      if (callback.call(elements[key], key, elements[key]) === false) {
        return elements;
      }
    }
  }

  return flatten(elements);
}

先来看看调用方式：$.each(collection, function(index, item){ ... })

$.each 接收两个参数，第一个参数 elements 为需要遍历的数组或者对象，第二个 callback 为回调函数。
如果 elements 为数组，用 for 循环，调用 callback ，并且将数组索引 index 和元素值 item 传给回调函数作为参数；如果为对象，用 for···in 遍历属性值，并且将属性 key 及属性值传给回调函数作为参数。

注意回调函数调用了 call 方法，call 的第一个参数为当前元素值或当前属性值，所以回调函数的上下文变成了当前元素值或属性值，也就是说回调函数中的 this 指向的是 item 。这在dom集合的遍历中相当有用。

在遍历的时候，还对回调函数的返回值进行判断，如果回调函数返回 false （if (callback.call(elements[i], i, elements[i]) === false)） ，立即中断遍历。

$.each 调用结束后，会将遍历的数组或对象（ elements ）返回。

$.map 可以遍历数组（类数组）或对象中的元素，根据回调函数的返回值，将返回值组成一个新的数组，并将该数组扁平化后返回，会将 null 及 undefined 排除。

$.map = function(elements, callback) {
  var value, values = [],i, key;

  if (likeArray(elements)) {
    for (i = 0; i < elements.length; i++) {
      value = callback(elements[i], i);
      if (value != null) {
        values.push(value);
      }
    }
  } else {
    for (key in elements) {
      value = callback(elements[key], key);
      if (value != null) {
        values.push(value);
      }
    }
  }

  return values;
}