如何在jQuery中循环数组?

我试图循环访问一个数组。 我有以下代码:

 var substr = currnt_image_list.split(','); //This will split up 21,32,234,223,

我试图从数组中获取所有数据。 有人能带我走上正确的道路吗?



(更新:我的其他答案更详细地列出了非jQuery选项,下面的第三个选项jQuery.each并不在其中)。


三种选择:

通用循环:

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

优点 :直接的,jQuery的不存在依赖关系,简单易懂,没有与保护的含义问题, this循环中,函数调用没有不必要的开销(例如体内,理论上速度更快,但实际上你必须有这么多元素,以至于你会遇到其他问题;细节)。

ES5的forEach

从ECMAScript5开始,数组在其上有一个forEach函数,这样可以很容易地遍历数组:

substr.forEach(function(item) {
    // do something with `item`
});

链接到文档

(注意:还有很多其他功能,不仅仅是forEach ;详情请参阅上面的答案。)

优点 :声明式的,如果你有一个方便的话,可以为迭代器使用预构建函数,如果你的循环体是复杂的,函数调用的范围有时是有用的,在你的包含范围内不需要i变量。

缺点 :并非所有的浏览器都有它,尽管大多数浏览器都这样做,并且您始终可以使用ES5填充(搜索将列出几个),以便在尚未安装它的浏览器上提供它。 如果您在使用this中包含的代码,你必须坚持在一个变量,所以你可以在函数中使用它,或者把它作为第二个参数forEach ,因为迭代函数内, thisundefined (严格模式)或全局对象( window )在非严格模式,除非你给forEach它的特殊价值。

jQuery.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

(链接到文档)

优点 :与forEach相同的优点,加上你知道它在那里,因为你使用jQuery。

缺点 :如果您在使用this中包含的代码,你必须坚持在一个变量,所以你可以在函数中使用它,因为this意味着什么功能内其他人。

你可以通过使用$.proxy来避免this事情:

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

...或Function#bind

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

...或在ES2015(“ES6”)中,箭头功能:

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

不要做什么:

不要使用for..in来做这件事(或者如果你这样做,用适当的保护措施来做)。 你会看到人们说来(其实,简单有在这里回答说),但for..in没有做什么很多人认为它(它更加有用的东西!)。 具体而言, for..in循环一个对象的可枚举属性名称(而不是数组的索引)。 由于数组是对象,默认情况下它们唯一可枚举的属性就是索引,所以它似乎大多是在平淡的部署中进行的。 但这不是一个安全的假设,你可以为此使用它。 这是一个探索:http://jsbin.com/exohi/3

我应该软化上面的“不要”。 如果你正在处理稀疏数组(例如,数组总共有15个元素,但由于某些原因,它们的索引散布在0到150,000范围内,所以length为150,001), 并且如果使用适当的安全措施,如hasOwnProperty和检查属性名称是真正的数字(请参阅上面的链接), for..in可以是一个完全合理的方法来避免大量不必要的循环,因为只有已填充的索引才会被枚举。


jQuery.each()

jQuery.each()

jQuery.each(array, callback)

数组迭代

jQuery.each(array, function(Integer index, Object value){});

对象迭代

jQuery.each(object, function(string propertyName, object propertyValue){});

example:

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这里不需要jquery只是for循环的工作:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}
链接地址: http://www.djcxy.com/p/4203.html

上一篇: How to loop through array in jQuery?

下一篇: Which web browsers natively support Array.forEach()