จะทำซ้ำคุณสมบัติของวัตถุในวัตถุอื่นได้อย่างไร

รับวัตถุ:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

ฉันจะคัดลอกคุณสมบัติภายในวัตถุอื่น ( secondObject) เช่นนี้ได้อย่างไร:

var secondObject = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 'value3',
    key4 : 'value4'
};

ใช้การอ้างอิงถึงfirstObject? บางสิ่งเช่นนี้

var secondObject = {
    firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

(สิ่งนี้ไม่ทำงาน ... ฉันวางไว้เพื่อแสดงในบรรทัดใหญ่ว่าฉันต้องการจัดโครงสร้างโค้ดอย่างไร)

สามารถแก้ปัญหาได้โดยไม่ต้องใช้เฟรมเวิร์ก JavaScript หรือไม่

for(var k in firstObject) secondObject[k]=firstObject[k];

รับคิวจากคำตอบของ @ Bardzuśnyที่นี่ ES6 ได้มอบวิธีแก้ปัญหาดั้งเดิม: Object.assign()ฟังก์ชั่น!

การใช้งานง่าย:

Object.assign(secondObject, firstObject);

แค่นั้นแหละ!

การสนับสนุนในตอนนี้เห็นได้ชัดว่าแย่ มีเพียง Firefox (34+) เท่านั้นที่รองรับนอกขณะที่ Chrome (45+) และ Opera (32+) ต้องการ 'ตั้งค่าสถานะการทดลอง'

การสนับสนุนกำลังปรับปรุงพร้อมรองรับ Chrome, Firefox, Opera, Safari และ Edge เวอร์ชั่นล่าสุด (IE สะดุดตาไม่มีการสนับสนุน) มี Transpilers ให้บริการเช่น Babel และ Traceur ดูที่นี่สำหรับรายละเอียดเพิ่มเติม

ต่อES6 - ไวยากรณ์สเปรด :

คุณสามารถใช้:

const thirdObject = {
   ...firstObject,
   ...secondObject   
}

สิ่งนี้จะช่วยป้องกันปัญหาในการส่งวัตถุเหล่านี้โดยการอ้างอิง

นอกจากนี้ยังดูแลวัตถุที่มีการทำรังลึก

วนรอบคุณสมบัติของวัตถุแรกและกำหนดให้กับวัตถุที่สองเช่นนี้

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

for (var prop in firstObject) {
    if (firstObject.hasOwnProperty(prop)) {
        secondObject[prop] = firstObject[prop];
    }
}

for- inห่วงไม่เพียงพอ hasOwnPropertyคุณจำเป็นต้อง ดูhttp://bonsaiden.github.com/JavaScript-Garden/#object.forinloopสำหรับคำอธิบายโดยละเอียดเกี่ยวกับสาเหตุ

การเล่นหมอผีที่นี่เพราะ ES5 นำเรามาObject.keys()พร้อมศักยภาพในการช่วยเราจากการ.hasOwnProperty()ตรวจสอบทั้งหมดเหล่านี้

Object.keys(firstObject).forEach(function(key) {
  secondObject[key] = firstObject[key];
});

หรือห่อมันเป็นฟังก์ชั่น (จำกัด "สำเนา" ของ lodash _.assign()):

function assign(object, source) {
  Object.keys(source).forEach(function(key) {
    object[key] = source[key];
  });
}

assign(secondObject, firstObject); // assign firstObject properties to secondObject

Object.keys()เป็นวิธีการใหม่ที่ค่อนข้างสะดุดตาที่สุด: ไม่สามารถใช้งานได้ใน IE <9. วิธีการเดียวกันนี้ใช้สำหรับ.forEach()อาร์เรย์ซึ่งฉันใช้แทนforลูปปกติ

โชคดีที่มีes5-shimสำหรับเบราว์เซอร์โบราณเหล่านี้ซึ่งจะรวมคุณสมบัติหลายอย่างของ ES5 (รวมทั้งสอง)

(ฉันทุกคนใช้ polyfills แทนที่จะถือกลับมาจากการใช้คุณสมบัติภาษาใหม่ ๆ ที่เท่ห์)

การทำซ้ำเพื่อให้ผู้คนสามารถค้นหาวิธีการทำสำเนาแบบลึกด้วย hasOwnProperty และการตรวจสอบวัตถุจริง:

var extend = function (original, context, key) {
  for (key in context)
    if (context.hasOwnProperty(key))
      if (Object.prototype.toString.call(context[key]) === '[object Object]')
        original[key] = extend(original[key] || {}, context[key]);
      else
        original[key] = context[key];
  return original;
};

หนึ่งสามารถใช้Object.assignเพื่อรวมวัตถุ มันจะรวมและแทนที่คุณสมบัติทั่วไปจากขวาไปซ้ายกล่าวคือคุณสมบัติเดียวกันในด้านซ้ายจะถูกแทนที่โดยขวา

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

หวังว่านี่จะช่วยได้!

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

var finalObject = Object.assign({}, firstObject, secondObject)

console.log(finalObject)

การปรับปรุงแนวคิดkingPuppyและแนวคิด OP (คัดลอกตื้น) - ฉันเพิ่ม 3 จุดไปที่ OP "ตัวอย่าง" :)

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

