Ghi chú của biên tập viên. 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 về sao chép các đối tượng trong JavaScript và TypeScript, bao gồm cả kỹ thuật sao chép có cấu trúc
Khi làm việc với lập trình hàm, một nguyên tắc nhỏ là luôn tạo đối tượng mới thay vì thay đổi đối tượng cũ. Khi làm như vậy, chúng ta có thể chắc chắn rằng việc can thiệp vào cấu trúc của đối tượng sẽ không ả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 sẽ làm cho toàn bộ mã dễ đoán hơn
Chính xác thì làm thế nào 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? . Để thoát khỏi một tham chiếu, chúng ta cần sao chép tất cả các thuộc tính của đối tượng sang một đối tượng mới. Trong bài viết này, chúng ta sẽ xem xét năm kỹ thuật mà chúng ta có thể sử dụng để sao chép các đối tượng trong JavaScript, cũng như thời điểm sử dụng từng kỹ thuật. Nếu có thể, 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 kiểu gõ tĩnh, nhưng nó là tùy chọn ưa thích của một số nhà phát triển. So với JavaScript, Typescript thường dễ đọc, dễ hiểu và gỡ lỗi hơn
Dưới đây là năm phương pháp sao chép JavaScript mà chúng tôi sẽ xem xét
- Bản sao nông
- Bản sao sâu
- chỉ định
- Hợp nhất với toán tử trải rộng hoặc hàm
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]5 - nhân bản có cấu trúc
Bản sao nông
Một bản sao nông của một đối tượng sẽ có cùng tham chiếu với đối tượng nguồn mà từ đó 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ể làm cho đối tượng khác thay đổi. Nói cách khác, chúng tôi có thể vô tình tạo ra những thay đổi không mong muốn trong nguồn hoặc bản sao. Điều quan trọng là phải nắm được sự khác biệt giữa việc sửa đổi có chọn lọc giá trị của thuộc tính dùng chung 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ó
JavaScript cung cấp các hoạt động sao chép đối tượng sẵn có tiêu chuẩn để tạo các bản sao 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]
6, 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, 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]
8, 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]
5, và let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
0, let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
1Đây là một ví dụ về bản sao nông trong JavaScript
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"]}]
Đây là 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 cách sử dụng toán tử trải rộng [_______52]
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
Đây là 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
let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3function 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]
Khi nào nên sử dụng bản sao nông
Bản sao nông có thể được sử dụng khi chúng ta xử lý một đối tượng chỉ có các thuộc tính với kiểu dữ liệu nguyên thủy [ví dụ: chuỗi hoặc số]. Nếu đối tượng của chúng tôi chứa các loại dữ liệu không nguyên thủy [ví dụ: hàm hoặc mảng], nó có thể làm gián đoạn chương trình của chúng tôi
Bản sao sâu
Bản sao sâu của một đối tượng sẽ có các thuộc tính không chia sẻ cùng tham chiếu với đối tượng nguồn mà từ đó bản sao được tạo. Kết quả là, chúng ta có thể thay đổi nguồn hoặc bản sao mà không thay đổi đối tượng khác. Nói cách khác, thực hiện thay đổi đối với một đối tượng sẽ không gây ra những thay đổi bất ngờ đối với nguồn hoặc bản sao.
Để tạo các bản sao sâu trong JavaScript, chúng tôi sử dụng các phương thức
let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
4 và let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
5. Đầu tiên, chúng tôi chuyển đổi đối tượng thành chuỗi JSON bằng hàm let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
4. Sau đó, chúng tôi phân tích cú pháp chuỗi bằng phương thức let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
5 để tạo một đối tượng JavaScript mớilet profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
Bây giờ, hãy xem cách tạo một bản sao sâu của một đối tượng trong TypeScript
Ví dụ đầu tiên của chúng tôi hoạt động theo cách đệ quy. Chúng ta viết một hàm
let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
8, hàm này kiểm tra loại đối số được gửi tới nó và gọi một hàm thích hợp cho đối số [nếu đó là một mảng hoặc một đối tượng] hoặc chỉ trả về giá trị của đối số [nếu nó không phải là một mả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]
8Hàm
let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
9 lấy tất cả các khóa của một đối tượng và lặp lại chúng, gọi đệ quy hàm let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
8 cho mỗi giá trị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]
1Vì vậy,
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]
81 lặp lại mảng được cung cấp, gọi let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
8 cho mọi giá trị trong đóHơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn
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]
4Bây giờ, hãy xem một ví dụ TypeScript khác theo một cách tiếp cận khác. Mục tiêu của chúng ta là 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 trước đó, phải không? . Những gì chúng tôi nhận được là một đối tượng mới hoàn toàn không biết về nguồn gốc của nó
Điều quan trọng cần lưu ý là trong ví dụ trước, các phương thức của đối tượng được giữ lại, nhưng ở đây chúng không. Vì định dạ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]
83 không hỗ trợ các hàm nên chúng bị xóa hoàn toànfunction 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]
9Khi 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ả kiểu 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 cập nhật các đối tượng hoặc mảng lồng nhau
chỉ định
Hàm
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]
5 có thể được sử dụng để sao chép tất cả vô số 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 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]
88Đây là một ví dụ về sao chép bằng hàm
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]
5 trong JavaScriptfunction 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]
3Đây là một ví dụ về sao chép bằng cách chỉ định trong TypeScript. Ở đây, chúng tôi chỉ cần lấy từng đối tượng
let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3 và sao chép các thuộc tính của nó sang 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]
11, mà chúng tôi thường chuyển thành 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]
12 để ngăn chặn đột biếnfunction 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Đây là một ví dụ khác về sao chép bằng cách chỉ định trong TypeScript. Ví dụ này là một phiên bản an toàn, trong đó, thay vì thay đổi đối tượ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]
11, chúng tôi tạo một đối tượng 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 ta không cần phải vượt qua đối số 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]
11. Thật không may, phiên bản này không hoạt động với từ khóa 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]
15 vì không thể chỉ định lại 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]
15function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
0Khi nào sử dụng gán
Hàm
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]
5 có thể được sử dụng để sao chép một đối tượng không bị 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, 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]
12, được gọi 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]
11 và gán các thuộc tính từ đối tượng let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3Các bài viết hay khác từ LogRocket
- Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
- Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
- Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
- Chuyển đổi giữa nhiều phiên bản của Node
- Khám phá cách tạo hoạt ảnh cho ứ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 tệp nhị phân
- So sánh NestJS với. Thể hiện. 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ó nối chúng lại 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 sẽ 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ử trải rộng hoặc phương pháp
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]
5Toán tử trải rộng
Toán tử trải rộ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]
42, đã đượ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 đã 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 đối tượng trướcĐây là một ví dụ về việc hợp nhất với toán tử trải rộng trong JavaScript
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
1Bây giờ, hãy xem một ví dụ về hợp nhất trong TypeScript
Hàm
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]
43 chấp nhận hai đối số. 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]
11 và let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3. Nếu cả hai giá trị đều là đối tượng, chúng tôi gọi và trả về 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]
46 với 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]
11 và let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3 đã nói ở trên làm đối số. Tương tự, khi cả hai giá trị đều là mảng, chúng ta gọi và trả về 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]
49. Nếu let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3 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]
91, chúng tôi chỉ giữ bất kỳ giá trị nào trước đó, điều đó có nghĩa là chúng tôi trả về đối số 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]
11. Nếu không có điều nào ở trên áp dụng, chúng tôi chỉ trả về đối số let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
2Cả
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]
49 và 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]
46 đều hoạt động theo cùng một cách. chúng tôi lấy các thuộc tính của let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3 và đặt chúng dưới cùng một khóa trong 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]
11function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
3Bây giờ tất cả những gì còn lại phải làm là tạo một hàm 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]
98function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
4phương pháp 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]
5
Phương thứ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]
5 có thể được sử dụng để hợp nhất hai đối tượng và sao chép kết quả sang mục tiêu mới. Cũng giống như toán tử trải phổ, nếu các đối tượng nguồn có tên thuộc tính giống nhau thì đối tượng sau sẽ thay thế đối tượng trướcĐây là một ví dụ
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
5Bây giờ, hãy xem 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 lấy tất cả các thuộc tính của đối tượng
let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3 , ngay cả khi chúng được lồng sâu ba đối tượng , và lưu một 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]
32 vào các thuộc tính. Điều này sau này 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 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]
11Một
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]
32 là một mảng các chuỗi trông giống như thế này. 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]
35Đây là một ví dụ về cách thức hoạt động của nó
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
6Chúng tôi gọi hàm
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]
36 để lấy một mảng các đối tượng chứa đường dẫn và giá trị của các thuộc tính. Nếu đối số 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]
37 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]
38 hoặc không giống như đối tượng, chúng tôi không thể đi sâu hơn nữa vì vậy chúng tôi trả về một đối tượng chứa đối số 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]
37 và đường dẫn của nóMặt khác, nếu đối số giống như đối tượng và không phải 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]
38, thì 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 nó là một mảng, chúng ta gọi 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]
71. Nếu nó là một đối tượng , chúng ta gọi ______372function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
7Cả
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]
71 và 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]
72 đều lặp lại các thuộc tính gọi tên 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]
36 cho mỗi thuộc tính với 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]
76/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]
77 hiện tại được thêm vào 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]
32function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
8Sau khi nhận được các đường dẫn và giá trị của toàn bộ đối tượng
let profile = ["Bruce",{"language":["English","Spanish","French"]}];
let profile_deep_copy = JSON.parse[JSON.stringify[profile]];
// Change the value of the 'language' property
profile_deep_copy[1].language = ["Ibo","Yoruba"]
// The 'language' property does not change in profile.
console.log[profile[1].language]; //[ "English", "Spanish", "French" ]
3, chúng ta có thể thấy rằng chúng được lồng sâu vào nhau. 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 function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
00 mảngLàm phẳng một mảng để lặp lại từng mục để kiểm tra xem đó có phải là một mảng không. Nếu là chúng tôi
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
00 nó và sau đó function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
02 giá trị cho mảng kết quảfunction shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
9Bây giờ chúng ta đã tìm hiểu cách lấy
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]
32, hãy xem xét cách đặt tất cả các thuộc tính này trong đối tượ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]
11Hãy nói về hàm
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
05 mà chúng ta sẽ sử dụng để đặt các giá trị tại các đườ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 xem qua các mục của đường dẫn, tên thuộc tính của nó và mỗi lần lấy giá trị của thuộc tính. Chúng ta bắt đầu hàm
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
06 với đối tượng đích mà sau đó có sẵn dưới dạng đối số function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
07. Mỗi lần chúng tôi trả về giá trị bên dưới
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
08, nó sẽ trở thành đối số function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
07 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ố function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
07 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ố
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
07, cho mỗi lần lặp, sẽ 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]
11 -> function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
13 -> function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
14Chúng ta phải nhớ rằ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]
11 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ự tạo lại cấu trúc của một đối tượng hoặc một mảng trước khi đặt giá trị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]
0Chúng tôi đặt giá trị ở mục cuối cùng của
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]
32 và trả về đối tượng mà chúng tôi đã bắt đầufunction 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]
1Nếu bên trong
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
13 không có function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
14, chúng tôi 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]
91 và sau đó là lỗi nếu chúng tôi cố gắng đặt function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
20. Để ngăn chặn điều này, trước tiên chúng tôi kiểm tra xem có tồn tại function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
08 không. Nếu nó không tồn tại, chúng ta sẽ cần tạo nó dưới dạng một đối tượng hoặc dưới dạng một mảng. Nếu loại của mục tiếp theo là function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
22 [thực tế là một chỉ mục], thì chúng ta sẽ cần tạo một mảng. Nếu nó là một chuỗi, chúng ta sẽ tạo một đối tượngfunction 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]
2Bây giờ, tất cả những gì còn lại phải làm là tạo hàm
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]
98 liên kết mọi thứ lại với nhaufunction 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]
3Khi nào nên sử dụng hợp nhất
Hợp nhất các đối tượng không phải là một phương pháp đ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 của đố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. Đó là một phương pháp toàn cầu sử dụng thuật toán sao chép 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 một nguồn mới, nơi chúng không còn có thể truy cập được trong nguồn ban đầu
Kỹ thuật này có thể được sử dụng với các đối tượng có thể chuyển nhượng, 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ị chuyển của tham số ban đầu. Do chuyển giao, đối tượng ban đầu sẽ không thể sử dụng được
Trong ví dụ dưới đây, mã sẽ chuyển
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
24 từ giá trị được truyền vào, nhưng không chuyển function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
25function 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]
4Khi 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 thực dữ liệu không đồng bộ trong bộ đệm trước khi lưu dữ liệu. Để tránh bộ đệm bị sửa đổi trước khi lưu dữ liệ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 truyền dữ liệu. Với nhân bản có cấu trúc, mọi nỗ lực sửa đổi bộ đệm ban đầu sẽ không thành công, ngăn chặn việc vô tình sử dụng sai bộ đệm
Phần kết luận
Trong bài viết này, chúng ta đã thảo luận về 5 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 kiểu dữ liệu nguyên thủy [chuỗi hoặc số]. Sao chép sâu đảm bảo rằng không có tham chiếu đế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 tôi 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 tôi xác thực không đồng bộ và dữ liệu đối tượng
function shallow[source: T]: T {
return {
...source,
}
}
let profile = {
"name": "Pascal",
"age": 12
}
const employee: {} = shallow[profile]
console.log[employee]
26, sau đó hiển thị đối tượng ban đầu không sử dụng đượcĐối tượng là phương thức cơ bản để chúng ta tổ chức và truyền dữ liệu trong JavaScript. Chúng được thể hiện trong TypeScript thông qua các loại đối tượng [______927]. Cho dù bạn chọn sao chép các đối tượng bằng JavaScript hay TypeScript, hy vọng rằ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 sao chép đối tượng khác trong JavaScript, vui lòng chia sẻ chúng trong phần nhận xét
Nhật KýTên Lửa. Gỡ lỗi JavaScript dễ dàng hơn bằng cách hiểu ngữ cảnh
Gỡ lỗi mã luôn là một công việc tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ sửa chúng
LogRocket cho phép bạn hiểu những lỗi này theo những cách mới và độc đáo. Giải pháp giám sát giao diện người dùng của chúng tôi theo dõi mức độ tương tác của người dùng với giao diện người dùng JavaScript của bạn để cung cấp cho bạn khả năng tìm ra chính xác những gì người dùng đã làm dẫn đến lỗi
LogRocket ghi nhật ký bảng điều khiển, thời gian tải trang, dấu vết ngăn xếp, yêu cầu/phản hồi mạng chậm với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn thế
Làm cách nào để cập nhật một giá trị khóa trong đối tượng JavaScript?
Để chỉ cập nhật một giá trị trong một đối tượng, hãy sử dụng ký hiệu dấu ngoặc vuông [] để chọn khóa bạn muốn cập nhật. .
Sử dụng đối tượng. .
Áp dụng bất kỳ logic nào để quyết định giá trị nào sẽ được cập nhật
Cập nhật giá trị của từng giá trị bằng vòng lặp forEach hoặc for
Làm cách nào để thay đổi một phần tử của đối tượng trong js?
Thay đổi giá trị của đối tượng trong mảng. Gọi phương thức findIndex[] để lấy chỉ mục của đối tượng cụ thể. Truy cập mảng tại chỉ mục và thay đổi giá trị của thuộc tính bằng ký hiệu dấu chấm . Giá trị của đối tượng trong mảng sẽ được cập nhật tại chỗ.
Làm cách nào để cập nhật trường cụ thể trong đối tượng JavaScript?
Giải pháp là sao chép đối tượng. const newObject = {. đối tượng}; . newObject[property] = "Giá trị cập nhật"; . .
Làm cách nào để thay đổi giá trị đối tượng trong mảng JavaScript?
Để cập nhật một đối tượng trong một mảng JavaScript, bạn có thể sử dụng phương thức “findIndex[]” để thực thi từng phần tử mảng và cập nhật các giá trị đối tượng tương ứng, phương thức vòng lặp “for” để lặp qua một mảng và cập nhật giá trị đã chỉ định và “map