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

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

我试图把所有的数据从数组。有谁能指引我正确的道路吗?


当前回答


(更新:我的另一个答案在这里更彻底地列出了非jquery选项。下面的第三个选项是jQuery。不过,它们都不在里面。)


四个选项:

通用的循环:

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,易于理解,在循环体中保留其含义没有问题,没有不必要的函数调用开销(例如,理论上更快,尽管实际上你必须有这么多元素,可能会有其他问题;详细信息)。

ES5«forEach操作:

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

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

链接到文档

(注意:还有很多其他函数,不仅仅是forEach;详见上面的答案。)

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

Disadvantages: If you're using this in the containing code and you want to use this within your forEach callback, you have to either A) Stick it in a variable so you can use it within the function, B) Pass it as a second argument to forEach so forEach sets it as this during the callback, or C) Use an ES2015+ arrow function, which closes over this. If you don't do one of those things, in the callback this will be undefined (in strict mode) or the global object (window) in loose mode. There used to be a second disadvantage that forEach wasn't universally supported, but here in 2018, the only browser you're going to run into that doesn't have forEach is IE8 (and it can't be properly polyfilled there, either).

ES2015 +的的:

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。

缺点:如果你在包含它的代码中使用它,你必须把它放在一个变量中,这样你就可以在函数中使用它,因为这意味着在函数中有其他的东西。

你可以通过使用$.proxy来避免这个事情:

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

...或函数绑定:

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

不要做什么:

Don't use for..in for this (or if you do, do it with proper safeguards). You'll see people saying to (in fact, briefly there was an answer here saying that), but for..in does not do what many people think it does (it does something even more useful!). Specifically, for..in loops through the enumerable property names of an object (not the indexes of an array). Since arrays are objects, and their only enumerable properties by default are the indexes, it mostly seems to sort of work in a bland deployment. But it's not a safe assumption that you can just use it for that. Here's an exploration: http://jsbin.com/exohi/3

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

其他回答

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

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

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

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) { 控制台.log(索引,值) }); 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]; //从0索引循环到最大索引 For (var I = 0;I < substr.length;我+ +){ console.log(“循环”,substr(我)) } / /反向循环 For (var I = substr.length-1;I >= 0;我(){ console.log(“反向”,substr(我)) } / /步骤循环 For (var I = 0;I < substr.length;我+ = 2){ console.log(“一步”,substr(我)) }

因为在

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

这里不需要jquery,只需要一个for循环即可:

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

选项1:传统的for循环

最基本的

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

初始化:在第一次执行look块之前执行 condition:每次循环块执行前都会检查一个条件,如果为false则退出循环 事后考虑:每次循环块执行后执行

这三个组成部分被a隔开;的象征。这三个组件中的每一个的内容都是可选的,这意味着下面是最简单的for循环:

for (;;) {
    // Do stuff
}

当然,你需要包含一个if(condition === true) {break;}或if(condition === true){返回;}在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]);
}

然而,有很多可能的变化,如eg。这个:

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

哪种效果最好,很大程度上取决于个人品味和您正在实现的特定用例。

注意:

所有浏览器都支持这些变体,包括véry旧浏览器!


选项2:while循环

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

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

注意:

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

而且,每个while循环都可以重写为for循环。例如,上面的while循环与For循环的行为完全相同:

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

选项3:用于……在

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

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

但是,应该谨慎使用,因为它在所有情况下的行为都与传统的for循环不同,并且需要考虑潜在的副作用。参见为什么要用“for…”在“数组迭代是个坏主意?”欲知详情。

作为……的替代方案In,还有for for…of。下面的例子显示了一个for…循环和for…循环中:

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
}

注意:

你还需要考虑到没有任何版本的ie浏览器支持……的(Edge 12+),对于…要求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);
});

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

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