JavaScript สำหรับ ... ในเทียบกับ

คุณคิดว่ามีความแตกต่างใหญ่สำหรับ ... ในและสำหรับลูปหรือไม่? คุณชอบใช้ "ทำไม" และทำไม?

สมมติว่าเรามีอาร์เรย์ที่เชื่อมโยงกัน:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

ดังนั้นเราจึงสามารถย้ำ:

for (var i = 0; i < myArray.length; i++)

และ:

for (var i in myArray)

ฉันไม่เห็นความแตกต่างใหญ่ มีปัญหาเรื่องประสิทธิภาพหรือไม่

ตัวเลือกควรเป็นไปตามสำนวนที่เข้าใจได้ดีที่สุด

อาร์เรย์มีการทำซ้ำโดยใช้:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

วัตถุที่ใช้เป็นอาเรย์แบบเชื่อมโยงถูกทำซ้ำโดยใช้:

for (var key in o)
  //do stuff with o[key]

หากคุณไม่มีเหตุผลที่ทำให้โลกแตกให้ยึดติดกับรูปแบบการใช้งานที่กำหนดไว้

Douglas Crockford แนะนำ JavaScript: The Good Parts (หน้า 24) เพื่อหลีกเลี่ยงการใช้for inคำสั่ง

หากคุณใช้for inการวนลูปมากกว่าชื่อคุณสมบัติในวัตถุผลลัพธ์จะไม่ถูกเรียงลำดับ แย่ลง: คุณอาจได้รับผลลัพธ์ที่ไม่คาดคิด; มันรวมสมาชิกที่สืบทอดจากเชนต้นแบบและชื่อของเมธอด

ทุกอย่าง .hasOwnPropertyแต่คุณสมบัติสามารถกรองออกมาด้วย ตัวอย่างโค้ดนี้ทำในสิ่งที่คุณอาจต้องการในตอนแรก:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - ผู้ใช้ jQuery

each(callback)วิธีการของ jQuery ใช้การfor( ; ; )วนซ้ำตามค่าเริ่มต้นและจะใช้for( in ) เฉพาะในกรณีที่ความยาวของมันundefinedในกรณีที่ความยาวของมัน

ดังนั้นฉันจะบอกว่ามันปลอดภัยที่จะถือว่าลำดับที่ถูกต้องเมื่อใช้ฟังก์ชั่นนี้

ตัวอย่าง :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

ข้อเสียของการใช้สิ่งนี้คือถ้าคุณกำลังทำตรรกะที่ไม่ใช่ UI ฟังก์ชันของคุณจะไม่สามารถพกพาไปยังเฟรมเวิร์กอื่นได้น้อยลง each()ฟังก์ชั่นที่ดีที่สุดอาจจะถูกสงวนไว้สำหรับการใช้งานกับตัวเลือก jQuery และfor( ; ; )อาจจะแนะนำให้เลือกเป็นอย่างอื่น

มีความแตกต่างด้านประสิทธิภาพขึ้นอยู่กับประเภทของลูปที่คุณใช้และเบราว์เซอร์ใด

ตัวอย่างเช่น

for (var i = myArray.length-1; i >= 0; i--)

เร็วกว่าเบราว์เซอร์บางตัวเกือบสองเท่ากว่า:

for (var i = 0; i < myArray.length; i++)

อย่างไรก็ตามถ้าอาร์เรย์ของคุณมีขนาดใหญ่หรือคุณวนลูปมันอย่างต่อเนื่องทั้งหมดนั้นจะเร็วพอ ฉันสงสัยอย่างจริงจังว่าการวนรอบอาเรย์เป็นคอขวดในโครงการของคุณ (หรือสำหรับโครงการอื่น ๆ สำหรับเรื่องนั้น)

โปรดทราบว่าวิธี Array.forEach ดั้งเดิมได้รับการสนับสนุนอย่างกว้างขวางแล้ว

คำตอบที่ได้รับการอัปเดตสำหรับเบราว์เซอร์หลักทุกรุ่นในปัจจุบันปี 2555 - Chrome, Firefox, IE9, Safari และ Opera รองรับอาร์เรย์ดั้งเดิมของ ES5 สำหรับแต่ละรุ่น

