如何在jQuery中循环使用数组？

（更新：我在这里的另一个答案更彻底地列出了非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

缺点：如果您在包含代码中使用，并且想要在回调中使用，则必须A）将其粘贴在变量中，以便您可以在函数中使用它，B）将其作为第二个参数传递以在回调期间进行设置，或C）使用ES2015 +箭头函数， 它关闭了。如果不执行其中一项操作，则在回调中将（在严格模式下）或全局对象（）在松散模式下。曾经有第二个缺点没有得到普遍支持，但是在2018年，你会遇到的唯一一个没有的浏览器是IE8（它也不能在那里正确填充）。thisthisforEachforEachforEachthisthisthisundefinedwindowforEachforEach

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

(链接到文档)

优点：所有优点都与 ，加上您知道它在那里，因为您正在使用jQuery。forEach

缺点：如果你在包含代码中使用，你必须把它贴在一个变量中，这样你才能在函数中使用它，因为这意味着函数中的其他东西。thisthis

不过，您可以通过使用$.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)
});

不该做什么：

不要用于此目的（或者，如果您这样做，请采取适当的保护措施）。你会看到人们说（事实上，这里简要地有一个答案说），但没有做许多人认为它做的事情（它做了更有用的事情！具体而言，循环遍历对象的可枚举属性名称（而不是数组的索引）。由于数组是对象，并且默认情况下它们唯一可枚举的属性是索引，因此它似乎主要在平淡的部署中起作用。但这不是一个安全的假设，你可以用它来做到这一点。这是一个探索：http://jsbin.com/exohi/3for..infor..infor..in

我应该软化上面的“不要”。如果您正在处理稀疏数组（例如，数组总共有15个元素，但由于某种原因，它们的索引散布在0到150，000的范围内，因此是150，001），并且如果您使用适当的保护措施，例如并检查属性名称是否确实是数字（请参阅上面的链接），则可以完全合理地避免大量不必要的循环， 因为只会枚举填充的索引。lengthhasOwnPropertyfor..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
}

forEach

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

资源

MDN 循环和迭代器