如何在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
,因为迭代函数内, this
将undefined
(严格模式)或全局对象( 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