นอกจากว่าคุณจะมีเหตุผลบางอย่างที่จะรองรับ IE8 โดยพื้นฐาน (โปรดจำไว้ว่า ES5-shim หรือ Chrome frame สามารถให้แก่ผู้ใช้เหล่านี้ซึ่งจะให้สภาพแวดล้อม JS ที่เหมาะสม) มันสะอาดกว่าการใช้ไวยากรณ์ที่เหมาะสมของภาษา:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

เอกสารฉบับเต็มสำหรับ array.forEach () อยู่ที่ MDN

ทั้งสองไม่เหมือนกันเมื่ออาเรย์เบาบาง

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

ใช้ forEach เพื่อข้ามโซ่ต้นแบบ

เพียงแค่ภาคผนวกสั้น ๆ ของ@ nailer คำตอบด้านบนการใช้ forEach with Object.keys หมายความว่าคุณสามารถหลีกเลี่ยงการวนซ้ำของเชนต้นแบบโดยไม่ต้องใช้ hasOwnProperty

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

ฉันมีความคิดเห็นที่สองว่าคุณควรเลือกวิธีการทำซ้ำตามความต้องการของคุณ ฉันขอแนะนำให้คุณจริงไม่เคยห่วงผ่านพื้นเมืองArrayที่มีfor inโครงสร้าง มันเป็นวิธีที่ช้าลงและตามที่ Chase Seibert ชี้ไปที่ช่วงเวลาที่ผ่านมาไม่เข้ากันกับกรอบงานต้นแบบ

มีเกณฑ์มาตรฐานที่ยอดเยี่ยมในรูปแบบลูปที่แตกต่างกันซึ่งคุณควรพิจารณาอย่างยิ่งหากคุณทำงานกับ JavaScriptมาตรฐานในรูปแบบวนลูปที่แตกต่างกันอย่างที่คุณควรจะดูที่ถ้าคุณทำงานกับจาวาสคริปต์อย่าทำการปรับให้เหมาะสม แต่เนิ่น ๆ แต่คุณควรเก็บสิ่งนั้นไว้ที่ด้านหลังหัวของคุณ

ฉันจะใช้for inเพื่อรับคุณสมบัติทั้งหมดของวัตถุซึ่งมีประโยชน์อย่างยิ่งเมื่อทำการดีบักสคริปต์ของคุณ ตัวอย่างเช่นฉันต้องการให้บรรทัดนี้มีประโยชน์เมื่อฉันสำรวจวัตถุที่ไม่คุ้นเคย:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

มันทิ้งเนื้อหาของวัตถุทั้งหมด (รวมถึงเมธอดเมธอด) ไปยังบันทึก Firebug ของฉัน มีประโยชน์มาก

นี่คือสิ่งที่ฉันทำ

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

นี่คือวิธีที่คุณใช้มัน
จะทำงานในอาร์เรย์และวัตถุ (เช่นรายการองค์ประกอบ HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

ฉันเพิ่งทำสิ่งนี้ดังนั้นฉันจึงเปิดรับข้อเสนอแนะ :)

ฉันจะใช้วิธีการต่าง ๆ ตามวิธีที่ฉันต้องการอ้างอิงรายการ

ใช้ foreach หากคุณต้องการรายการปัจจุบัน

ใช้สำหรับหากคุณต้องการให้ตัวทำดัชนีทำการเปรียบเทียบแบบสัมพันธ์กัน (เช่นนี้จะเปรียบเทียบกับรายการก่อนหน้า / ถัดไปได้อย่างไร)

ฉันไม่เคยสังเกตเห็นความแตกต่างของประสิทธิภาพการทำงาน ฉันรอจนกว่าจะมีปัญหาเรื่องประสิทธิภาพก่อนที่จะกังวลเกี่ยวกับเรื่องนี้

ด้วยสำหรับ (var ฉันใน myArray)คุณสามารถห่วงมากกว่าวัตถุมากเกินไปผมจะมีชื่อที่สำคัญและคุณสามารถเข้าถึงสถานที่ให้บริการผ่านทางmyArray [ผม] นอกจากนี้วิธีการใด ๆ ที่คุณจะเพิ่มลงในวัตถุนั้นจะรวมอยู่ในลูปด้วยเช่นถ้าคุณใช้กรอบภายนอกเช่น jQuery หรือต้นแบบหรือถ้าคุณเพิ่มวิธีลงในต้นแบบของวัตถุโดยตรง ณ จุดหนึ่งฉันจะชี้ไปที่ วิธีการเหล่านั้น

