如何在jQuery中遍历数组?

2020/10/11 12:01 · javascript ·  · 0评论

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

 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在包含代码中使用并且要thisforEach回调中使用,则必须要么A)将其粘贴在变量中以便可以在函数中使用它,要么B)将其作为第二个参数传递给forEachsoforEach将其设置为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...infor...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...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); 
});

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

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

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

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

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

您可以使用for()循环:

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

尝试这个:

$.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
  for(var key in substr)
{
     // do something with substr[key];

} 
本文地址:http://javascript.askforanswer.com/ruhezaijqueryzhongbianlishuzu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!