如何循环通过jQuery数组?

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

 var currnt_image_list= '21,32,234,223';
var substr = currnt_image_list.split(','); // array here

我试图把所有的数据从数组。有谁能指引我正确的道路吗?

894883 次浏览

使用jQuery的each()函数。

这里有一个例子:

$.each(currnt_image_list.split(','), function(index, value) {
alert(index + ': ' + value);
});

你可以使用for()循环:

var things = currnt_image_list.split(',');
for(var i = 0; i < things.length; i++) {
//Do things with things[i]
}

这里不需要jquery,只需要for循环即可:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
alert(substr[i]);
}

jQuery.each ()

jQuery.each()

jQuery.each(array, callback)

数组的迭代

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

对象的迭代

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

例子:

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>

javascript loops for array

for loop

for (initialExpression; condition; incrementExpression)
statement

例子

var substr = [1, 2, 3, 4];


//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
console.log("loop", substr[i])
}


//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
console.log("reverse", substr[i])
}


//step loop
for(var i = 0; i < substr.length; i+=2) {
console.log("step", substr[i])
}

因为在

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
console.log(substr[i]) //note i returns index
}

对的

for(var i of subs) {
//can use break;
console.log(i); //note i returns value
}

forEach

substr.forEach(function(v, i, a){
//cannot use break;
console.log(v, i, a);
})

资源

MDN循环和迭代器


(更新:我的另一个答案布局非jquery选项更彻底。但下面的第三个选项jQuery.each不在其中。)


四个选项:

通用的循环:

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

或在ES2015+:

for (let 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变量。

this2:如果你在包含的代码中使用this,并且你想在你的forEach回调中使用this,你必须A)将它插入一个变量中,这样你就可以在函数中使用它,B)将它作为第二个参数传递给forEach,这样forEach在回调期间将它设置为this,或者C)使用ES2015+ this3,它在this上关闭。如果你不做其中一件事,在回调中this将是undefined(严格模式)或松散模式下的全局对象(window)。以前的第二个缺点是forEach不被普遍支持,但在2018年,你会遇到的唯一没有forEach的浏览器是IE8(它也不能用this4填充)。

ES2015 + for-of:

for (const s of substr) { // Or `let` if you want to modify it in the loop body
// do something with `s`
}

请参阅这个答案顶部的答案链接,了解如何工作的详细信息。

优势:简单,直接,为数组中的条目提供了一个包含作用域的变量(或常量,如上所示)。

缺点:在任何IE版本中都不支持。

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()。还有其他方法,但每一种都是为这个目的而设计的。

$.each(substr, function(index, value) {
alert(value);
});

不要在最后一个数字后面加逗号。

选项1:传统的for-loop

最基本的

传统的for-loop有三个组件:

  1. 初始化:在第一次执行look块之前执行
  2. 条件:每次在循环块执行之前都会检查一个条件,如果为false则退出循环
  3. 事后的想法:在每次循环块执行后执行

这三个组件由;符号彼此分隔。这三个组件的内容都是可选的,这意味着下面是最精简的__abc1 -循环:

for (;;) {
// Do stuff
}

当然,你需要在__abc2 -循环中包含if(condition === true) { break; }if(condition === true) { return; }来让它停止运行。

不过,初始化通常用于声明索引,条件用于将该索引与最小值或最大值进行比较,事后考虑用于增加索引:

for (var i = 0, length = 10; i < length; i++) {
console.log(i);
}

使用传统的for-loop循环遍历数组

循环数组的传统方法是这样的:

for (var i = 0, length = myArray.length; i < length; i++) {
console.log(myArray[i]);
}

或者,如果你喜欢向后循环,你可以这样做:

for (var i = myArray.length - 1; i > -1; i--) {
console.log(myArray[i]);
}

然而,有很多可能的变化,如eg。这个:

for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
console.log(value);
}

... 或者这个…

var i = 0, length = myArray.length;
for (; i < length;) {
console.log(myArray[i]);
i++;
}

... 或者这个:

var key = 0, value;
for (; value = myArray[key++];){
console.log(value);
}

哪种效果最好,很大程度上取决于个人品味和您正在实现的特定用例。

注意:

所有浏览器都支持这些变体,包括véry旧浏览器!


选项2:while-loop

for-loop的一个替代方法是while-loop。要遍历一个数组,你可以这样做:

var key = 0;
while(value = myArray[key++]){
console.log(value);
}
注意:

像传统的__abc0 -循环一样,即使是最古老的浏览器也支持__abc1 -循环。

而且,每个while循环都可以重写为for-loop。例如,上面的while-loop与这个for-loop的行为完全相同:

for(var key = 0;value = myArray[key++];){
console.log(value);
}

选项3:for...infor...of

在JavaScript中,你也可以这样做:

for (i in myArray) {
console.log(myArray[i]);
}

然而,这应该谨慎使用,因为它在所有情况下都不像传统的__abc0 -循环那样表现,并且需要考虑潜在的副作用。详见为什么用"数组迭代是个坏主意?< / >

作为< >强for...in < / >强的替代,现在还有< >强for...of < / >强。下面的例子显示了for...of循环和for...in循环之间的区别:

var myArray = [3, 5, 7];
myArray.foo = "hello";


for (var i in myArray) {
console.log(i); // logs 0, 1, 2, "foo"
}


for (var i of myArray) {
console.log(i); // logs 3, 5, 7
}
注意:

你还需要考虑到没有任何版本的ie浏览器支持for...of (< >强边缘12 + < / >强支持),并且for...in至少需要IE10。


选项4:< >强Array.prototype.forEach() < / >强

For-loops的替代方法是Array.prototype.forEach(),它使用以下语法:

myArray.forEach(function(value, key, myArray) {
console.log(value);
});
注意:

Array.prototype.forEach()被所有现代浏览器以及IE9+所支持。


选项5:< >强jQuery.each() < / >强

除了上面提到的四个选项之外,jQuery还有自己的foreach变体。

它使用以下语法:

$.each(myArray, function(key, value) {
console.log(value);
});

通过数组/字符串迭代的替代方法有副作用

var str = '21,32,234,223';
var substr = str.split(',');


substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined


substr.every(x=> { console.log('every',x); return true}) // return true


substr.some(x=> { console.log('some',x); return false})  // return false


substr.map(x=> console.log('map',x));                    // return array
 

str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string

带有箭头函数和插值的ES6语法:

var data=["a","b","c"];
$(data).each((index, element) => {
console.log(`current index : ${index} element : ${element}`)
});

试试这个:

$.grep(array, function(element) {


})
  for(var key in substr)
{
// do something with substr[key];


}

美元. map(数据、函数(elem){…})

$.map(data,function(elem){
console.log(elem);
})