Giả sử tôi có một optionsbiến và tôi muốn đặt một số giá trị mặc định.

Lợi ích / nhược điểm của hai lựa chọn này là gì?

Sử dụng đối tượng lây lan

options = {...optionsDefault, ...options};

Hoặc sử dụng Object.assign

options = Object.assign({}, optionsDefault, options);

Đây là cam kết khiến tôi tự hỏi.

Điều này không nhất thiết là toàn diện.

Cú pháp lây lan

options = {...optionsDefault, ...options};

Ưu điểm:

• Nếu tác giả mã để thực thi trong các môi trường mà không có hỗ trợ riêng, bạn có thể chỉ cần biên dịch cú pháp này (trái ngược với việc sử dụng một polyfill). (Với Babel chẳng hạn.)

• Ít dài dòng hơn.

Nhược điểm:

• Khi câu trả lời này ban đầu được viết, đây là một đề xuất , không được chuẩn hóa. Khi sử dụng các đề xuất hãy xem xét những gì bạn sẽ làm nếu bạn viết mã với nó ngay bây giờ và nó không được chuẩn hóa hoặc thay đổi khi nó chuyển sang tiêu chuẩn hóa. Điều này đã được chuẩn hóa trong ES2018.

• Nghĩa đen, không năng động.

Object.assign()

options = Object.assign({}, optionsDefault, options);

Ưu điểm:

• Chuẩn hóa.

• Năng động. Thí dụ:

  var sources = [{a: "A"}, {b: "B"}, {c: "C"}];
  options = Object.assign.apply(Object, [{}].concat(sources));
  // or
  options = Object.assign({}, ...sources);

Nhược điểm:

• Dài dòng hơn.
• Nếu tác giả mã để thực thi trong môi trường mà không có hỗ trợ riêng, bạn cần phải thực hiện polyfill.

Đây là cam kết khiến tôi tự hỏi.

Điều đó không liên quan trực tiếp đến những gì bạn đang hỏi. Mã đó không được sử dụng Object.assign(), đó là sử dụng mã người dùng ( object-assign) thực hiện điều tương tự. Chúng dường như đang biên dịch mã đó với Babel (và gói nó với Webpack), đó là những gì tôi đã nói về: cú pháp bạn có thể biên dịch. Họ rõ ràng thích rằng phải bao gồm object-assignnhư một sự phụ thuộc sẽ đi vào công trình của họ.

Đối với phần còn lại / trải rộng đối tượng tham chiếu được hoàn thành trong ECMAScript 2018 như là một giai đoạn 4. Đề xuất có thể được tìm thấy ở đây .

Đối với hầu hết các phần đặt lại và trải rộng đối tượng hoạt động theo cùng một cách, điểm khác biệt chính là trải rộng xác định các thuộc tính, trong khi Object.assign () đặt chúng . Điều này có nghĩa là Object.assign () kích hoạt setters.

Điều đáng ghi nhớ là khác với điều này, đối tượng nghỉ ngơi / trải rộng 1: 1 ánh xạ tới Object.assign () và hoạt động khác với trải rộng mảng (lặp lại). Ví dụ, khi trải một giá trị null mảng được trải rộng. Tuy nhiên, việc sử dụng các giá trị null của đối tượng được truyền âm thầm thành không có gì.

Ví dụ về lây lan mảng (lặp lại)

const x = [1, 2, null , 3];
const y = [...x, 4, 5];
const z = null;

console.log(y); // [1, 2, null, 3, 4, 5];
console.log([...z]); // TypeError

Ví dụ trải rộng đối tượng

const x = null;
const y = {a: 1, b: 2};
const z = {...x, ...y};

console.log(z); //{a: 1, b: 2}

Điều này phù hợp với cách Object.assign () hoạt động, cả hai đều âm thầm loại trừ giá trị null không có lỗi.

const x = null;
const y = {a: 1, b: 2};
const z = Object.assign({}, x, y);

