const a = {x: "Hi", y: "Test"}
const b = ???
// b = {x: "Bye", y: "Test"}
// a = {x: "Hi", y: "Test"}
Làm thế nào tôi có thể đặt
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
2 thành const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
3 mà không bị đột biến A?
Đã hỏi ngày 20 tháng 6 năm 2016 lúc 21:54Jun 20, 2016 at 21:54
Michaelmessermichaelmessermichaelmesser
3,5412 Huy hiệu vàng17 Huy hiệu bạc41 Huy hiệu đồng2 gold badges17 silver badges41 bronze badges
Hai lối...
Bạn có thể sử dụng
4: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];
Hoặc bạn có thể sử dụng toán tử lan truyền đối tượng.
Toán tử lây lan cho phép bạn "gán" tất cả các thuộc tính của một đối tượng cho một đối tượng khác.
Chúng ta có thể sử dụng nó ở đây trong một đối tượng theo nghĩa đen để gán tất cả các thuộc tính của
5 choconst a = {x: "Hi", y: "Test"}; const b = {...a, y: "hello"};
6:const a = {x: "Hi", y: "Test"}; const b = {...a, y: "hello"};
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];
Đã trả lời ngày 20 tháng 6 năm 2016 lúc 22:03Jun 20, 2016 at 22:03
2
Có một cách dễ dàng để thay đổi thuộc tính đối tượng mà không làm biến đổi đối tượng gốc.
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
Đã trả lời ngày 23 tháng 2 năm 2019 lúc 9:37Feb 23, 2019 at 9:37
1
Tạo một bản sao của đối tượng và thay đổi bản sao:
const b = Object.assign[{}, a, {x: "Bye"}]
Tài liệu cho
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
7Đã trả lời ngày 20 tháng 6 năm 2016 lúc 21:58Jun 20, 2016 at 21:58
TimostaudingertimostaudingerTimoStaudinger
39,9K15 Huy hiệu vàng87 Huy hiệu bạc92 Huy hiệu Đồng15 gold badges87 silver badges92 bronze badges
ES6 có chức năng tích hợp để sao chép các thuộc tính đối tượng,
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
4const b = Object.assign[{}, a, {x: 'Bye'}]
Ở đây chúng tôi tạo một đối tượng trống, đẩy tất cả các cặp giá trị khóa
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
5S vào, theo sau là các cặp giá trị khóa mới mà chúng tôi muốn ghi qua. Bởi vì đối tượng trống là đối số đầu tiên, chúng tôi đột biến đối tượng đó chứ không phải const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
5Đã trả lời ngày 20 tháng 6 năm 2016 lúc 22:02Jun 20, 2016 at 22:02
PhilvargphilvargPhilVarg
4.6532 Huy hiệu vàng18 Huy hiệu bạc34 Huy hiệu đồng2 gold badges18 silver badges34 bronze badges
Hãy thử điều này:
const b = Object.assign[{}, a, {x: "Bye"}]
1 Điều này sẽ tạo một đối tượng mới mà không có bất kỳ tham chiếu nào đến đối tượng cũ const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
5Trong trường hợp nếu bạn muốn làm điều này cho một mảng, hãy thử tương tự với
const b = Object.assign[{}, a, {x: "Bye"}]
3const b = a.map[item => Object.assign[[], ...item]];
Đã trả lời ngày 2 tháng 10 năm 2018 lúc 2:31Oct 2, 2018 at 2:31
Hakunahakunahakuna
5.6259 Huy hiệu vàng50 Huy hiệu bạc75 Huy hiệu Đồng9 gold badges50 silver badges75 bronze badges
1
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
7const a = {x: "Hi", y: "Test"}; const b = {...a, y: "hello"};
- 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"};
7let 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.
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'}]
Ở đâ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"};
7const 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];
0Nhâ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];
1JavaScript 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.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];
2Ở đâ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];
3Ở đâ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'}]
1].Ở đâ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'}]
2: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];
4Khi 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"};
7 có thể được sử dụng để sao chép tất cả các thuộc tính riêng từ một hoặc nhiều đối tượng nguồn sang đối tượng đích. Hàm này trả về đối tượng đích cho biến const b = a.map[item => Object.assign[[], ...item]];
7.Ở đâ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"};
7 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];
5Ở đâ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'}]
2 và sao chép các thuộc tính của nó vào 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"]}]0, mà chúng tôi thường chuyển là
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"]}]1 để ngăn chặn đột biế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];
6Ở đâ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"]}]0, chúng tôi tạo ra một phiên bản hoàn toàn mới mà sau này chúng tôi gán cho một biến. Điều này có nghĩa là chúng tôi không cần phải vượt qua đối số
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"]}]0. Thật không may, phiên bản này không hoạt động với từ khóa
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"]}]4 vì
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"]}]4 có thể được chỉ định lạ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];
7Khi nào nên sử dụng gán
Hàm
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
7 có thể được sử dụng để sao chép một đối tượng không được sửa đổi và gán một số thuộc tính mới cho một đối tượng hiện có. Trong mã mẫu trên, chúng tôi đã tạo một đối tượng trố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"]}]1, được gọi là
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"]}]0 và gán các thuộc tính từ đối tượng
const b = Object.assign[{}, a, {x: 'Bye'}]
2.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"};
7.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]1, đã được triển khai trong ES6 và có thể được sử dụng để hợp nhất hai hoặc nhiều đối tượng thành một đối tượng mới sẽ có các thuộc tính của các đối tượng được hợp nhất. Nếu hai đối tượng có cùng tên thuộc tính, thuộc tính đối tượng sau sẽ ghi đè lên cái trước.
Ở đâ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];
8Bâ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]2 chấp nhận hai đối số:
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"]}]0 và
const b = Object.assign[{}, a, {x: 'Bye'}]
2. Nếu cả hai giá trị là các đối tượng chúng ta gọi và trả về function shallow[source: T]: T { return { ...source, } } let profile = { "name": "Pascal", "age": 12 } const employee: {} = shallow[profile] console.log[employee]5 với
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"]}]0 và
const b = Object.assign[{}, a, {x: 'Bye'}]
2 đã nói ở trên làm đối số. Tương tự, khi cả hai giá trị là mảng, chúng tôi gọi và trả về function shallow[source: T]: T { return { ...source, } } let profile = { "name": "Pascal", "age": 12 } const employee: {} = shallow[profile] console.log[employee]8. Nếu
const b = Object.assign[{}, a, {x: 'Bye'}]
2 là 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]0, chúng tôi chỉ giữ bất kỳ giá trị nào trước đây, điều đó có nghĩa là chúng tôi trả lại đối số
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"]}]0. Nếu không có điều nào ở trên áp dụng, chúng tôi chỉ trả lại đối số
const b = Object.assign[{}, a, {x: 'Bye'}]
2.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];
9Cả
function shallow[source: T]: T { return { ...source, } } let profile = { "name": "Pascal", "age": 12 } const employee: {} = shallow[profile] console.log[employee]8 và
function shallow[source: T]: T { return { ...source, } } let profile = { "name": "Pascal", "age": 12 } const employee: {} = shallow[profile] console.log[employee]5 đều hoạt động theo cùng một cách: chúng tôi lấy các thuộc tính
const b = Object.assign[{}, a, {x: 'Bye'}]
2 và đặt chúng dưới cùng một khóa trong 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"]}]0.
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];
0Bâ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]7:
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];
1Phương pháp const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
7
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
Phương pháp
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
7 có thể được sử dụng để hợp nhất hai đối tượng và sao chép kết quả vào mục tiêu mới. Giống như toán tử lây lan, nếu các đối tượng nguồn có cùng tên thuộc tính, đối tượng sau sẽ thay thế đối tượng trước.Đâ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];
2Bâ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'}]
2, ngay cả khi chúng được lồng ba đối tượng sâu và lưu 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];
01 vào các thuộc tính. Điều này sau đó sẽ cho phép chúng tôi đặt giá trị tại đường dẫn thích hợp bên trong đố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"]}]0.
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];
01 là một loạt các chuỗi trông giống như thế nà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];
04.Ở đâ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];
3Chú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];
05 để có được một mảng các đối tượng có chứa đường dẫn và giá trị của các thuộc tính. Nếu đố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];
06 là 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];
07 hoặc không giống đối tượng, chúng ta có thể đi sâu hơn để chúng ta trả về một đối tượng chứa đố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];
06 và đường dẫn của nó.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];
07, chúng ta có thể chắc chắn rằng đó là một mảng hoặc một đối tượng. Nếu đó là một mảng, chúng tôi gọ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];
10. Nếu đó là một đối tượng, chúng ta gọ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];
11.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];
4Cả
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];
10 và 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];
11 lặp lại các thuộc tính gọ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];
05 cho mỗi thuộc tính có hiện tại ____ 115/________ 116 hiện được thêm vào 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];
01.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];
5Sau 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'}]
2, chúng ta có thể thấy rằng chúng được lồng sâu. Tuy nhiên, chúng tôi muốn giữ tất cả chúng trong một mảng duy nhất. Điều này có nghĩa là chúng ta cầ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];
19 mảng.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];
19 và sau đó 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];
21 giá trị cho mảng kết quả.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];
6Bâ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];
01, hãy để xem xét cách đặt tất cả các thuộc tính này trong đố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"]}]0.
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];
24 mà chúng ta sẽ sử dụng để đặt các giá trị theo đường dẫn tương ứng của chúng. Chúng tôi muốn có quyền truy cập vào thuộc tính cuối cùng của đường dẫn để đặt giá trị. Để làm như vậy, chúng ta cần phải đi qua các mục đường dẫn, tên thuộc tính của nó và mỗi lần nhận được giá trị của tài sản. Chúng tôi bắt đầu 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];
25 với đối tượng đích sau đó có sẵn dưới dạng đố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];
26.We start the
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];
25 function with the target object which is then available as the 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];
26 argument.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];
27, nó trở thành đố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];
26 trong lần lặp tiếp theo. Bằng cách này, khi chúng ta đến mục cuối cùng của đường dẫn, đố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];
26 là đối tượng hoặc mảng nơi chúng ta đặt giá trị.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];
26, đối với mỗi lần lặp, sẽ là: 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"]}]0 ->
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];
32 -> 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];
33.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"]}]0 có thể là một đối tượng trống trong khi các nguồn có thể sâu nhiều cấp. Điều này có nghĩa là chúng ta có thể phải tạo lại một đối tượng, hoặc một cấu trúc mảng trước khi đặt giá trị.
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];
7Chú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];
01 và trả về đối tượng chúng tôi bắt đầu.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];
8Nế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];
32 không 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];
33, chúng ta sẽ nhậ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]0 và sau đó là lỗi nếu chúng ta cố gắng đặt
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];
39. Để ngăn chặn điều này, trước tiên chúng tôi kiểm tra xem 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];
27 có tồn tại không. Nếu nó không tồn tại, chúng ta sẽ cần tạo nó như một đối tượng hoặc là một mảng. Nếu loại mục tiếp theo là 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];
41 [có hiệu quả là một chỉ mục], thì chúng tôi sẽ cần tạo một mảng. Nếu đó là một chuỗi, chúng tôi sẽ tạo một đối tượng.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];
9Bâ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]7 liên kết mọi thứ với nhau.
const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
0Khi 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];
43 từ giá trị được thông qua, nhưng 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];
44:const a = {x: "Hi", y: "Test"};
const b = {...a, y: "hello"};
1Khi 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];
45, sau đó hiển thị đối tượng ban đầu không thể sử dụng được.Đố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];
46]. Cho dù bạn chọn sao chép các đối tượng trong JavaScript hoặc TypeScript, hy vọng, hướng dẫn này đã cung cấp cho bạn các tùy chọn để xem xét cho nhiều trường hợp sử dụng. Nếu bạn quen thuộc với các kỹ thuật khác để sao chép các đối tượng trong JavaScript, vui lòng chia sẻ chúng trong phần bình luận.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í.