Trong JavaScript, chúng tôi sử dụng
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
6 để lưu trữ nhiều giá trị dưới dạng cấu trúc dữ liệu phức tạp. Bạn tạo một đối tượng bằng một cặp dấu ngoặc nhọn const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
7Một đối tượng có thể có một hoặc nhiều thuộc tính. Mỗi thuộc tính là một cặp khóa-giá trị được phân tách bằng dấu
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
8. Khóa phải là một chuỗi hoặc loại biểu tượng JavaScript. Giá trị có thể thuộc bất kỳ loại nào, kể cả đối tượng khácVới lời giải thích về một đối tượng, hãy tạo một đối tượng để xem nó hoạt động như thế nào
const user = {
'name': 'Bob',
'age': 27
}
Ở đây chúng tôi đã tạo một đối tượng có hai thuộc tính [tên, tuổi] và các giá trị tương ứng của chúng. Chúng tôi đã tạo một biến có tên là
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
9 với từ khóa const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
0 và chúng tôi đã gán đối tượng cho biến đó làm giá trịTheo mặc định, các đối tượng là
const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
1. Điều này có nghĩa là sau khi chúng được tạo, bạn có thể thêm thuộc tính mới cho chúng, sửa đổi giá trị của thuộc tính hiện có hoặc xóa thuộc tínhTrong những năm đầu lập trình, tôi thấy các thuật ngữ
const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
1 và const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
3 rất khó hiểu. Hãy để tôi thử giải thích nó bằng tiếng Anh đơn giảnCó thể thay đổi là thứ bạn có thể thay đổi. Bất biến chỉ là điều ngược lại với điều đó. Vì vậy,
const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
4 là khả năng thay đổi theo thời gian. const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
5 có nghĩa là một cái gì đó không thay đổi theo thời gianCó thể có những tình huống mà bạn không muốn một đối tượng thay đổi theo chương trình. Vì vậy, bạn sẽ muốn làm cho nó bất biến
Khi một đối tượng là bất biến, bạn không thể thêm một thuộc tính mới vào nó, sửa đổi nó hoặc xóa một thuộc tính hiện có. Thậm chí không có cách nào để mở rộng nó
Đây là ý nghĩa của một
const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
6 mà chúng ta sẽ tìm hiểu, thực hành và hiểu trong bài viết nàyTôi đã thảo luận về các vật thể bị đóng băng trong một chủ đề Twitter gần đây. Xin vui lòng có một cái nhìn. Bài viết này sẽ mở rộng về chủ đề với nhiều chi tiết và ví dụ hơn
Cách tạo đối tượng đóng băng trong JavaScriptBạn có sử dụng đối tượng cố định trong JavaScript không?
– Tapas Adhikary [@tapasadhikary] ngày 19 tháng 7 năm 2021
một chủ đề
🧵 👇#DEVCommunity #100DaysOfCode #DEVCommunityIN #DEVCommunityNG #javascript
Bạn có thể đóng băng [làm cho không thể thay đổi] một đối tượng bằng cách sử dụng chức năng
const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
7. Đối tượng được truyền cho phương thức const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
8 sẽ trở thành bất biến. Phương thức const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
9 cũng trả về cùng một đối tượngHãy tạo một đối tượng của các ngôn ngữ được hỗ trợ
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
Nếu bạn không muốn đối tượng này thay đổi sau khi nó được tạo, chỉ cần sử dụng phương thức
const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
8 để biến nó thành bất biếnconst frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
Bây giờ, hãy thử thay đổi một trong hai đối tượng và xem điều gì sẽ xảy ra
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
Bạn sẽ gặp lỗi khi thử thay đổi một đối tượng cố định [đối tượng không thay đổi] trong môi trường JavaScript
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
1Chờ đã – từ khóa const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
0 không làm điều tương tự sao?À, không hẳn. Từ khóa
const frozenSupportedLanguages = Object.freeze[supportedLanguages];
// The supportedLanguages and frozenSupportedLanguages are same
frozenSupportedLanguages === supportedLanguages; // returns true
0 và // Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
4 không giống nhau. Khi bạn gán một đối tượng cho một biến được tạo bằng từ khóa const, bạn không thể gán lại giá trị khác. Tuy nhiên, bạn có thể sửa đổi các đối tượng được gán theo bất kỳ cách nào bạn muốnHãy hiểu sự khác biệt với một ví dụ. Lần này, chúng tôi sẽ lấy cùng một đối tượng
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
5 nhưng sẽ không đóng băng nóconst supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
Bây giờ bạn có thể sửa đổi nó như thế này
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns true
// log the object to the console
console.log[supportedLanguages];
Bây giờ đối tượng
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
5 được thay đổi như sauVì vậy, thay đổi này được cho phép. Nhưng nếu bạn cố gắng gán một đối tượng mới cho biến
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
5supportedLanguages = {'id': 'Indonesian'};
Bạn sẽ nhận được lỗi này
Tôi hy vọng sự khác biệt đã rõ ràng – đây cũng là một câu hỏi phỏng vấn thường gặp
Tại sao chúng ta cần các đối tượng cố định trong JavaScript?Một lần nữa, chúng ta cần các đối tượng đóng băng khi chúng ta cần tính bất biến. Trong lập trình hướng đối tượng, thường có các API mà chúng ta không thể mở rộng hoặc sửa đổi bên ngoài ngữ cảnh hiện tại
Bạn có nhớ từ khóa
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
8 trong Java không? . Tính bất biến là một khái niệm cần thiết để sử dụng trong lập trình chức năngTính bất biến cũng thường quan trọng trong ngôn ngữ lập trình JavaScript. Bạn có thể muốn một đối tượng cấu hình là bất biến, một bộ ngôn ngữ được hỗ trợ cố định cho các ứng dụng của bạn hoặc bất kỳ thứ gì khác mà bạn không muốn thay đổi trong thời gian chạy
Bạn cũng có thể đóng băng một mảngTrong JavaScript,
// Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
9 là các đối tượng ngầm. Vì vậy, bạn cũng có thể áp dụng // Add a new property
supportedLanguages['kn'] = 'Kannada';
// Modify an existing property
supportedLanguages["af"] = 'something else';
// Delete a property
delete supportedLanguages.bn; // returns false
// log the object to the console
console.log[supportedLanguages]; // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}
4vào mảng để biến chúng thành bất biếnHãy lấy một loạt các giác quan của con người
const senses = ['touch', 'sight', 'hearing', 'smell', 'taste'];
Bây giờ chúng ta có thể làm cho nó trở nên bất biến như thế này
Object.freeze[senses];
Bây giờ, hãy thử đẩy một phần tử vào mảng đó. Điều đó là không thể
senses.push['walking'];
Đầu ra sẽ là lỗi sau
Cố gắng xóa một phần tử khỏi mảng
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
0Bạn sẽ nhận được lỗi này
Vui lòng thông báo lỗi trong cả hai trường hợp. Nó nói rõ ràng, thuộc tính thêm và xóa không được phép vì đối tượng cơ bản không thể mở rộng
Đóng băng đối tượng nôngMột thuộc tính đối tượng JavaScript có thể có một đối tượng khác làm giá trị của nó. Nó có thể đi đến một cấp độ sâu hơn xuống
Khi chúng ta đóng băng một vật thể, đó là đóng băng
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
1. Điều này có nghĩa là chỉ các thuộc tính cấp cao nhất bị đóng băng. Nếu bất kỳ giá trị nào của thuộc tính là một đối tượng khác, thì đối tượng bên trong đó không bị đóng băng. Bạn vẫn có thể thay đổi nóHãy hiểu điều này với ví dụ về một đối tượng cấu hình
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
1Đối tượng cấu hình có các thuộc tính như db, máy chủ, mật khẩu và cổng với các giá trị kiểu chuỗi đơn giản. Tuy nhiên, thuộc tính quản trị có một đối tượng là giá trị. Bây giờ, hãy đóng băng đối tượng cấu hình
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
2Bây giờ, hãy thử thay đổi tên db
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
3Nó không được phép vì đối tượng bị đóng băng. Tuy nhiên, bạn có thể làm điều này
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
4Ở đây chúng tôi đã thay đổi thuộc tính của đối tượng lồng nhau. Vì đối tượng đóng băng có bản chất nông, nó sẽ không ngăn chúng ta thay đổi đối tượng lồng nhau. Vì vậy, nếu bạn đăng nhập đối tượng vào bảng điều khiển, đây là những gì bạn sẽ nhận được
Nhưng làm cách nào để đóng băng sâu một đối tượng nếu bạn cần hoặc muốn?
Trong lập trình, đệ quy là một phương pháp sử dụng một thủ tục, hàm hoặc thuật toán để gọi chính nó. Hãy xem bài viết này để hiểu sâu hơn
Vì vậy, chúng ta có thể lặp qua mọi thuộc tính và áp dụng đệ quy phương thức đóng băng cho mọi thứ. Nó sẽ đảm bảo rằng các đối tượng lồng nhau cũng bị đóng băng
Để làm điều đó, bạn có thể viết một chức năng đơn giản như thế này
const supportedLanguages = {
'af': 'Afrikaans',
'bn': 'Bengali',
'de': 'German',
'en': 'English',
'fr': 'French'
}
5 Đâu là sự khác biệt giữa freeze[], seal[] và preventExtensions[]?với đối tượng. đóng băng chúng tôi đạt được sự bất biến đầy đủ. Nhưng có hai phương pháp khác cung cấp tính bất biến của đối tượng, chỉ một phần
2 – Chúng tôi không thể thêm một thuộc tính mới hoặc xóa các thuộc tính hiện có của một đối tượng được niêm phong bằng phương pháp này. Nhưng chúng ta vẫn có thể cập nhật giá trị của các thuộc tính hiện cóconst supportedLanguages = { 'af': 'Afrikaans', 'bn': 'Bengali', 'de': 'German', 'en': 'English', 'fr': 'French' }
3 – Phương pháp này ngăn việc tạo thuộc tính mới. Nhưng bạn có thể cập nhật và xóa các thuộc tính hiện cóconst supportedLanguages = { 'af': 'Afrikaans', 'bn': 'Bengali', 'de': 'German', 'en': 'English', 'fr': 'French' }
Đây là một bảng để so sánh chúng
CreateReadUpdateDeletefreeze❌✔️❌❌seal❌✔️✔️❌ngăn chặn Tiện ích mở rộng❌✔️✔️✔️Cách hủy đóng băng đối tượng bị đóng băngKhông có cách đơn giản nào để giải phóng một đối tượng bị đóng băng trong JavaScript
Bạn có thể mô phỏng quá trình giải phóng băng bằng cách tạo một bản sao của đối tượng duy trì nguyên mẫu
Đây là gói NPM thực hiện tương tự với bản sao nông
Tóm tắtĐể tóm tắt,
- Chúng ta có thể đóng băng một đối tượng để làm cho nó trở nên bất biến
- Bạn sử dụng phương pháp
4 để đóng băng một đối tượngconst supportedLanguages = { 'af': 'Afrikaans', 'bn': 'Bengali', 'de': 'German', 'en': 'English', 'fr': 'French' }
- Bạn không thể tạo thuộc tính mới, sửa đổi hoặc xóa thuộc tính hiện có hoặc mở rộng đối tượng khi áp dụng đóng băng
- Khai báo một biến với từ khóa
0 với một giá trị đối tượng không giống như đóng băng đối tượngconst frozenSupportedLanguages = Object.freeze[supportedLanguages]; // The supportedLanguages and frozenSupportedLanguages are same frozenSupportedLanguages === supportedLanguages; // returns true
- Bạn có thể đóng băng một mảng bằng phương pháp
8 tương tựconst frozenSupportedLanguages = Object.freeze[supportedLanguages]; // The supportedLanguages and frozenSupportedLanguages are same frozenSupportedLanguages === supportedLanguages; // returns true
- Phương pháp đóng băng thực hiện đóng băng nông. Sử dụng đệ quy để đóng băng sâu
- Các phương thức
7 vàconst supportedLanguages = { 'af': 'Afrikaans', 'bn': 'Bengali', 'de': 'German', 'en': 'English', 'fr': 'French' }
8 cung cấp tính bất biến một phầnconst supportedLanguages = { 'af': 'Afrikaans', 'bn': 'Bengali', 'de': 'German', 'en': 'English', 'fr': 'French' }
- Unfreezing không được hỗ trợ trong ngôn ngữ [chưa]
Đó là tất cả cho bây giờ. Tôi hy vọng bạn thấy bài viết này sâu sắc và nó giúp bạn hiểu rõ hơn về tính bất biến của đối tượng
Kết nối nào. Bạn sẽ thấy tôi hoạt động trên Twitter [@tapasadhikary]. Hãy theo dõi. Tôi cũng đã bắt đầu chia sẻ kiến thức bằng kênh YouTube của mình, vì vậy bạn cũng có thể xem qua
Bạn cũng có thể thích những bài viết này
- Sổ tay mảng JavaScript – Giải thích các phương pháp mảng JS với các ví dụ
- Hướng dẫn thực tế về phá hủy đối tượng trong JavaScript
- JavaScript. So sánh đẳng thức với ==, === và Object. Là
- Cách KHÔNG sử dụng Git trong thực tế. 10 cách sử dụng Git bạn nên biết để tránh
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
nhà văn. YouTuber. Người sáng tạo. Người hướng dẫn
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu