React ES6 Destructuring

Destructuring

Để minh hoạ cho Destructuring, chúng ta sẽ đi làm một cái bánh sandwich. Chúng ta có bao giờ lấy tất cả mọi thứ ra khỏi tủ lạnh để làm bánh sandwich hay không? Câu trả lời là Không, chúng ta chỉ lấy ra những thứ mà chúng ta sẽ sử dụng để làm bánh sandwich mà thôi.

Destructuring thì cũng hoàn toàn giống như vậy. Chúng ta có thể có một mảng hoặc một đối tượng mà chúng ta đang làm việc với nó, nhưng chúng ta chỉ cần lấy ra một số mục được chứa trong đó thôi.

Destructuring giúp chúng ta dễ dàng chỉ trích xuất ra những gì cần thiết.

Destructuring một mảng

Ví dụ sau đây là cách cũ để gán các phần tử của mảng cho biến:

Ví dụ sau đây là cách mới để gán các phần tử của mảng cho biến:

Khi Destructuring một mảng, thứ tự mà các biến được khai báo thì rất quan trọng.

Nếu như chúng ta chỉ muốn car và suv thì chúng ta có thể bỏ đi truck nhưng phải giữ nguyên dấu phẩy:

Destructuring có ích khi một function trả về một mảng:

Ví dụ:

Destructuring một đối tượng

Ví dụ sau đây là cách cũ để sử dụng một đối tượng ở bên trong một function:

Ví dụ sau đây là cách mới để sử dụng một đối tượng ở bên trong một function:

Lưu ý rằng các thuộc tính của đối tượng không cần phải được khai báo theo một thứ tự cụ thể.

Chúng ta thậm chí có thể Destructuring sâu hơn nữa các đối tượng được lồng nhau bằng cách tham chiếu đến đối tượng được lồng nhau đó sau đó sử dụng một dấu hai chấm và dấu ngoặc nhọn để Destructuring lần nữa các mục cần thiết từ đối tượng được lồng nhau:

Ví dụ: