jQuery.each 实现与原生 Array.forEach 不同 [英] jQuery.each implementation differs from native Array.forEach

问题描述

有没有人为什么其他优秀的 jQuery.each 函数的设计与(现在)原生 Array.forEach 不同?例子:

Does anyone why is the otherwise excellent jQuery.each function is designed differently from the (now) native Array.forEach? F.ex:

var arr = ['abc','def'];
arr.forEach(function(entry, index) {
    console.log(entry); // abc / def
});

这绝对有道理.但是 jQuery 选择将 index 作为第一个参数:

This makes absolute sense. But jQuery chose to put the index as first argument:

$.each(arr, function(index, entry) {
   console.log(entry);
});

有人知道这个设计决定背后的原因吗?我一直广泛使用 $.each ，但它总是让我烦恼，索引是第一个参数，因为它很少使用.我知道 jQuery 通过 this 实现了直接引用，但是如果你这样做会很混乱:

Does anyone know the reasoning behind this design decision? I have always used $.each extensively, but it always bugged me that the index was the first argument as it is rarely used. I know jQuery implemented a direct reference through this but it’s very confusing if you do:

​var arr = ['abc','def'];
$.each(arr, function() {
    console.log(this === 'abc'); // false both times, since this is a String constructor
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

并不是说它让我如此烦恼，我更喜欢将原生 polyfill 用于最常见的新数组函数，但我一直对设计决策感到好奇.也许它是在浏览器实现原生 forEach 和遗留支持阻止他们改变它之前的旧时代制作的，或者......?

Not that it bothers me so much, I prefer to use native polyfills for the most common new array functions, but I have always been curious about the design decision. Maybe it was made in older times before browsers implemented native forEach and legacy support prevented them from changing it, or...?

或者，它是这样设计的，因为它也可以用于本机对象，然后在回调中将键放在值之前有意义"......?

Or maybe, it is designed this way because is can be used on native objects too, than then it "makes sense" to put the key before value in the callback...?

旁注:我知道 underscore.js(也可能是其他库)是反过来的(更类似于原生函数).

Sidenote: I know underscore.js (and maybe other libraries) does it the other way around (more similar to the native function).

推荐答案

好吧，我想我们必须向 Resig 先生本人寻求解释.事实是，在设计和开发 jQuery 时，ECMAscript 262 版本 5 并不是很普遍，所以这肯定会起作用.而且由于它是这样设计的，他们不想以后更改它并破坏所有现有代码.

Well, I guess we'd have to ask Mr. Resig himself for an explanation on this. Fact is, that ECMAscript 262 edition 5 wasn't very widespread the time jQuery was designed and developed, so this definitely comes into play. And since it was designed like so, they didn't want to change it later and break all existing code.

事实上，在循环 Array 时，您更可能希望访问具有更高优先级的元素，而不是它的索引.所以，对我来说，没有合理的解释为什么要先将 index 传入回调.

In fact, its much more likely that you want to access an element with a higher priority, than the index of it when looping an Array. So, to me there is no reasonable explanation why you would pass in the index first into the callbacks.

请放心，如果 jQuery 是今天发明的，它们将遵循本机实现行为.

Be assured, if jQuery was invented today, they would follow the native implementation behavior.

另一方面，如果它给您带来太多麻烦，您可以简单地创建一个快捷方式并使用本机 Array.prototype.forEach 来迭代您的 jQuery 包装集:

On the other hand, if it bugs you too much you can simply create a shortcut and use the native Array.prototype.forEach to iterate your jQuery wrapped sets:

var forEach = Function.prototype.call.bind( Array.prototype.forEach );

forEach( $('div'), function( node ) {
    console.log( node );
});

..对于标准的数组，只需使用它们的原生原型即可.

..and for standard Arrays, just go with their native prototype.

当实现条件返回false/true时，我们必须知道哪个部分以哪种方式工作.当您在 Array.prototype.forEach 中使用带有条件的 return false 时，它​​被视为继续，但是当您使用 return false 时，在 $.each 中带有条件时，它被视为 break 语句.

while implementation conditional return false/true,we must know what part work in which manner. When you use return false with condition in Array.prototype.forEach it treated as continue, but When you use return false, with condition in $.each it treated as break statement.

var listArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var arr1 =[];var arr2=[];
var rv = true;
listArray.forEach(function(i, item) {
  if (i == 5) {
    return rv = false;
  }
 arr1.push(i)
  return rv;
});
var listArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
jQuery.each(listArray, function(i, item) {
  if (item == 5) {
    return rv = false;
  }
  arr2.push(i)
});
  console.log("forEach=>"+arr1)
  console.log("$.each=>"+arr2)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这篇关于jQuery.each 实现与原生 Array.forEach 不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！