console.log(z); //{a: 1, b: 2}

Tôi nghĩ rằng một sự khác biệt lớn giữa toán tử lây lan và Object.assigndường như không được đề cập trong các câu trả lời hiện tại là toán tử trải sẽ không sao chép nguyên mẫu của đối tượng nguồn vào đối tượng đích. Nếu bạn muốn thêm thuộc tính vào một đối tượng và bạn không muốn thay đổi thể hiện của nó, thì bạn sẽ phải sử dụng Object.assign. Ví dụ dưới đây sẽ chứng minh điều này:

const error = new Error();
error instanceof Error // true

const errorExtendedUsingSpread = {
  ...error,
  ...{
    someValue: true
  }
};
errorExtendedUsingSpread instanceof Error; // false

const errorExtendedUsingAssign = Object.assign(error, {
  someValue: true
});
errorExtendedUsingAssign instanceof Error; // true

Như những người khác đã đề cập, tại thời điểm viết bài này, Object.assign()đòi hỏi phải có một polyfill và đối tượng trải rộng ...yêu cầu một số dịch chuyển (và có lẽ là một polyfill nữa) để hoạt động.

Xem xét mã này:

// Babel wont touch this really, it will simply fail if Object.assign() is not supported in browser.
const objAss = { message: 'Hello you!' };
const newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

// Babel will transpile with use to a helper function that first attempts to use Object.assign() and then falls back.
const objSpread = { message: 'Hello you!' };
const newObjSpread = {...objSpread, dev: true };
console.log(newObjSpread);

Cả hai đều sản xuất cùng một đầu ra.

Đây là đầu ra từ Babel, đến ES5:

var objAss = { message: 'Hello you!' };
var newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var objSpread = { message: 'Hello you!' };
var newObjSpread = _extends({}, objSpread, { dev: true });
console.log(newObjSpread);

Đây là sự hiểu biết của tôi cho đến nay. Object.assign()là thực sự được tiêu chuẩn hóa, nơi mà đối tượng lây lan ...chưa được. Vấn đề duy nhất là hỗ trợ trình duyệt cho cái trước và trong tương lai, cái sau cũng vậy.

Chơi với mã ở đây

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

Toán tử trải rộng đối tượng (...) không hoạt động trong các trình duyệt, vì nó chưa phải là một phần của bất kỳ đặc tả ES nào, chỉ là một đề xuất. Tùy chọn duy nhất là biên dịch nó với Babel (hoặc một cái gì đó tương tự).

Như bạn có thể thấy, đó chỉ là cú pháp cú pháp so với Object.assign ({}).

Theo như tôi có thể thấy, đây là những khác biệt quan trọng.

• Object.assign hoạt động trong hầu hết các trình duyệt (không biên dịch)
• ... cho các đối tượng không được tiêu chuẩn hóa
• ... bảo vệ bạn khỏi vô tình làm biến đổi đối tượng
• ... sẽ polyfill Object.assign trong các trình duyệt mà không có nó
• ... cần ít mã hơn để diễn đạt cùng một ý tưởng

Tôi muốn tóm tắt trạng thái của tính năng ES "đối tượng lây lan", trong các trình duyệt và trong hệ sinh thái thông qua các công cụ.

Thông số kỹ thuật

• https://github.com/tc39/projection-object-rest-s lây lan
• Tính năng ngôn ngữ này là một đề xuất giai đoạn 4 , có nghĩa là nó đã được hợp nhất vào đặc tả ngôn ngữ ES, nhưng chưa được triển khai rộng rãi.

Trình duyệt: trong Chrome, trong SF, Firefox sớm (ver 60, IIUC)

