Làm thế nào để sao chép các thuộc tính đối tượng trong một đối tượng khác?

Cho đối tượng:

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

Làm thế nào tôi có thể sao chép các thuộc tính bên trong một đối tượng khác ( secondObject) như thế này:

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

sử dụng một tham chiếu đến firstObject? Một cái gì đó như thế này:

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

(điều này không hoạt động ... Tôi đặt nó chỉ để hiển thị trong các dòng lớn cách tôi muốn cấu trúc mã).

Là một giải pháp có thể mà không cần sử dụng bất kỳ khung JavaScript nào?

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

Lấy một gợi ý từ câu trả lời của @ Bardzuśny tại đây, ES6 đã đưa ra một giải pháp tự nhiên: Object.assign()chức năng!

Cách sử dụng rất đơn giản:

Object.assign(secondObject, firstObject);

Đó là nó!

Hỗ trợ ngay bây giờ rõ ràng là kém; chỉ có Firefox (34+) hỗ trợ ngoài luồng, trong khi Chrome (45+) và Opera (32+) yêu cầu 'cờ thử nghiệm' được đặt.

Hỗ trợ đang được cải thiện, với các phiên bản mới nhất của Chrome, Firefox, Opera, Safari và Edge hỗ trợ nó (đáng chú ý là IE không có hỗ trợ.) Các bộ chuyển đổi cũng có sẵn, như Babel và Traceur. Xem ở đây để biết thêm chi tiết.

Mỗi ES6 - Cú pháp lây lan :

Bạn chỉ có thể sử dụng:

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

Điều này tránh các vấn đề về việc vượt qua các đối tượng này bằng cách tham khảo.

Ngoài ra, nó chăm sóc các đối tượng có lồng sâu.

Lặp qua các thuộc tính của đối tượng đầu tiên và gán chúng cho đối tượng thứ hai, như thế này:

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];
    }
}

Các for- invòng lặp là không đủ; bạn cần hasOwnProperty. Xem http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop để được giải thích chi tiết về lý do.

Chơi necromancer ở đây, vì ES5 mang lại cho chúng tôi Object.keys(), với tiềm năng cứu chúng tôi khỏi tất cả các .hasOwnProperty()kiểm tra này .

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

Hoặc, gói nó vào một chức năng ("bản sao" giới hạn của 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()là phương thức tương đối mới, đáng chú ý nhất: không có sẵn trong IE <9. Điều tương tự thực sự xảy ra với .forEach()phương thức mảng, mà tôi đã sử dụng thay cho forvòng lặp thông thường .

May mắn thay, có sẵn es5-shim cho các trình duyệt cổ này, sẽ cung cấp nhiều tính năng ES5 (bao gồm cả hai tính năng này).

(Tôi hoàn toàn dành cho các polyfill thay vì giữ lại từ việc sử dụng các tính năng ngôn ngữ mới, thú vị.)

Necro'ing để mọi người có thể tìm thấy một phương pháp sao chép sâu với hasOwnProperty và kiểm tra đối tượng thực tế:

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;
};

Người ta có thể sử dụng Object.assign để kết hợp các đối tượng. Nó sẽ kết hợp và ghi đè tài sản chung từ phải sang trái tức là, cùng một tài sản ở bên trái sẽ bị ghi đè bên phải.

Và điều quan trọng là cung cấp một đối tượng trống trong lần đầu tiên để tránh làm biến đổi các đối tượng nguồn. Các đối tượng nguồn nên được giữ sạch sẽ vì Object.assign()chính nó trả về một đối tượng mới.

Hi vọng điêu nay co ich!

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

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

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

console.log(finalObject)

Cải thiện ý tưởng kingPuppy và ý tưởng OP (bản sao nông) - Tôi chỉ thêm 3 dấu chấm vào OP "ví dụ" :)

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

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

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

console.log(secondObject);

Điều này nên làm việc, thử nghiệm ở đây .

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

Lưu ý : điều này sẽ không sao chép các phương thức của firstObject
Note 2 : để sử dụng trong các trình duyệt cũ hơn, bạn sẽ cần một trình phân tích cú pháp json
Lưu ý 3 : gán theo tham chiếu là một tùy chọn khả thi, đặc biệt là nếu firstObjectchứa các phương thức. Điều chỉnh ví dụ jsfiddle đã cho phù hợp

Thật không may, bạn không thể đặt một tham chiếu đến một biến trong một đối tượng như thế. Tuy nhiên, bạn có thể tạo một hàm sao chép các giá trị của đối tượng vào một đối tượng khác.

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 );

Nếu bạn muốn lấy chỉ các thuộc tính mà tồn tại trong đối tượng thứ hai, bạn có thể sử dụng Object.keysđể lấy các thuộc tính của đối tượng đầu tiên, bạn có thể làm hai phương pháp:

A.) map để gán các thuộc tính của đối tượng thứ nhất cho đối tượng thứ hai bằng cách sử dụng các hiệu ứng phụ:

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.) hoặc reduceđể tạo một đối tượng mới và gán nó cho đối tượng thứ hai. Xin lưu ý rằng phương thức này thay thế các thuộc tính khác mà đối tượng thứ hai có thể có trước đó không khớp với đối tượng thứ nhất:

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;
}, {});

Sử dụng ký hiệu lây lan tài sản. Nó đã được thêm vào trong ES2018 (lây lan cho mảng / iterables trước đó, ES2015), {... firstObject} trải đều tất cả các thuộc tính có thể đếm được dưới dạng các thuộc tính riêng biệt.

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

Tôi thà sử dụng FirstObject làm nguyên mẫu của secondObject và thêm mô tả thuộc tính:

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

Nó chắc chắn không phải là một lớp lót, nhưng nó cho phép bạn kiểm soát nhiều hơn. Nếu bạn quan tâm đến các mô tả tài sản, tôi khuyên bạn nên đọc bài viết này: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 và trang MDN https: //developer.mozilla. org / en-US / docs / Web / JavaScript / Reference / Global_Objects / Object / tạo

Bạn cũng có thể chỉ định các giá trị và bỏ qua các mô tả và làm cho nó ngắn hơn một chút:

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

Khả năng tương thích: ECMAScript 5, vì vậy IE9 +

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

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

Sử dụng phương thức follwing sẽ sao chép các thuộc tính

secondObject.copy(firstObject)

Tôi rất mới với javascript, nhưng thấy nó hoạt động. Một chút quá lâu tôi đoán, nhưng nó hoạt động.