HomeLập trìnhJavaScriptCách hủy cấu...

Cách hủy cấu trúc đối tượng trong JavaScript


Kể từ ECMAScript 6 (hay gọi tắt là ES6), bạn có thể giải cấu trúc các đối tượng trong JavaScript. Là một nhà phát triển JavaScript, bạn có thể hủy cấu trúc các đối tượng như một phần công việc hàng ngày của mình.

Hãy tìm hiểu về lý do tại sao chúng ta sử dụng hủy cấu trúc và sau đó chúng ta sẽ tìm hiểu cách hủy cấu trúc các đối tượng JavaScript.

Hãy xem qua một ví dụ để giúp chúng ta hiểu tại sao chúng ta muốn hủy cấu trúc một đối tượng ngay từ đầu. Hãy tạo một đối tượng có tên là pet:

const pet:  = {
 name: 'Captain',
 food: 'Kibble',
 color: 'Black'
};

Giả sử chúng ta chỉ muốn in ra thức ăn của thú cưng. Chúng ta có thể làm như thế này:

console.log(pet.food);

Điều này sẽ xuất ra kibble đến bàn điều khiển. Tuy nhiên, thật tẻ nhạt khi viết ra pet.name mỗi khi chúng ta cần giá trị thực phẩm. Vì vậy, trước ES6, các nhà phát triển JavaScript sẽ làm điều này:

const food = pet.food;

Ở đây, chúng ta khai báo một biến có tên food và được cho là trỏ biến đó vào giá trị được lưu trữ bên trong pet.foodđó là kibble. Chúng tôi có thể chứng minh rằng chúng tôi đã thực hiện điều này bằng cách thêm dòng mã này:

console.log(food); // output: kibble

Tuy nhiên, giả sử chúng tôi muốn làm điều tương tự với phần còn lại của thuộc tính trong pet vật:

const name = pet.name;
const food = pet.food;
const color = pet.color;

Điều này bắt đầu trở nên dài dòng. Đây là đâu hủy diệt vào đi.

Đọc thêm  Định dạng chuỗi JavaScript – Định dạng chuỗi trong JS

Thay vì viết ra const food = pet.foodchúng ta có thể sử dụng hàm hủy và chỉ cần viết:

const { food } = pet;

Bây giờ nếu chúng ta in ra food một lần nữa, chúng ta có thể thấy chúng ta đã tạo food Biến đổi:

console.log(food); // output: kibble

Sử dụng phá hủy, mã của chúng tôi giờ đây ngắn gọn và khô khan hơn. Đây là lý do tại sao các nhà phát triển JavaScript bắt đầu sử dụng phá hủy sau khi nó được giới thiệu trong ES6.

Hãy tạm dừng một chút và xem lại dòng này:

const { food } = pet;

Có chuyện gì đang xảy ra ở đây?

Hãy nhớ rằng, trong một đối tượng JavaScript, một tài sản là một cặp khóa/giá trị. Khóa là một chuỗi và giá trị có thể là bất kỳ loại dữ liệu nào. bên trong pet đối tượng, một trong các phím là foodvà giá trị tương ứng của nó là kibble.

Khi chúng tôi bọc của chúng tôi food biến trong ngoặc, chúng tôi nhìn vào bên trong của chúng tôi pet đối tượng cho một thuộc tính có cùng tên. Chúng tôi tạo một biến mới với tên foodvà chúng tôi đặt giá trị của nó thành kibblegiá trị tương ứng của khóa đó.

Nếu bạn muốn hủy cấu trúc nhiều thuộc tính và khóa của chúng khỏi một đối tượng, bạn có thể thực hiện như sau:

const { name, food, color } = pet;

Bây giờ nếu bạn in ra các biến này, bạn sẽ thấy rằng tất cả chúng hiện đang tồn tại:

console.log(name, food, color) // output: captain chewtoy black

Trong bài viết này, chúng ta đã học cách hủy cấu trúc các đối tượng và lý do tại sao chúng ta muốn làm như vậy. Chúng ta cũng đã học cách hủy cấu trúc nhiều thuộc tính từ một đối tượng.

Đọc thêm  Cách đổi tên nhiều khóa đối tượng trong JavaScript

Cảm ơn bạn đã đọc!

Nếu bạn thích bài đăng này, hãy tham gia câu lạc bộ viết mã của tôi, nơi chúng ta cùng nhau giải quyết các thử thách viết mã vào Chủ nhật hàng tuần và hỗ trợ lẫn nhau khi chúng ta học các công nghệ mới.

Nếu bạn có phản hồi hoặc câu hỏi về bài đăng này, hoặc tìm tôi trên Twitter @madisonkanna.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status