我试图遍历一个数组。我有以下代码：

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

我正在尝试从数组中获取所有数据。有人可以带领我走上正确的道路吗？

（更新：我在这里的另一个答案更加彻底地列出了非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在包含作用域中不需要变量。

缺点：如果要this在包含代码中使用并且要this在forEach回调中使用，则必须要么A）将其粘贴在变量中以便可以在函数中使用它，要么B）将其作为第二个参数传递给forEachso forEach将其设置为this回调期间，或C）使用ES2015 + 箭头函数（该函数关闭）this。如果您不做任何事情之一，则回调this将undefined在严格模式下或全局对象（window）处于松散模式。曾经有一个第二个缺点forEach是不被普遍支持，但是在2018年，您要运行的唯一没有这个浏览器的forEach是IE8（并且它无法正常运行） 都填满）。

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意味着函数中还有其他用途。

您可以使用以下方法避免发生这种this情况$.proxy：

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

例如：

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

对于

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

每次

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

资源资源

MDN循环和迭代器

这里不需要jquery，只需for循环即可：

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

选项1：传统的for循环

基础

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

1. 初始化：在第一次执行look块之前执行
2. 条件：每次执行循环块之前都要检查条件，如果为false则退出循环
3. 事后思考：循环块执行后每次执行

这三个组件之间用;符号分隔。这三个组件中的每一个的内容都是可选的，这意味着以下是for可能的最小循环：

for (;;) {
    // Do stuff
}

当然，您需要在该-loop 内添加if(condition === true) { break; } 或if(condition === true) { return; }，for以使其停止运行。

通常，尽管如此，初始化用于声明索引，条件用于将索引与最小值或最大值进行比较，事后才用于增加索引：

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-loop

for-loop的一种替代方法是while-loop。要遍历数组，可以执行以下操作：

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

像传统的for-loops 一样，while即使最古老的浏览器也支持-loops。

同样，每个while循环都可以重写为for-loop。例如，上述while-loop的行为与该for-loop 完全相同：

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

选项3：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-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);
});

使用each()jQuery 的功能。

这是一个例子：

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

使用jQuery each()。还有其他方法，但是每种方法都是为此目的而设计的。

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

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

您可以使用for()循环：

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

具有箭头功能和插值功能的ES6语法：

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

试试这个：

$.grep(array, function(element) {

})

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

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