如何在jQuery中循环遍历数组？

Question

我正在尝试循环遍历一个数组。我有以下代码：

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

我尝试获取数组中的所有数据，请问有谁能指点我正确的方向吗？

- Rickstar

Answer 1

---

（更新：我的其他答案在这里更详细地列出了非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”的含义，没有不必要的函数调用开销（例如，在理论上更快，但实际上您必须拥有如此多的元素，以至于可能会遇到其他问题; details）。

ES5的forEach： 从ECMAScript5开始，数组有一个forEach函数，可以轻松地遍历数组。

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

链接到文档

（注意：还有很多其他功能，不仅仅是forEach；请参见上面提到的答案以获取详细信息。）

优点：声明式，如果您有一个方便的预构建函数用于迭代器，则可以使用该函数；如果您的循环体很复杂，则函数调用的作用域有时很有用；在外部范围中不需要i变量。

缺点: 如果你在包含代码中使用this，并且你想在forEach回调函数中使用this，你必须要么A）将其放入变量中以便在函数内部使用它，B）将其作为第二个参数传递给forEach，使forEach在回调期间将其设置为this，或C）使用ES2015+的箭头函数，它会闭合this。如果你不做这些事情之一，在回调函数中this将是undefined(在严格模式下)或全局对象(window)(在松散模式下)。曾经有第二个缺点是forEach不是普遍支持的，但是在2018年，你可能遇到的唯一没有forEach的浏览器是IE8(在那里它不能被正确地polyfill)。

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可能是一个完全合理的避免大量不必要循环的方法，因为只有填充的索引将被枚举。

- T.J. Crowder

---

@MikePurcell：或者一个箭头函数。 或 Function#bind。 :-) 很好的观点，已添加。 - T.J. Crowder

hmmmm ++i 或者 i++ - user889030

请纠正我，但你的通用循环示例应该是i++而不是++i，否则你会跳过第一个项目。 - Doug S

@DougS：不，i++和++i之间唯一的区别就是表达式的结果，在上面的例子中从未使用。for循环的工作方式如下：1.初始化，2.测试（如果为假则终止），3.主体，4.更新，5.返回步骤2。更新表达式的结果并没有用于任何事情。 - T.J. Crowder

@Crashalot - forEach 被几乎所有你可能会遇到的东西支持。（它不被 IE8 支持，遗憾的是在 IE8 上无法正确地 polyfill。） - T.J. Crowder

Answer 2

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数组循环

for循环

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])
}

for in

//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 of

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循环和迭代器

- skyfoot

Answer 3

这里不需要使用jQuery，只需要一个for循环即可：

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

- Nick Craver

Answer 4

选项1：传统的for循环

基础知识

传统的for循环有三个组成部分：

1. 初始化：在第一次执行循环块之前执行
2. 条件：每次在执行循环块之前检查条件，如果为假，则退出循环
3. 迭代：在执行循环块后每次执行

这三个组成部分由;符号分隔。每个部分的内容都是可选的，这意味着以下是最简单的for循环：

for (;;) {
    // Do stuff
}

当然，在那个 for 循环中，你需要包含一个 if(condition === true) { break; } 或者 if(condition === true) { return; } 来停止它的运行。

通常情况下，初始化用于声明索引，条件用于将该索引与最小或最大值进行比较，而后置语句用于递增索引：

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

---

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

遍历数组的传统方法如下：

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]);
}

然而，有许多可能的变化，例如这个：

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);
}

无论哪种方法更好，在很大程度上取决于个人品味和您正在实现的具体用例。

注意：

所有这些变体都受到所有浏览器的支持，包括非常老旧的浏览器！

---

选项2：while循环

while循环是for循环的一种替代方法。要遍历一个数组，你可以这样做：

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

注意：

与传统的for循环一样，即使是最古老的浏览器也支持while循环。

此外，每个while循环都可以重写为for循环。例如，上面的while循环与这个for循环的行为完全相同：

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

---

选项三: for...in 和 for...of

在JavaScript中，你也可以这样做：

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

这种方法需要谨慎使用，因为它在某些情况下与传统的for循环不同，并且需要考虑潜在的副作用。请参见为什么使用"for...in"进行数组迭代是个坏主意？以获取更多详细信息。

作为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
}

注意:

还需要考虑到，Internet Explorer 的任何版本都不支持 for...of (Edge 12+ 支持)，而且 for...in 至少需要 IE10。

---

选项 4 ：Array.prototype.forEach()

与For-循环的替代方法是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);
});

- John Slegers

Answer 5

使用jQuery的each()函数。

以下是一个示例：

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

- Romain Linsolas

Answer 6

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

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

- usman tahir

Answer 7

使用jQuery的each()方法。虽然还有其他方法，但是each()方法是专门为此目的设计的。

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

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

- MItrajyoti

Answer 8

您可以使用 for() 循环：

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

- SLaks

Answer 9

试试这个：

$.grep(array, function(element) {

})

- user11390602

---

你好！请添加一些解释说明如何解决 OP 的问题。在 SO 上，通常不鼓励仅发布代码的答案，因为它们无法帮助 OP 或未来的访问者理解答案。谢谢！--来自审核。 - d_kennetz

Answer 10

$.map(data,function(elem) {...})

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

- Leif Neland