ฉันพยายามที่จะวนรอบอาร์เรย์ ฉันมีรหัสต่อไปนี้:

 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ดูคำตอบที่อ้างถึงข้างต้นสำหรับรายละเอียด)

ข้อดี : การประกาศสามารถใช้ฟังก์ชัน prebuilt สำหรับตัววนซ้ำถ้าคุณมีประโยชน์ถ้าตัวลูปของคุณซับซ้อนการกำหนดขอบเขตของการเรียกฟังก์ชันบางครั้งก็มีประโยชน์ไม่จำเป็นต้องมีiตัวแปรในขอบเขตที่มี

ข้อเสีย : ถ้าคุณใช้thisในรหัสที่มีและคุณต้องการใช้thisในการforEachติดต่อกลับของคุณคุณต้อง A) ติดไว้ในตัวแปรเพื่อให้คุณสามารถใช้มันในฟังก์ชั่น B) ผ่านมันเป็นอาร์กิวเมนต์ที่สองเพื่อforEachให้forEachชุดว่ามันเป็นthisช่วงโทรกลับหรือ C) ใช้ ES2015 + ลูกศรฟังก์ชั่นthisซึ่งปิดมากกว่า หากคุณไม่ได้ทำสิ่งใดสิ่งหนึ่งเหล่านั้นในการติดต่อกลับthisจะเป็นundefined(ในโหมดเข้มงวด) หรือวัตถุทั่วโลก ( window) ในโหมดหลวม เคยมีข้อเสียที่สองซึ่งforEachไม่รองรับในระดับสากล แต่ที่นี่ในปี 2018 เบราว์เซอร์เดียวที่คุณจะพบซึ่งไม่มีforEachคือ IE8 (และไม่สามารถทำได้อย่างถูกต้อง polyfilled ตรงนั้น)

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 (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. การเริ่มต้น:ดำเนินการก่อนที่บล็อกการค้นหาจะดำเนินการในครั้งแรก
2. เงื่อนไข:ตรวจสอบเงื่อนไขทุกครั้งก่อนดำเนินการบล็อกลูปและออกจากลูปหากเป็นเท็จ
3. ภายหลัง:ดำเนินการทุกครั้งหลังจากดำเนินการบล็อกลูป

ส่วนประกอบทั้งสามนี้แยกจากกันโดยใช้;สัญลักษณ์ เนื้อหาสำหรับแต่ละองค์ประกอบทั้งสามนี้เป็นตัวเลือกซึ่งหมายความว่าสิ่งต่อไปนี้เป็นส่วนที่เล็กที่สุดที่forเป็นไปได้:

for (;;) {
    // Do stuff
}

แน่นอนว่าคุณจะต้องรวมif(condition === true) { break; } สิ่งif(condition === true) { return; }ใดสิ่งหนึ่งไว้ข้างในนั้นforเพื่อให้มันหยุดทำงาน

โดยทั่วไปแม้ว่าการกำหนดค่าเริ่มต้นจะใช้ในการประกาศดัชนีเงื่อนไขที่ใช้ในการเปรียบเทียบดัชนีนั้นกับค่าต่ำสุดหรือค่าสูงสุดและใช้ภายหลังเพื่อเพิ่มดัชนี:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

การใช้ tradtional 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 แบบดั้งเดิม-loops whileได้รับการสนับสนุนแม้กระทั่งเบราว์เซอร์ที่เก่าแก่ที่สุด

นอกจากนี้ทุกวงในขณะที่สามารถเขียนใหม่เป็นfor-loop ตัวอย่างเช่นwhile-loop hereabove จะทำงานในลักษณะเดียวกันกับfor-loop นี้:

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

ตัวเลือก 3: for...inและfor...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...of( Edge 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); 
});

ใช้ each()jQuery มีวิธีอื่น ๆ แต่แต่ละวิธีออกแบบมาเพื่อจุดประสงค์นี้

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

และอย่าใส่เครื่องหมายจุลภาคหลังตัวเลขสุดท้าย

คุณสามารถใช้การfor()วนซ้ำ:

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

ไวยากรณ์ ES6 พร้อมฟังก์ชันลูกศรและการแก้ไข:

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

ลองสิ่งนี้:

$.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