• Hỗ trợ trình duyệt cho "thuộc tính lây lan" được phân phối trong Chrome 60 , bao gồm cả kịch bản này.
• Hỗ trợ cho kịch bản này KHÔNG hoạt động trong Firefox hiện tại (59), nhưng DOES hoạt động trong Phiên bản Firefox Developer của tôi. Vì vậy, tôi tin rằng nó sẽ xuất xưởng trong Firefox 60.
• Safari: chưa được thử nghiệm, nhưng Kangax cho biết nó hoạt động trong Desktop Safari 11.1, nhưng không phải SF 11
• iOS Safari: không được chỉnh sửa, nhưng Kangax cho biết nó hoạt động trong iOS 11.3, nhưng không hoạt động trong iOS 11
• chưa có trong Edge

Công cụ: Nút 8.7, TS 2.1

• NodeJS đã hỗ trợ từ 8.7 (thông qua Kangax). Xác nhận vào ngày 9,8 khi tôi thử nghiệm tại địa phương.
• TypeScript đã thay thế nó từ 2.1 , hiện tại là 2.8

Liên kết

• Kangax "tài sản lây lan"
• https://davidwalsh.name/merge-objects

Mẫu mã (tăng gấp đôi khi kiểm tra khả năng tương thích)

var x = { a: 1, b: 2 };
var y = { c: 3, d: 4, a: 5 };
var z = {...x, ...y};
console.log(z); // { a: 5, b: 2, c: 3, d: 4 }

Một lần nữa: Tại thời điểm viết mẫu này hoạt động mà không cần phiên dịch trong Chrome (60+), Firefox Developer Edition (bản xem trước của Firefox 60) và Node (8.7+).

Tại sao trả lời?

Tôi đang viết 2,5 năm sau câu hỏi ban đầu. Nhưng tôi đã có cùng một câu hỏi và đây là nơi Google gửi cho tôi. Tôi là nô lệ cho nhiệm vụ của SO để cải thiện cái đuôi dài.

Vì đây là một bản mở rộng của cú pháp "trải rộng mảng", tôi thấy nó rất khó tìm kiếm trên google và rất khó tìm thấy trong các bảng tương thích. Gần nhất tôi có thể tìm thấy là "tài sản lây lan" Kangax , nhưng thử nghiệm đó không có hai lệch trong cùng một biểu thức (không phải là hợp nhất). Ngoài ra, tên trong các trang đề xuất / dự thảo / trạng thái trình duyệt đều sử dụng "lây lan tài sản", nhưng theo tôi thì đó là "hiệu trưởng đầu tiên" mà cộng đồng đặt ra sau khi đề xuất sử dụng cú pháp lây lan cho "hợp nhất đối tượng". (Điều này có thể giải thích lý do tại sao nó rất khó để google.) Vì vậy, tôi ghi lại phát hiện của mình ở đây để người khác có thể xem, cập nhật và biên dịch các liên kết về tính năng cụ thể này. Tôi hy vọng nó bắt kịp. Hãy giúp truyền bá tin tức về nó hạ cánh trong thông số kỹ thuật và trong các trình duyệt.

Cuối cùng, tôi đã thêm thông tin này dưới dạng nhận xét, nhưng tôi không thể chỉnh sửa chúng mà không phá vỡ ý định ban đầu của tác giả. Cụ thể, tôi không thể chỉnh sửa nhận xét của @ ChillyPenguin mà không mất ý định sửa lỗi @RichardSchulte. Nhưng nhiều năm sau Richard hóa ra là đúng (theo ý kiến ​​của tôi). Vì vậy, tôi viết câu trả lời này thay vào đó, hy vọng cuối cùng nó sẽ đạt được lực kéo đối với các câu trả lời cũ (có thể mất nhiều năm, nhưng rốt cuộc đó là hiệu ứng đuôi dài là gì).

LƯU Ý: Lan truyền KHÔNG chỉ là đường cú pháp xung quanh Object.assign. Họ hoạt động khác nhau đằng sau hậu trường.

