Hướng dẫn javascript copy object and change property - javascript sao chép đối tượng và thay đổi thuộc tính

Biên tập viên Lưu ý: Bài đăng này đã được cập nhật vào ngày 23 tháng 3 năm 2022 để bao gồm thông tin cập nhật để sao chép các đối tượng trong JavaScript và TypeScript, bao gồm cả kỹ thuật nhân bản có cấu trúc. This post was updated on 23 March 2022 to include updated information for copying objects in JavaScript and TypeScript, including the structured cloning technique.

Khi làm việc với lập trình chức năng, một quy tắc tốt là luôn tạo ra các đối tượng mới thay vì thay đổi các đối tượng cũ. Khi làm như vậy, chúng tôi có thể chắc chắn rằng sự can thiệp của chúng tôi với cấu trúc đối tượng đã giành được ảnh hưởng đến một số phần dường như không liên quan của ứng dụng, điều này làm cho toàn bộ mã dễ dự đoán hơn.

Làm thế nào chính xác chúng ta có thể chắc chắn rằng những thay đổi chúng ta thực hiện đối với một đối tượng không ảnh hưởng đến mã ở nơi khác? Loại bỏ các tài liệu tham khảo không mong muốn hoàn toàn có vẻ là một ý tưởng tốt. Để loại bỏ tài liệu tham khảo, chúng tôi cần sao chép tất cả các thuộc tính của đối tượng vào một đối tượng mới. Trong bài viết này, chúng tôi sẽ kiểm tra năm kỹ thuật chúng tôi có thể sử dụng để sao chép các đối tượng trong JavaScript, cũng như khi nào nên sử dụng từng kỹ thuật. Khi áp dụng, chúng tôi cũng sẽ trình bày cách sử dụng từng kỹ thuật để sao chép các đối tượng trong TypeScript. TypeScript về cơ bản là một tập hợp con của JavaScript với việc gõ tĩnh, nhưng nó là tùy chọn ưa thích cho một số nhà phát triển. So với JavaScript, TypeScript thường dễ đọc, hiểu và gỡ lỗi hơn.

Dưới đây là năm phương thức bản sao JavaScript mà chúng tôi sẽ xem xét:

• Bản sao nông
• Sao chép sâu
• Chỉ định
• Hợp nhất với toán tử lây lan hoặc chức năng

  const a = {x: "Hi", y: "Test"};
  const b = {...a, y: "hello"}; 

  7
• Nhân bản có cấu trúc

Bản sao nông

Sao chép sâu

Chỉ định

Hợp nhất với toán tử lây lan hoặc chức năng

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

Nhân bản có cấu trúc

function shallow(source: T): T {
 return {
   ...source,
 }
}

let profile = {
  "name": "Pascal",
  "age": 12
}
const employee: {} = shallow(profile)
console.log(employee)

Một bản sao nông của một đối tượng sẽ có cùng các tài liệu tham khảo như đối tượng nguồn mà bản sao được tạo. Do đó, khi chúng tôi sửa đổi nguồn hoặc bản sao, chúng tôi cũng có thể khiến đối tượng khác thay đổi. Nói cách khác, chúng ta có thể vô tình tạo ra những thay đổi bất ngờ trong nguồn hoặc bản sao. Điều quan trọng là phải nắm bắt sự khác biệt giữa việc sửa đổi có chọn lọc giá trị của một thuộc tính được chia sẻ của một phần tử hiện có và gán một giá trị hoàn toàn mới cho một phần tử hiện có.

function shallow(source: T): T {
 const copy = {} as T
 Object.keys(source).forEach((key) => {
   copy[key as keyof T] = source[key as keyof T]
 })

 return copy
}

let profile = {
  "name": "Pascal",
  "age": 23
}
const employee: {} = shallow(profile)
console.log(employee)

JavaScript cung cấp các hoạt động bản sao đối tượng sẵn có tiêu chuẩn để tạo các bản sao nông: const b = Object.assign({}, a, {x: "Bye"}) 5, const b = Object.assign({}, a, {x: "Bye"}) 6, const b = Object.assign({}, a, {x: "Bye"}) 7, const a = {x: "Hi", y: "Test"}; const b = {...a, y: "hello"}; 7 và const b = Object.assign({}, a, {x: "Bye"}) 9, const b = Object.assign({}, a, {x: 'Bye'}) 0.

