foreach - วนลูป For..In ใน JavaScript - คีย์ ค่าคู่

ฉันสงสัยว่ามีวิธีทำอะไรบางอย่างเหมือนกับลูป foreach ของ PHP ใน JavaScript หรือไม่ ฟังก์ชันที่ฉันกำลังมองหาคืออะไรบางอย่างเหมือนกับ PHP Snippet นี้:

foreach($data as $key => $value) { }

ฉันกำลังดูที่ลูป JS for..in แต่ดูเหมือนว่าจะไม่มีวิธีระบุ as ถ้าฉันทำแบบนี้ด้วยลูป for 'ปกติ' (for(var i=0; i < data.length; i++) มีวิธีที่จะดึงคู่ key => value ไหม?

คำตอบ #1

for (var k in target){
    if (target.hasOwnProperty(k)) {
         alert("Key is " + k + ", value is " + target[k]);
    }
}

hasOwnProperty ใช้เพื่อตรวจสอบว่า target ของคุณมีคุณสมบัตินั้นจริง ๆ หรือไม่ แทนที่จะสืบทอดมาจากโปรโตไทป์ของมัน วิธีที่ง่ายกว่านิดหน่อยคือ:

for (var k in target){
    if (typeof target[k] !== 'function') {
         alert("Key is " + k + ", value is" + target[k]);
    }
}

มันเพียงแค่ตรวจสอบว่า k ไม่ใช่วิธีการ (เหมือนกับว่า target เป็น array คุณจะได้รับการแจ้งเตือนเกี่ยวกับวิธีการมากมาย เช่น indexOf, push, pop, เป็นต้น)

คำตอบ #2

ถ้าคุณสามารถใช้ ES6 ได้โดยตรงหรือผ่าน Babel (คอมไพเลอร์ js) คุณก็สามารถทำตามนี้ได้:

const test = {a: 1, b: 2, c: 3};

for (const [key, value] of Object.entries(test)) {
  console.log(key, value);
}

ซึ่งจะพิมพ์ผลลัพธ์นี้ออกมา:

a 1
b 2
c 3

เมทอด Object.entries() จะคืนค่าอาเรย์ของคู่ [key, value] ซึ่งเป็นคุณสมบัติที่สามารถนับได้ของอ็อบเจ็กต์ที่กำหนด ตามลำดับเดียวกับที่ `for...in` ลูปให้ (ความแตกต่างคือ for-in ลูปจะนับคุณสมบัติในโพรโทไทป์เชนด้วย)

• เอกสารประกอบของ Object.entries
• เอกสารประกอบ for...of
• เอกสารประกอบการมอบหมายการแยกโครงสร้าง
• เอกสารเกี่ยวกับความสามารถในการนับและความเป็นเจ้าของของสมบัติ

คำตอบ #3

ยังไม่มีใครพูดถึง Object.keys ดังนั้นฉันจะพูดถึงมันเอง

Object.keys(obj).forEach(function (key) {
   // do something with obj[key]
});

คำตอบ #4

for...in จะทำงานให้คุณ

for( var key in obj ) {
  var value = obj[key];
}

ใน JavaScript สมัยใหม่คุณก็สามารถทำแบบนี้ได้เช่นกัน:

for ( const [key,value] of Object.entries( obj ) ) {

}

คำตอบ #5

var obj = {...};
for (var key in obj) {
    var value = obj[key];

}

ไวยากรณ์ของ PHP เป็นแค่สิ่งที่ช่วยให้สะดวกขึ้น

คำตอบ #6

ฉันสมมติว่าคุณรู้ว่า i คือกุญแจ และคุณสามารถได้ค่าผ่าน data[i] (และแค่ต้องการทางลัดสำหรับสิ่งนี้)

ECMAScript5 แนะนำ forEach ^[MDN] สำหรับอาร์เรย์ (ดูเหมือนว่าคุณมีอาร์เรย์):

data.forEach(function(value, index) {

});

เอกสาร MDN จัดเตรียม shim สำหรับเบราว์เซอร์ที่ไม่รองรับมัน

แน่นอนว่าสิ่งนี้ใช้กับวัตถุไม่ได้ แต่คุณสามารถสร้างฟังก์ชันที่คล้ายกันสำหรับวัตถุเหล่านั้นได้:

function forEach(object, callback) {
    for(var prop in object) {
        if(object.hasOwnProperty(prop)) {
            callback(prop, object[prop]);
        }
    }
}

เนื่องจากคุณติดป้ายคำถามด้วย jquery, jQuery ให้ $.each ^[docs] ซึ่งวนซ้ำทั้งโครงสร้าง array และ object

คำตอบ #7

มีสามตัวเลือกในการจัดการกับคีย์และค่าของอ็อบเจ็กต์:

1. เลือกค่าต่างๆ:

   Object.values(obj).forEach(value => ...);
   

2. เลือกปุ่ม:

   Object.keys(obj).forEach(key => ...);
   

3. เลือกคีย์และค่าต่างๆ:

   Object.entries(obj).forEach(([key, value]) => ...);
   

คำตอบ #8

for (var key in myMap) {
    if (myMap.hasOwnProperty(key)) {
        console.log("key =" + key);
        console.log("value =" + myMap[key]);
    }
}

ในจาวาสคริปต์ วัตถุแต่ละอันมีชุดคู่คีย์-ค่าในตัวที่มีข้อมูลเมตา เมื่อคุณวนลูปผ่านคู่คีย์-ค่าทั้งหมดของวัตถุ คุณก็จะวนลูปผ่านพวกมันด้วย การใช้ hasOwnProperty() จะกรองสิ่งเหล่านี้ออกไป