console.log(secondObject);

นี้จะทำงานผ่านการทดสอบที่นี่

var secondObject = {
    firstObject: JSON.parse(JSON.stringify(firstObject)),
    key3 : 'value3',
    key4 : 'value4'
};

หมายเหตุ : นี่จะไม่คัดลอกวิธีของfirstObject
Note 2 : สำหรับใช้ในเบราว์เซอร์รุ่นเก่าคุณจะต้องใช้json parser
หมายเหตุ 3 : การกำหนดโดยการอ้างอิงเป็นตัวเลือกที่ทำงานได้โดยเฉพาะอย่างยิ่งหากfirstObjectมีวิธีการ ปรับตัวอย่าง jsfiddle ที่ได้รับตามนั้น

น่าเสียดายที่คุณไม่สามารถอ้างอิงถึงตัวแปรในวัตถุเช่นนั้นได้ อย่างไรก็ตามคุณสามารถสร้างฟังก์ชั่นที่คัดลอกค่าของวัตถุไปยังวัตถุอื่นได้

function extend( obj1, obj2 ) {
    for ( var i in obj2 ) {
        obj1[i] = obj2[i];
    }
    return obj1;
}

var firstObject = {
    key1: "value1",
    key2: "value2"
};

var secondObject = extend({
    key3: "value3",
    key4: "value4"
}, firstObject );

ถ้าคุณต้องการคว้าเฉพาะคุณสมบัติที่มีอยู่ในวัตถุที่สองคุณสามารถใช้Object.keysเพื่อคว้าคุณสมบัติของวัตถุแรกคุณสามารถทำได้สองวิธี:

A. ) mapเพื่อกำหนดคุณสมบัติของวัตถุแรกให้กับวัตถุที่สองโดยใช้ผลข้างเคียง:

var a = {a:100, b:9000, c:300};
var b = {b:-1};

Object.keys(a).map(function(key, index) {
    if (typeof b[key] !== 'undefined') {
        console.log(key);
        b[key] = a[key];    
    }
});

B. )หรือreduceเพื่อสร้างวัตถุใหม่และกำหนดให้กับวัตถุที่สอง โปรดทราบว่าวิธีนี้จะแทนที่คุณสมบัติอื่นที่วัตถุที่สองอาจมีอยู่ก่อนหน้าซึ่งไม่ตรงกับวัตถุแรก:

var a = {a:100, b:9000, c:300};
var b = {b:-1, d:-1}; // d will be gone

b = Object.keys(a).reduce(function(result, current) {
    if (typeof b[current] !== 'undefined') {
        result[current] = a[current];   
    }
    return result;
}, {});

ใช้สัญกรณ์การแพร่กระจายคุณสมบัติ มันถูกเพิ่มใน ES2018 (สเปรดสำหรับอาร์เรย์ / iterables ก่อนหน้านี้คือ ES2015), {... firstObject} กระจายคุณสมบัติที่นับได้ทั้งหมดออกเป็นคุณสมบัติที่ไม่ต่อเนื่อง

let secondObject = {
      ...firstObject,
      key3 : 'value3',
      key4 : 'value4'
    }

ฉันอยากจะใช้ firstObject เป็นต้นแบบของ secondObject และเพิ่ม descriptor คุณสมบัติ:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3", writable: true, configurable: true, enumerable: true},
      key4: {value: "value4", writable: true, configurable: true, enumerable: true}
      });

แน่นอนว่าไม่ใช่ซับเดี่ยว แต่ให้คุณควบคุมได้มากกว่า หากคุณมีความสนใจในคำอธิบายคุณสมบัติฉันขอแนะนำให้อ่านบทความนี้: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 และหน้า MDN https: //developer.mozilla org / en-US / เอกสาร / Web / JavaScript / อ้างอิง / Global_Objects / วัตถุ / สร้าง

นอกจากนี้คุณยังสามารถกำหนดค่าและละเว้น descriptors และทำให้สั้นลงเล็กน้อย:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3"}
      key4: {value: "value4"}
  });

ความเข้ากันได้: ECMAScript 5 ดังนั้น IE9 +

var firstObject = {
     key1: "value1",
     key2: "value2"
};

var secondObject = {
     key3: "value3",
     key4: "value4"
     copy: function(firstObject){
           this.key1 = firstObject.key1;
           this.key2 = firstObject.key2;
     }
 };

การใช้วิธีการ follwing จะเป็นการคัดลอกคุณสมบัติ

secondObject.copy(firstObject)

ฉันยังใหม่กับ javascript แต่พบว่าใช้งานได้ ยาวไปหน่อยฉันเดา แต่ใช้งานได้