Mảng bất biến JavaScript

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'
}

7

Mộ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ác

Vớ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ính

Trong 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ản

Có 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 gian

Có 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ày

Tô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

Bạn có sử dụng đối tượng cố định trong JavaScript không?

một chủ đề
🧵 👇#DEVCommunity #100DaysOfCode #DEVCommunityIN #DEVCommunityNG #javascript

– Tapas Adhikary (@tapasadhikary) ngày 19 tháng 7 năm 2021

Cách tạo đối tượng đóng băng trong 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ượng

Hã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ến

const 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"}

1

Chờ đã – 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ốn

Hã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ư sau

Vì 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"}

5

supportedLanguages = {'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ăng

Tí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ảng

Trong 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ến

Hã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'
}

0

Bạ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ông

Mộ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'
}

2

Bây giờ, hãy thử thay đổi tên db

const supportedLanguages = {
  'af': 'Afrikaans',
  'bn': 'Bengali',
  'de': 'German',
  'en': 'English',
  'fr': 'French'
}

3

Nó 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

Cách đóng băng sâu một đối tượng trong JavaScript

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

• const supportedLanguages = {
    'af': 'Afrikaans',
    'bn': 'Bengali',
    'de': 'German',
    'en': 'English',
    'fr': 'French'
  }

  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ó

Đâ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ăng

Khô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

  const supportedLanguages = {
    'af': 'Afrikaans',
    'bn': 'Bengali',
    'de': 'German',
    'en': 'English',
    'fr': 'French'
  }

  4 để đóng băng một đối tượng
• 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

  const frozenSupportedLanguages = Object.freeze(supportedLanguages);
  
  // The supportedLanguages and frozenSupportedLanguages are same
  
  frozenSupportedLanguages === supportedLanguages; // returns true
  

  0 với một giá trị đối tượng không giống như đóng băng đối tượng
• Bạn có thể đóng băng một mảng bằng phương pháp

  const frozenSupportedLanguages = Object.freeze(supportedLanguages);
  
  // The supportedLanguages and frozenSupportedLanguages are same
  
  frozenSupportedLanguages === supportedLanguages; // returns true
  

  8 tương tự
• 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

  const supportedLanguages = {
    'af': 'Afrikaans',
    'bn': 'Bengali',
    'de': 'German',
    'en': 'English',
    'fr': 'French'
  }

  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ần
• Unfreezing không được hỗ trợ trong ngôn ngữ (chưa)

Trước Khi Chúng Ta Kết Thúc

Đó 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

---

QUẢNG CÁO TAPAS

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

Mảng có bất biến trong JavaScript không?

Làm cách nào để không thay đổi mảng trong JavaScript?

Làm cách nào để cập nhật mảng không thay đổi trong JavaScript?

Phương thức mảng nào là bất biến?