Object.assign áp dụng setters cho một đối tượng mới, lây lan không. Ngoài ra, đối tượng phải được lặp lại.

Sao chép Sử dụng điều này nếu bạn cần giá trị của đối tượng như hiện tại và bạn không muốn giá trị đó phản ánh bất kỳ thay đổi nào được thực hiện bởi các chủ sở hữu khác của đối tượng.

Sử dụng nó để tạo một bản sao nông của đối tượng, thực hành tốt để luôn đặt các thuộc tính bất biến thành sao chép - vì các phiên bản có thể thay đổi có thể được chuyển thành các thuộc tính bất biến, sao chép sẽ đảm bảo rằng bạn sẽ luôn luôn xử lý một đối tượng bất biến

Assign Assign có phần ngược lại để sao chép. Assign sẽ tạo ra một setter gán trực tiếp giá trị cho biến thể hiện, thay vì sao chép hoặc giữ lại nó. Khi gọi getter của thuộc tính gán, nó trả về một tham chiếu đến dữ liệu thực tế.

Các câu trả lời khác đã cũ, không thể có được một câu trả lời tốt.
Ví dụ dưới đây dành cho các đối tượng bằng chữ, giúp làm thế nào cả hai có thể bổ sung cho nhau và làm thế nào nó không thể bổ sung cho nhau (do đó khác biệt):

var obj1 = { a: 1,  b: { b1: 1, b2: 'b2value', b3: 'b3value' } };

// overwrite parts of b key
var obj2 = {
      b: {
        ...obj1.b,
        b1: 2
      }
};
var res2 = Object.assign({}, obj1, obj2); // b2,b3 keys still exist
document.write('res2: ', JSON.stringify (res2), '<br>');
// Output:
// res2: {"a":1,"b":{"b1":2,"b2":"b2value","b3":"b3value"}}  // NOTE: b2,b3 still exists

// overwrite whole of b key
var obj3 = {
      b: {
        b1: 2
      }
};
var res3 = Object.assign({}, obj1, obj3); // b2,b3 keys are lost
document.write('res3: ', JSON.stringify (res3), '<br>');
// Output:
  // res3: {"a":1,"b":{"b1":2}}  // NOTE: b2,b3 values are lost

Một số ví dụ nhỏ khác ở đây, cũng cho mảng & đối tượng:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Siverse_syntax

Đây hiện là một phần của ES6, do đó được chuẩn hóa và cũng được ghi lại trên MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Siverse_operator

Nó rất thuận tiện để sử dụng và có nhiều ý nghĩa bên cạnh việc phá hủy đối tượng.

Ưu điểm còn lại được liệt kê ở trên là khả năng động của Object.assign (), tuy nhiên điều này dễ như việc trải rộng mảng bên trong của một đối tượng theo nghĩa đen. Trong đầu ra babel đã biên dịch, nó sử dụng chính xác những gì được thể hiện với Object.assign ()

Vì vậy, câu trả lời đúng sẽ là sử dụng trải rộng đối tượng vì nó đã được chuẩn hóa, sử dụng rộng rãi (xem phản ứng, chuyển hướng, v.v.), rất dễ sử dụng và có tất cả các tính năng của Object.assign ()

Tôi muốn thêm ví dụ đơn giản này khi bạn phải sử dụng Object.assign.

class SomeClass {
  constructor() {
    this.someValue = 'some value';
  }

  someMethod() {
    console.log('some action');
  }
}


const objectAssign = Object.assign(new SomeClass(), {});
objectAssign.someValue; // ok
objectAssign.someMethod(); // ok

const spread = {...new SomeClass()};
spread.someValue; // ok
spread.someMethod(); // there is no methods of SomeClass!

Nó có thể không rõ ràng khi bạn sử dụng JavaScript. Nhưng với TypeScript sẽ dễ dàng hơn nếu bạn muốn tạo cá thể của một số lớp

const spread: SomeClass = {...new SomeClass()} // Error