3 con đường để Copy Objects trong JavaScript

Tóm tắt: trong hướng dẫn này, bạn sẽ học cách sao chép các đối tượng trong JavaScript, bao gồm cả shallow copy và deep copy. Để sao chép một đối tượng trong JavaScript, bạn có ba tùy chọn:

1. Sử dụng cú pháp spread(...) 
2. Sử dụng phương thức Object.assign()
3. Chuyển đổi qua string JSON.stringify() sau đó JSON.parse() ngược về để tạo ra object .

cú pháp spread

const person = {
    firstName: ' Hùng Đẹp Trai',
    lastName: ' Trương Thanh'
};

// Sử dụng spread ...
let p1 = {
    ...person
};

The Spread Syntax

• Cú pháp spread biểu diễn  dạng dấu 3 chấm: ...
• Spread Syntax cho phép duyệt qua các phần tử và truyền vào phương thức như các đối số
• Spread Syntax là Syntax của es6 nha. nếu bạn nào code javascript yêu cầu trình duyệt thấp thì cẩn thận

Tính tương thích của trình duyệt web:

Spread Syntax thường xuất hiện trong code các pro nodejs, chứ code js trình duyệt thì thôi né đi 😄 

ví dụ khácdùngSpread Syntax

1 ví dụ khác khi dùng Spread Syntax như sau: 

let arr1 = [ 2, 3, 4 ]
/// mình muốn tạo 1 arr2 dạng như này [ 1, 2, 3, 4, 5 ]
let arr2 = [ 1, ... arr1, 5 ] /// xong 😄 
/// javascript có hàm Math.max(1, 2, 3) => kết quả là 3 
/// bạn muốn tính max trong mangr arr2 ở trên? 
let maxArr2 = Math.max(...arr2)
/// đôi khi bạn cần convert string qua array
let strMyName = "Trương Thanh Hùng ĐẸp Trai Khoai To"
let arrMyName = [... strMyName ]
 

Cú Fap Fap Fap pháp assign javascript

Object.assign() được sử dụng để sao chép các giá trị của tất cả thuộc tính có thể liệt kê từ một hoặc nhiều đối tượng nguồn đến một đối tượng đích. Nó sẽ  trả về đối tượng đích đó.

Cú pháp

Object.assign(target, ...sources)

Tương thích trình duyệt

Cách copy object

// using  Object.assign() method 
const person = {
    firstName: ' Hùng Đẹp Trai',
    lastName: ' Trương Thanh'
};
let p2 = Object.assign({}, person);

các ví dụ khác

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

Lưu ý là khi dùng, nếu bị trùng key thì xem như giá trị sau ( trong source ) sẽ ghi đè lên giá trị trước ( trong target )

ví dụ: 

const a = { name: 'foo' }
const b = Object.assign(a, { name: 'bar', age: 1 }, { id: 9 })
console.log(b) // { name: 'bar', age: 1, id: 9 } => object a ban đầu có name = 'foo' đã đi vào quên lãng

Cả spread (...) và Object.assign() đều thực hiện một shallow copy trong khi JSON methods lại là một deep copy.

Cú Fap JSON javascript

Bạn có thể tưởng tượng bạn có 1 object bạn chuyển về string thì string trong javascript không hề có reference. sau đó parse ngược về object thì lúc này đó là object mới. khuyến cáo nếu bạn code javascript có trình duyệt nên sử dụng cách này đỡ suy nghĩ về sự tương thích trình duyệt.

// using JSON

const person = {
    firstName: ' Hùng Đẹp Trai',
    lastName: ' Trương Thanh'
};
let p3 = JSON.parse(JSON.stringify(person));

Shallow Copy vs Deep Copy

Trong JavaScript, bạn sử dụng các biến để lưu trữ các giá trị có thể là primitive or references. Khi bạn tạo một bản sao của một giá trị được lưu trữ trong một biến, bạn sẽ tạo một biến mới có cùng giá trị.

Tóm gọn: Shallow Copy có nghĩa ta chỉ copy được level đầu, các level sâu hơn sẽ được hiểu là tham chiếu.

ví dụ: 

const nestedObject = {
  country: 'Campuchia',
  detail: {
    city: 'Phnom Penh'
  }
};

const shallowClone = { ...nestedObject };
// Changed our cloned object
shallowClone.country = 'Việt Nam'
shallowClone.detail.city = 'Hồ chí minh';

console.log(shallowClone);
// {country: 'Việt Nam', detail: {city: 'Hồ chí minh'}} <-- ✅

console.log(nestedObject);
// {country: 'Campuchia', detail: {city: 'Hồ chí minh'}} <-- 😱 á đù, coi chừng chỗ city nghen 😄 

ví dụ: 

nguồn tài liệu: 

https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Object/assign