Ví dụ về đối tượng bất biến trong JavaScript là gì?

Trước khi đi sâu tìm hiểu tầm quan trọng của tính bất biến, trước tiên chúng ta nên hiểu khái niệm về tính có thể thay đổi và tính không thay đổi trong phát triển phần mềm

Công chúa hôn một con ếch với hy vọng nó sẽ biến thành hoàng tử đẹp trai. Khái niệm về tính bất biến nói rằng con ếch mãi mãi là con ếch. Khái niệm bất biến chủ yếu bắt nguồn từ lập trình hướng đối tượng và chức năng. Bất cứ khi nào chúng ta muốn thay đổi một số dữ liệu [ví dụ như một đối tượng hoặc một mảng], chúng ta nên lấy lại một đối tượng mới với dữ liệu được cập nhật thay vì sửa đổi trực tiếp đối tượng ban đầu.  

Hãy coi tính bất biến là “lưu dưới dạng” bởi vì bạn biết nó trả về một đối tượng mới được thay đổi trong khi đột biến tại chỗ truyền thống sẽ giống như “lưu” có nghĩa là cập nhật bản gốc và bỏ qua trạng thái trước đó. Cấu trúc của dữ liệu bất biến không thể thay đổi

Dữ liệu sẽ là dữ liệu gốc và một khi đối tượng được tạo, chúng ta không thể sửa đổi trạng thái của nó trong một đối tượng bất biến. Coi khái niệm bất biến là cơ thể con người không chịu tác động của thế giới bên ngoài. Một trạng thái yên tâm.  

Khái niệm đột biến là ngược lại. Khả năng thay đổi mô tả liệu trạng thái của một đối tượng có thể được sửa đổi sau khi khai báo hay không. Coi như ếch hôn nhau biến thành hoàng tử. Lấy một ví dụ rằng chúng ta có một biến và chúng ta gán giá trị cho nó. Sau này nếu chúng ta cần sửa đổi giá trị của biến này và chúng ta thay đổi nó sau đó thay đổi trạng thái của nó thì đối tượng được coi là có thể thay đổi

Các nhà phát triển chưa bao giờ làm việc với khái niệm về tính bất biến có thể bị nhầm lẫn với việc gán một biến cho một giá trị mới hoặc gán lại. Trong JavaScript String và Numbers là các kiểu dữ liệu không thể thay đổi.  

JavaScript không phải là ngôn ngữ tốt để làm việc với dữ liệu theo kiểu bất biến. Trong JavaScript Mảng và đối tượng không phải là bất biến. Giá trị của chúng có thể thay đổi theo thời gian. Cả hai luôn được chuyển dưới dạng tham chiếu và phần lớn các phương thức có sẵn sẽ thay đổi dữ liệu tại chỗ. Bạn có thể xem xét ví dụ được đưa ra dưới đây…

Thí dụ. Sắp xếp phương pháp mảng

Javascript

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Output:
[2, 1, 4, 3]
[1, 2, 3, 4]
[1, 2, 3, 4]

Chúng tôi đã gán một mảng cho biến “a” và chúng tôi đang thực hiện thao tác sắp xếp trên nó. Mảng đã sắp xếp được gán cho biến “b” và bạn có thể thấy rằng chúng ta đang nhận được mảng đã sắp xếp cho cả hai biến sau khi thực hiện thao tác sắp xếp. Ở đây, các đối tượng và mảng được truyền dưới dạng tham chiếu thay vì sao chép cả hai biến “a” và “b” trỏ đến cùng một mảng trong bộ nhớ và mảng đó được thay đổi trực tiếp bởi phương thức sắp xếp.  

Rất nhiều phương thức mảng là phương thức Mutator. copyWithin, fill, pop, push, reverse, shift, sort, splice, unshift tất cả các phương thức này cho phép khả năng thay đổi. lát, từ, bản đồ và bộ lọc là bất biến vì nó tạo ra một mảng mới mà không làm thay đổi mảng ban đầu. Phương thức đối tượng không thay đổi là đối tượng. giao phó

Để làm cho các đối tượng và mảng trở nên bất biến, bạn có thể sử dụng một số kỹ thuật trong JavaScript và tạo các giá trị mới mà không sửa đổi nội dung gốc. Không thay đổi trực tiếp giá trị ban đầu của một đối tượng. Coi đối tượng này là bất biến và trả về một đối tượng hoàn toàn mới với giá trị được cập nhật

Toán tử trải rộng rất hữu ích khi thay đổi mảng và đối tượng vì nó lặp lại các giá trị và cho phép sao chép thuộc tính của các giá trị hiện có sang giá trị mới

Hãy hiểu khái niệm này với một ví dụ khác. Chúng tôi có một mảng dữ liệu chứa số ngày một nhân viên đã làm việc trong một số dự án

Thí dụ. phương pháp mảng cắt và sắp xếp

Javascript

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Ở phương thức trên, chúng ta đã sử dụng hai phương thức trên biến daysWorked.  

• Lát cắt. Trong ví dụ trên, chúng ta đang đạt được tính bất biến bằng cách sử dụng phương thức slice. Phương pháp này cắt đối tượng gốc và thay vì sửa đổi tập dữ liệu gốc, chúng tôi sẽ nhận được bản sao mới của đối tượng lastSixMonths
• Loại. Phương pháp này là một cách có thể thay đổi và nó đang sắp xếp tập dữ liệu gốc. Phương pháp này đang ngăn cản chúng tôi thực hiện các tính toán tiếp theo trên tập dữ liệu

Thí dụ. gán phương thức đối tượng

