Sử Dụng Destructuring Assignment Trong Javascript

853

Giới thiệu

Trong bài viết này, mình xin chia sẻ về Destructuring Assignment – một cú pháp Es6cực kỳ hữu dụng của Javascript mà mình gần như dùng nó hàng ngày, mỗi khi làm việc với JS.
Theo định nghĩa chính thức trên MDN, “Destructuring Assignment là một biểu thức Javascript cho phép lấy giá trị (value) từ bên trong (array) hay thuộc tính (properties)trong object và gán cho các biến (variable) mới”.
Trong quá trình phát triển ứng dụng JS, ta rất ít khi chỉ làm việc với một hay hai kiểu dữ liệu đơn thuần như Number, String,… mà thường xuyên phải làm việc với nhiều kiểu dữ liệu, đặc biệt là với những kiểu dữ liệu ” tổng hợp ” như Object hay Array (trong JSthì array cũng là một Object). Destructuring Assignment giúp chúng ta tương tác với Object một cách khoa học và ngắn gọn hơn nhiều so với cú pháp Es5 hoặc cũ hơn, giúp code dễ đọc cũng như tăng tốc độ phát triển, maintain.

Sử dụng

Trong phần này mình sẽ chỉ ra các trường hợp điển hình ứng dụng Destructuring Assignment khi làm việc với JS.

Sử dụng Destructuring Assignment để lấy giá trị từ Object

Trong trường hợp ta nhận được một Object và muốn “bóc tách” thành các giá trị riêng biệt, ví dụ

Sử dụng Destructuring Assignment:

Hai đoạn code trên sẽ cho kết quả tương tự nhau, rõ ràng việc sử dụng Destructuring Assignment là ngắn gọn hơn, và nếu chúng ta muốn sử dụng tên biến khác với tên của thuộc tính bên trong Object, chẳng hạn:

Với Destructuring Assignment:

Đối với trường hợp cần lấy giá trị từ một object bên trong một object, ta sử dụng như sau:

Lưu ý rằng Destructuring Assignment không giới hạn số lượng lớp object bao trùm lên nhau.

  Quản lý bộ nhớ trong Javascript
  Cái bẫy chuột trong hàm Date.setMonth() của Javascript

Sử dụng Destructuring Assignment để tách giá trị từ Array

Giống với Object, Destructuring Assignment giúp việc ” bóc tách ” giá trị từ một Arraytrở nên dễ dàng hơn

Sử dụng Destructuring Assignment:

Cần lưu ý là Destructuring Assignment cho phép ra lấy ra một giá trị đúng theo indexbên trong Array và dựa vào dấu ‘,’ để phân biệt index, ví dụ nếu muốn lấy giá trị thứ nhất và thứ tư trong mảng:

Đồng thời ta cũng có thể sử dụng Destructuring Assignment đối với Array bên trong Array như sau

Phức tạp hơn một xíu, nếu kết hợp Destructuring Assignment giữa Object và Arraysẽ như sau
Array bên trong Object:

Object bên trong Array:

Để tránh nhần lẫn thì chỉ cần chú ý là đối với Object ta luôn dựa vào Properties và Index đối với Array.

Sử dụng Destructuring Assignment để truyền tham số vào Function

Khi function nhận object làm tham số, chẳng hạn:

Destructuring Assignment cho phép ra rút ngắn đoạn code trên, trở thành:

Tương tự với Array:

Tổng kết

Trong bài viết này mình đã chia sẻ chi tiết về cú pháp Es6 Destructuring Assignmenttrong Javascript, khái niệm cũng như các trường hợp thường được ứng dụng, hi vọng bài viết hữu ích với bạn đọc.

Techtalk via viblo

  Javascript - Một số mẹo giúp chuyển đổi String sang Number
  Một số lệnh Javascript console hữu ích