เพิ่มคุณสมบัติให้กับอาร์เรย์ของวัตถุ


99

ฉันมีอาร์เรย์ของวัตถุดังที่แสดงด้านล่าง

Object {Results:Array[2]}
     Results:Array[2]
[0-1]
0:Object
       id=1     
       name: "Rick"
1:Object
       id=2     
       name:'david'

ฉันต้องการเพิ่มคุณสมบัติอีกหนึ่งรายการชื่อ Active ให้กับแต่ละองค์ประกอบของอาร์เรย์ของออบเจ็กต์นี้

ผลลัพธ์สุดท้ายควรเป็นดังนี้

Object {Results:Array[2]}
     Results:Array[2]
[0-1]
0:Object
       id=1     
       name: "Rick"
       Active: "false"
1:Object
       id=2     
       name:'david'
       Active: "false"

ใครช่วยบอกฉันหน่อยได้ไหมว่าจะบรรลุเป้าหมายนี้ได้อย่างไร


6
วนรอบอาร์เรย์ เพิ่มคุณสมบัติให้กับแต่ละองค์ประกอบอาร์เรย์ขณะวนลูป ส่วนไหนไม่รู้ทำอย่างไร
JJJ

คำตอบ:


146

คุณสามารถใช้forEachเมธอดเพื่อเรียกใช้ฟังก์ชันที่มีให้หนึ่งครั้งสำหรับแต่ละองค์ประกอบในอาร์เรย์ ในฟังก์ชันที่ให้มานี้คุณสามารถเพิ่มActiveคุณสมบัติให้กับองค์ประกอบได้

Results.forEach(function (element) {
  element.Active = "false";
});

200

หรือใช้ map

Results.map(obj=> ({ ...obj, Active: 'false' }))

แก้ไขเพื่อแสดงความคิดเห็นโดย @adrianolsk เพื่อไม่ให้เกิดการกลายพันธุ์ของต้นฉบับและส่งคืนวัตถุใหม่แทน

อ่านข้อมูลจำเพาะ


4
รองรับเฉพาะใน ES6
Amaynut

5
ES5 ต้องแม่นยำ;) - แต่บาเบลจะถอดรหัสอย่างมีความสุข
sidonaldson

49
แผนที่ควรส่งคืนอาร์เรย์ใหม่ที่ไม่ทำให้วัตถุกลายพันธุ์ในกรณีนี้ forEach จะดีกว่าหรือใช้แผนที่และส่งคืนวัตถุใหม่Results.map(obj=> ({ ...obj, Active : 'false' }))
adrianolsk

4
ทางออกที่ดี @adrianolsk คุณควรส่งเป็นคำตอบแยกต่างหาก
Michael Hays


1

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

ด้วยความช่วยเหลือเล็กน้อยจากความคิดเห็นของ adrianolsk และคำตอบของ sidonaldson ข้างต้นฉันใช้Object.assign ()ผลลัพธ์ของตัวดำเนินการการแพร่กระจายจาก babel ดังนี้:

this.options.map(option => {
  // New properties to be added
  const newPropsObj = {
    newkey1:value1,
    newkey2:value2
  };

  // Assign new properties and return
  return Object.assign(option, newPropsObj);
});

0

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

   Object.keys(Results).forEach(function (key){
            Object.defineProperty(Results[key], "Active", { value: "the appropriate value"});
        });

ใช่แน่นอนมันผ่านออบเจ็กต์เป็นโครงสร้างคีย์ - ค่า จากนั้นจะเพิ่มคุณสมบัติใหม่ที่เรียกว่า 'Active' และค่าตัวอย่างให้กับทุก ๆ วัตถุภายในของวัตถุนี้ รหัสนี้สามารถใช้ได้กับทั้งอาร์เรย์ของวัตถุและวัตถุของวัตถุ
Arash MAS

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.