如何循环遍历 jQuery 中的数组?

IT技术 javascript jquery arrays loops iteration
2021-01-30 13:39:33

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

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

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

6个回答

(更新:我在这里的另一个答案更彻底地列出了非 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)将它作为第二个参数传递给forEachsoforEach将其设置为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意味着其他内容。

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为此使用(或者,如果您这样做,请采取适当的保护措施)。你会看到人们说 to(事实上,这里有一个简单的答案是这样说的),但for..in没有做很多人认为它做的事情(它做了一些更有用的事情!)。具体来说,for..in循环遍历对象的可枚举属性名称(而不是数组的索引)。由于数组是对象,并且默认情况下它们唯一可枚举的属性是索引,因此它似乎主要是在平淡的部署中工作。但这并不是一个安全的假设,您可以将其用于此目的。这是一个探索:http : //jsbin.com/exohi/3

我应该软化上面的“不要”。如果您正在处理稀疏数组(例如,该数组总共有 15 个元素,但由于某种原因它们的索引散布在 0 到 150,000 的范围内,因此length是 150,001),并且如果您使用适当的保护措施,例如hasOwnProperty并检查属性名称实际上是数字(请参阅上面的链接),这for..in是避免大量不必要循环的一种非常合理的方法,因为只会枚举填充的索引。

嗯 ++i 或 i++
2021-03-29 13:39:33
@DougS:不,i++之间的唯一区别++i是该表达式的结果,上面的示例中从未使用过。一个for循环是这样的:1.初始化,2.测试(终止如果假),3.身体4.更新,5,回到步骤2的更新表达式的结果不用于任何东西。
2021-03-30 13:39:33
使用.each()for...in循环遍历数组通常是一个坏主意。这就像年龄比使用fororwhile使用 a在循环之前for loop缓存length属性甚至是一个好主意for (var i = 0, len = substr.length; i < len; ...
2021-04-11 13:39:33
@jAndy:我相信我确实提到速度是第一个的优势。重新缓存的长度,它必须是一个真正的大阵是值得的开销,但公平的“这份厚礼。
2021-04-12 13:39:33
@MikePurcell:或者箭头函数。或者Function#bind:-) 好点,补充说。
2021-04-12 13:39:33

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

基础

传统的for循环包含三个组件:

  1. 初始化:在第一次执行look块之前执行
  2. 条件:每次执行循环块之前检查一个条件,如果为假则退出循环
  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-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]);
}

然而,有许多变化是可能的,例如。这个 :

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

但是,这应该谨慎使用,因为它for在所有情况下的行为都与传统的-loop 不同,并且需要考虑潜在的副作用。请参阅为什么在数组迭代中使用“for...in”是个坏主意?更多细节。

作为 的替代for...in,现在还有 for 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...ofEdge 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); 
});