ระวัง!

หากคุณมีแท็กสคริปต์หลายแท็กและคุณกำลังค้นหาข้อมูลในแอตทริบิวต์แท็กคุณต้องใช้คุณสมบัติ. ความยาวพร้อมกับลูป for เนื่องจากไม่ใช่อาร์เรย์แบบง่าย ๆ แต่เป็นวัตถุ HTMLCollection

https://developer.mozilla.org/en/DOM/HTMLCollection

ถ้าคุณใช้คำสั่ง foreach สำหรับ (var i ใน yourList) มันจะคืนค่าการประท้วงและวิธีการของ HTMLCollection ในเบราว์เซอร์ส่วนใหญ่!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

แม้ว่า getElementsByTagName ควรส่งคืน NodeList แต่เบราว์เซอร์ส่วนใหญ่จะคืนค่า HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

สำหรับ in loops on Arrays เข้ากันไม่ได้กับ Prototype หากคุณคิดว่าคุณอาจจำเป็นต้องใช้ห้องสมุดดังกล่าวในอนาคตมันจะเป็นการเหมาะสมสำหรับลูป

http://www.prototypejs.org/api/array

ฉันเคยเห็นปัญหาเกี่ยวกับ "สำหรับแต่ละคน" โดยใช้วัตถุและต้นแบบและอาร์เรย์

ความเข้าใจของฉันคือว่าสำหรับแต่ละคนมีคุณสมบัติของวัตถุและไม่อาร์เรย์

หากคุณต้องการเพิ่มความเร็วรหัสของคุณจริง ๆ แล้วล่ะ

for( var i=0,j=null; j=array[i++]; foo(j) );

มันค่อนข้างมีตรรกะแบบ while ในคำสั่ง for และซ้ำซ้อนน้อยลง นอกจากนี้ firefox ยังมี Array.forEach และ Array.filter

รหัสที่สั้นและดีที่สุดตาม jsperf คือ

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

ใช้ Array () สำหรับ forEach loop เพื่อใช้ประโยชน์จากการขนาน

สำหรับ (;;)สำหรับอาร์เรย์ : [20,55,33]

for..inสำหรับวัตถุ : {x: 20, y: 55: z: 33}

ระวัง!!! ฉันใช้ Chrome 22.0 ใน Mac OS และฉันมีปัญหากับแต่ละไวยากรณ์

ฉันไม่ทราบว่านี่เป็นปัญหาเบราว์เซอร์ปัญหาจาวาสคริปต์หรือข้อผิดพลาดบางอย่างในรหัส แต่มันแปลกมาก ด้านนอกของวัตถุมันทำงานได้อย่างสมบูรณ์แบบ

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

มีความแตกต่างที่สำคัญระหว่างทั้งสอง for-in จะวนซ้ำไปตามคุณสมบัติของวัตถุดังนั้นเมื่อเคสเป็นอาร์เรย์มันจะไม่เพียง แต่วนซ้ำไปตามองค์ประกอบ แต่ยังรวมถึงฟังก์ชัน "ลบ" ด้วย

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

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

if(myArray.hasOwnProperty(i))คุณสามารถใช้สำหรับในที่มี ยังคงเมื่อทำซ้ำมากกว่าอาร์เรย์ฉันชอบที่จะหลีกเลี่ยงปัญหานี้และเพียงแค่ใช้คำสั่ง for (;;)

แม้ว่าพวกเขาทั้งสองเหมือนกันมากมีความแตกต่างเล็กน้อย:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

ในกรณีนี้ผลลัพธ์คือ:

มาตรฐานสำหรับลูป:

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

ในขณะที่ในกรณีนี้ผลลัพธ์คือ:

FOR-IN LOOP:

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

คำสั่ง for in อนุญาตให้วนลูปผ่านชื่อของคุณสมบัติทั้งหมดของวัตถุ น่าเสียดายที่มันยังวนซ้ำผ่านสมาชิกทั้งหมดที่สืบทอดผ่านห่วงโซ่ต้นแบบ สิ่งนี้มีผลข้างเคียงที่ไม่ดีในการใช้งานฟังก์ชันเมธอดเมื่อความสนใจอยู่ในข้อมูลสมาชิก