Ở đây, một ví dụ về bản sao nông trong JavaScript:

Sao chép sâu

Chỉ định

Hợp nhất với toán tử lây lan hoặc chức năng

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Nhân bản có cấu trúc

Một bản sao nông của một đối tượng sẽ có cùng các tài liệu tham khảo như đối tượng nguồn mà bản sao được tạo. Do đó, khi chúng tôi sửa đổi nguồn hoặc bản sao, chúng tôi cũng có thể khiến đối tượng khác thay đổi. Nói cách khác, chúng ta có thể vô tình tạo ra những thay đổi bất ngờ trong nguồn hoặc bản sao. Điều quan trọng là phải nắm bắt sự khác biệt giữa việc sửa đổi có chọn lọc giá trị của một thuộc tính được chia sẻ của một phần tử hiện có và gán một giá trị hoàn toàn mới cho một phần tử hiện có.

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

JavaScript cung cấp các hoạt động bản sao đối tượng sẵn có tiêu chuẩn để tạo các bản sao nông:

const b = Object.assign({}, a, {x: "Bye"})

const b = Object.assign({}, a, {x: "Bye"})

const b = Object.assign({}, a, {x: "Bye"})

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

const b = Object.assign({}, a, {x: "Bye"})

const b = Object.assign({}, a, {x: 'Bye'})

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Ở đây, một ví dụ về bản sao nông trong JavaScript:

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Ở đây, một ví dụ về bản sao nông trong TypeScript. Trong ví dụ này, chúng tôi sao chép đối tượng bằng toán tử lây lan (

const b = Object.assign({}, a, {x: 'Bye'})

Ở đây, một ví dụ khác về bản sao nông trong TypeScript. Trong ví dụ này, chúng tôi tạo một đối tượng mới và sao chép mọi thuộc tính từ đối tượng

const b = Object.assign({}, a, {x: 'Bye'})

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Khi nào nên sử dụng bản sao sâu

Bản sao sâu có thể được sử dụng khi đối tượng của bạn chứa cả các loại dữ liệu nguyên thủy và không nguyên thủy. Nó cũng có thể được sử dụng bất cứ lúc nào bạn cảm thấy cần phải cập nhật các đối tượng hoặc mảng lồng nhau.

Chỉ định

Hàm

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

const b = a.map(item => Object.assign([], ...item));

Ở đây, một ví dụ về việc sao chép với chức năng

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Ở đây, một ví dụ về sao chép bằng cách gán trong TypeScript. Ở đây, chúng tôi chỉ cần lấy mỗi đối tượng

const b = Object.assign({}, a, {x: 'Bye'})

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Ở đây, một ví dụ khác về việc sao chép bằng cách gán trong TypeScript. Ví dụ này là một phiên bản an toàn trong đó, thay vì biến đổi đối tượng

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Khi nào nên sử dụng gán

Hàm

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const b = Object.assign({}, a, {x: 'Bye'})

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Sáp nhập

Phương thức hợp nhất tương tự như phương thức gán, nhưng thay vì thay đổi các thuộc tính trong mục tiêu, nó kết hợp chúng với nhau. Nếu một giá trị là một mảng hoặc một đối tượng, hàm này hợp nhất các thuộc tính theo cách đệ quy. Có hai cách để hợp nhất các đối tượng trong JavaScript: sử dụng toán tử lây lan hoặc phương pháp

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

Người vận hành lan truyền

Toán tử lây lan,

function shallow(source: T): T {
 return {
   ...source,
 }
}

let profile = {
  "name": "Pascal",
  "age": 12
}
const employee: {} = shallow(profile)
console.log(employee)

Ở đây, một ví dụ về hợp nhất với toán tử lây lan trong JavaScript:

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Bây giờ, hãy để Lôi nhìn vào một ví dụ về việc hợp nhất trong TypeScript.

Hàm

function shallow(source: T): T {
 return {
   ...source,
 }
}

let profile = {
  "name": "Pascal",
  "age": 12
}
const employee: {} = shallow(profile)
console.log(employee)

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const b = Object.assign({}, a, {x: 'Bye'})

function shallow(source: T): T {
 return {
   ...source,
 }
}

let profile = {
  "name": "Pascal",
  "age": 12
}
const employee: {} = shallow(profile)
console.log(employee)

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const b = Object.assign({}, a, {x: 'Bye'})

function shallow(source: T): T {
 return {
   ...source,
 }
}

let profile = {
  "name": "Pascal",
  "age": 12
}
const employee: {} = shallow(profile)
console.log(employee)

const b = Object.assign({}, a, {x: 'Bye'})

function shallow(source: T): T {
 const copy = {} as T
 Object.keys(source).forEach((key) => {
   copy[key as keyof T] = source[key as keyof T]
 })

 return copy
}

let profile = {
  "name": "Pascal",
  "age": 23
}
const employee: {} = shallow(profile)
console.log(employee)

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const b = Object.assign({}, a, {x: 'Bye'})

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Cả

function shallow(source: T): T {
 return {
   ...source,
 }
}

let profile = {
  "name": "Pascal",
  "age": 12
}
const employee: {} = shallow(profile)
console.log(employee)

function shallow(source: T): T {
 return {
   ...source,
 }
}

let profile = {
  "name": "Pascal",
  "age": 12
}
const employee: {} = shallow(profile)
console.log(employee)

const b = Object.assign({}, a, {x: 'Bye'})

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Bây giờ tất cả những gì còn lại là để tạo chức năng TypeScript

function shallow(source: T): T {
 const copy = {} as T
 Object.keys(source).forEach((key) => {
   copy[key as keyof T] = source[key as keyof T]
 })

 return copy
}

let profile = {
  "name": "Pascal",
  "age": 23
}
const employee: {} = shallow(profile)
console.log(employee)

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Phương pháp const a = {x: "Hi", y: "Test"}; const b = {...a, y: "hello"}; 7

Phương pháp

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

Đây là một ví dụ:

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Bây giờ, hãy để Lôi nhìn vào một ví dụ khác về việc hợp nhất trong TypeScript. Với cách tiếp cận này, trước tiên chúng tôi muốn có được tất cả các thuộc tính của đối tượng

const b = Object.assign({}, a, {x: 'Bye'})

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

A

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Ở đây, một ví dụ về cách thức hoạt động của nó:

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Chúng tôi gọi hàm

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Mặt khác, nếu đối số giống đối tượng chứ không phải

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Cả

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Sau khi nhận được các đường dẫn và giá trị của toàn bộ đối tượng

const b = Object.assign({}, a, {x: 'Bye'})

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Làm phẳng một mảng sôi xuống để lặp lại trên mỗi mục để kiểm tra xem nó có phải là một mảng không. Nếu đó là chúng tôi

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Bây giờ, chúng tôi đã đề cập đến cách lấy

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

Hãy để nói về chức năng

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Mỗi lần chúng tôi trả về giá trị theo

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Trong ví dụ của chúng tôi, đối số

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Chúng ta phải nhớ rằng

let profile = ["Bruce",{"language":["English","Spanish","French"]}];

let profile_copy = Array.from(profile);

profile_copy[1].language = ["Igbo","Yoruba"]
console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

profile_copy[0] = "Pascal"
console.log(profile[0]) // Bruce

console.log(JSON.stringify(profile_copy)); // ["Pascal",{"language":["Igbo","Yoruba"]}]

console.log(JSON.stringify(profile)); // ["Bruce",{"language":["Igbo","Yoruba"]}]

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Chúng tôi đặt giá trị ở mục cuối cùng của

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Nếu bên trong

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

function shallow(source: T): T {
 const copy = {} as T
 Object.keys(source).forEach((key) => {
   copy[key as keyof T] = source[key as keyof T]
 })

 return copy
}

let profile = {
  "name": "Pascal",
  "age": 23
}
const employee: {} = shallow(profile)
console.log(employee)

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const additions = { x: "Bye" }
const a = { x: "Hi", y: "Test" }
const b = { ...a,  ...additions } // or { ...a, x: "Bye" }
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Bây giờ, tất cả những gì còn lại là để tạo ra chức năng

function shallow(source: T): T {
 const copy = {} as T
 Object.keys(source).forEach((key) => {
   copy[key as keyof T] = source[key as keyof T]
 })

 return copy
}

let profile = {
  "name": "Pascal",
  "age": 23
}
const employee: {} = shallow(profile)
console.log(employee)

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

Khi nào nên sử dụng hợp nhất

Các đối tượng hợp nhất không phải là một thực tiễn điển hình trong JavaScript, nhưng phương pháp này cho phép chúng ta kết hợp các thuộc tính đối tượng, ngay cả với các đối tượng được lồng rất sâu.

Nhân bản có cấu trúc

Nhân bản có cấu trúc là một kỹ thuật mới để sao chép các đối tượng trong JavaScript. Đây là một phương pháp toàn cầu sử dụng thuật toán nhân bản có cấu trúc để tạo một bản sao sâu của một mục được chỉ định. Thay vì nhân bản các đối tượng, nó chuyển các đối tượng từ nguồn ban đầu của chúng sang nguồn mới, nơi chúng không còn có thể truy cập được trong nguồn gốc.

Kỹ thuật này có thể được sử dụng với các đối tượng có thể chuyển nhượng, đây là một loại đối tượng sở hữu tài nguyên. Các đối tượng này chỉ có thể được chuyển bằng cách sử dụng giá trị truyền thông số ban đầu. Do kết quả của việc chuyển, đối tượng ban đầu sẽ được hiển thị không thể sử dụng được.

Trong ví dụ dưới đây, mã sẽ chuyển

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"}; 

Khi nào nên sử dụng nhân bản có cấu trúc

Nhân bản có cấu trúc có thể hữu ích cho các trường hợp khi bạn cần xác nhận không đồng bộ dữ liệu trong bộ đệm trước khi lưu dữ liệu. Để tránh bộ đệm được sửa đổi trước khi dữ liệu được lưu, bạn có thể sao chép bộ đệm và xác thực dữ liệu đó. Kỹ thuật này cũng có thể hữu ích nếu bạn đang chuyển dữ liệu. Với nhân bản có cấu trúc, bất kỳ nỗ lực nào để sửa đổi bộ đệm ban đầu sẽ thất bại, ngăn chặn việc lạm dụng tình cờ của nó.

Sự kết luận

Trong bài viết này, chúng tôi đã thảo luận về năm kỹ thuật hữu ích để sao chép một đối tượng trong JavaScript cũng như TypeScript. Chúng tôi sử dụng bản sao nông khi xử lý một đối tượng chỉ có các thuộc tính với các loại dữ liệu nguyên thủy (chuỗi hoặc số). Bản sao sâu đảm bảo rằng không có tài liệu tham khảo nào đến đối tượng nguồn hoặc bất kỳ thuộc tính nào của nó. Gán là một cách tuyệt vời để sao chép một đối tượng hoặc chỉ để gán một số thuộc tính mới cho một đối tượng hiện có. Hợp nhất cho phép chúng ta hợp nhất các thuộc tính của các đối tượng, ngay cả khi các đối tượng được lồng sâu. Cuối cùng, nhân bản có cấu trúc cho phép chúng ta xác nhận không đồng bộ và dữ liệu đối tượng

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Đối tượng là phương pháp cơ bản mà chúng tôi tổ chức và truyền dữ liệu trong JavaScript. Chúng được biểu diễn trong TypeScript thông qua các loại đối tượng (

const a = { x: "Hi", y: "Test" }
const b = Object.assign({}, a, { x: "Bye" });
console.log("a:", a);
console.log("b:", b);
console.log("a === b:", a === b);

Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh

Mã gỡ lỗi luôn là một nhiệm vụ tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ dàng sửa chúng.

Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.

Logrocket Records nhật ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/phản hồi mạng chậm với các tiêu đề + thân, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn!

Hãy thử nó miễn phí.