如何在jQuery中循环数组

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

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

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

我试图从数组中获取所有数据。有人可以引导我进入正确的路径吗?

590

(更新:我的other answer 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的含义没有问题,没有不必要的函数调用开销(例如,在理论中更快,尽管实际上你必须有这么多元素,你有其他问题的可能性;details)。

ES5'sforEach:

从 ECMAScript5 开始,数组上有一个forEach函数,这使得循环遍历数组变得很容易:

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

(注意:还有很多其他函数,而不仅仅是forEach;有关详细信息,请参见the answer referenced above。)

优点:声明,可以使用预构建的函数的迭代器,如果你有一个方便,如果你的循环体是复杂的函数调用的范围有时是有用的,不需要一个i变量在你的包含范围。

缺点:如果您在包含代码中使用this并且您想在forEach回调中使用this>,则可以将其作为第二个参数传递给forEach,因此2将其设置为0

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)
});
(Link to docs)

优点:所有与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));
...orFunction#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循环遍历枚举属性数组的索引(仅)

我应该软化上面的“不要”。如果你正在处理稀疏数组(例如,数组总共有 15 个元素,但由于某种原因,它们的索引分布在 0 到 150,000 的范围内,因此length是 150,001),如果你使用适当的保护措施,如hasOwnProperty,并检查属性名称完全是数字的(见上面的链接)

105

jQuery.each ()

jQuery.each()
jQuery.each(array, callback)

数组迭代

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

对象迭代

jQuery.each(object, function(string propertyName, object propertyValue){});
example:
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.googlea.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

数组的 javascript 循环

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])
}
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);
})
Resources MDN loops and iterators
26

这里不需要 jquery,只是一个for循环工作:

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

选项 1:传统的for循环

基础知识

传统的for循环有三个组件:

初始化:在第一次执行查找块之前执行

条件:每次在执行循环块之前检查一个条件,如果为 false,则退出循环

事后思考:每次执行循环块后都会执行

这三个组件通过;符号彼此分离。这三个组件中每个组件的内容是可选的,这意味着以下是最可能的最小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);
}

使用 tradtionalfor循环遍历数组

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

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

for循环的一种替代方法是while循环。要循环遍历数组,您可以执行以下操作:

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);
}
Option 3:for...inandfor...of

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

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

但是,这应该小心使用,因为它在所有情况下的行为都与传统的for循环不同,并且需要考虑潜在的副作用。有关更多详细信息,请参阅Why is using "for...in" with array iteration a bad idea?

作为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...ofEdge 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);
});

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(96)
AWSEBS:什么是 IOPS
上一篇
ESP32-WROOM-32vs ESP32-WROVER
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(25条)