Javascript

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

_______434____435____430

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

Mục tiêu. gán là một phương thức lấy đối số , đối tượng trống và đối tượng nguồn [đối tượng phải được sao chép]. do đó, ở đây các thuộc tính đối tượng gfg1 được sao chép trong đối số đối tượng trống của gfg2 mà không thay đổi đối tượng gfg1

Thí dụ. toán tử lây lan

Javascript

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Output:

{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'typescript', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }
{ article: 'react', date: '30/05/2022' }

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

_______434____435____430

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5]
[
7, 7, 5, 9, 8,
 6, 6, 7, 9, 5
]
[ 7, 7, 5, 9, 8, 6 ]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9
]
[
5, 5, 6, 6, 7,
7, 7, 8, 9, 9]
[
5, 5, 6, 6,
7, 7, 7
]
[
5, 5, 6, 6, 7,
 7, 7, 8, 9, 9]

Tầm quan trọng của tính bất biến trong JavaScript

Phần tốt của tính bất biến là gì?

Tính bất biến cho phép kiểm soát chặt chẽ hơn dữ liệu của bạn ngay lập tức giúp mã của bạn an toàn hơn và dễ dự đoán hơn. Nói cách khác, các đối tượng bất biến cho phép bạn kiểm soát giao diện và luồng dữ liệu theo cách có thể dự đoán được, khám phá các thay đổi một cách hiệu quả. Nó cũng giúp dễ dàng triển khai các tính năng phức tạp như hoàn tác/làm lại, gỡ lỗi du hành thời gian, cập nhật và khôi phục lạc quan, v.v.  

Nếu chúng ta nói về thư viện frontend React, thư viện quản lý trạng thái Vue os Redux thì tính bất biến cũng có thể giúp đạt được hiệu suất tốt hơn bằng cách cho phép so sánh nhanh và rẻ giữa các phiên bản trạng thái trước và sau khi thay đổi. Các thành phần có thể tận dụng điều này và chỉ kết xuất lại một cách thông minh khi cần. Điều này có thể tăng đáng kể hiệu suất.  

Lợi ích chính của tính bất biến là khả năng dự đoán, hiệu suất và theo dõi đột biến tốt hơn

1. khả năng dự đoán

Trong bất kỳ ứng dụng nào khi chúng ta làm việc trên một số thư viện front-end, chúng ta khai báo rất nhiều trạng thái trong đó. Chúng tôi thực hiện hành động không đồng bộ và nó cập nhật trạng thái ban đầu [đột biến]. Khi người dùng cuối bắt đầu sử dụng, trạng thái được cập nhật sẽ khác đáng kể so với trạng thái ban đầu. Thay đổi trạng thái sẽ ẩn các thay đổi và nó tạo ra các tác dụng phụ có thể gây ra một số lỗi. Gỡ lỗi trở nên khó khăn trong những trường hợp như vậy

Khi bạn giữ cho kiến ​​trúc ứng dụng của mình không thay đổi và mô hình tinh thần đơn giản, việc dự đoán dữ liệu ở trạng thái tại bất kỳ thời điểm nào sẽ trở nên dễ dàng hơn và sau đó bạn có thể yên tâm rằng nó sẽ không tạo ra bất kỳ tác dụng phụ khó chịu nào.  

2. Hiệu suất

Tạo bộ nhớ chi phí đối tượng bất biến. Làm sao? . Để giảm mức tiêu thụ bộ nhớ, chúng tôi sử dụng chia sẻ cấu trúc

Bất kỳ bản cập nhật nào chúng tôi thực hiện đều trả về các giá trị mới, nhưng chúng tôi chia sẻ cấu trúc bên trong để giảm mức tiêu thụ bộ nhớ. Ví dụ: nếu bạn thêm vào một vectơ có 100 phần tử, thì nó không tạo ra một vectơ mới dài 101 phần tử. Chỉ một vài đối tượng nhỏ được phân bổ nội bộ

3. Theo dõi đột biến

Một trong những lợi thế của tính bất biến là bạn có thể tối ưu hóa ứng dụng của mình bằng cách sử dụng tham chiếu và bình đẳng giá trị. Điều này giúp bạn dễ dàng xác định nếu có gì thay đổi. Bạn có thể xem xét ví dụ về thay đổi trạng thái trong thành phần React. shouldComponentUpdate có thể được sử dụng để kiểm tra xem trạng thái có giống hệt so với đối tượng trạng thái hay không và ngăn nó hiển thị không cần thiết.  

Tính bất biến cho phép bạn theo dõi những thay đổi xảy ra với các đối tượng này giống như một chuỗi sự kiện. Các biến có tham chiếu mới dễ theo dõi so với các biến hiện có. Điều này giúp gỡ lỗi mã và xây dựng ứng dụng đồng thời. Ngoài ra, trình gỡ lỗi sự kiện giúp bạn phát lại các sự kiện DOM bằng các lần phát lại video hoạt động theo dõi đột biến.  

Lần đầu tiên, khái niệm bất biến có thể gây nhầm lẫn cho bạn. Bạn có thể làm tốt hơn nếu bạn hiểu nhu cầu và lợi ích của tính bất biến. Khi trạng thái bị đột biến, bạn gặp phải nhiều lỗi và xử lý nó giúp bạn hiểu rõ hơn về khái niệm bất biến.  

Đối tượng bất biến JavaScript là gì?

Điều gì là bất biến với các ví dụ?

Danh sách bất biến trong JavaScript là gì?

Làm cách nào để tạo đối tượng JavaScript bất biến?