Destructuring Assignment Trong Javascript

Hôm nay bạn hãy cùng mình đi vào tìm hiểu về khái niệm cũng như cách sử dụng Destructuring Assignment trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Destructuring Assignment là cú pháp được cung cấp trong phiên bản ES6 giúp chúng ta có thể dễ dàng lấy các giá trị trong array(mảng) và object(đối tượng) để gán vào biến mà không cần phải sử dụng vòng lặp hay các phương thức khác. Bây giờ chúng ta sẽ cùng nhau đi vào tìm hiểu cách sử dụng của nó ở dưới đây nhé.

Trước khi đi vào vấn đề chính thì mình sẽ minh họa sơ qua cách chúng ta hay lấy giá trị của các phần tử trong mảng thông qua ví dụ dưới đây nhé:

Cách lấy giá trị phần tử thông thường:

Bây giờ chúng ta sẽ đi vào tìm hiểu cú pháp của nó nhé:

Đoạn Code:

 let mang = ["Màu Xanh", "Màu Đỏ", "Màu Cam"];
/*Cách lấy thông thường*/
 let mau1 = mang[0];
 let mau2 = mang[1];
 let mau3 = mang[2];

 console.log(mau1);
 console.log(mau2);
 console.log(mau3);

Kết Quả:

Bạn có thể tham khảo thêm mảng(array) ở đường dẫn đây nhé.

Bây giờ chúng ta sẽ đi vào tìm hiểu cách sử dụng Destructuring Assignment để lấy các giá trị phần tử trong mảng ở ví dụ trên. Bạn xem đoạn code sau để nắm rõ hơn nhé:

Đoạn Code:

 let mang = ["Màu Xanh", "Màu Đỏ", "Màu Cam"];
/*Cách lấy phần tử bằng Destructuring Assignment*/
 let [mau1, mau2, mau3] = mang;

 console.log(mau1);
 console.log(mau2);
 console.log(mau3);

Kết Quả:

Nó sẽ tự động lấy giá trị theo số vị trí chỉ mục của phần tử trong mảng để gán vào cho biến. Khi sử dụng destructuring assignments nó sẽ giúp cho đoạn code dễ nhìn hơn cũng như giúp chúng ta lấy trị mà mình mong muốn trong mảng một cách nhanh hơn.

Như ví dụ trên nếu như bạn chỉ muốn lấy hai màu "Màu Xanh" và "Màu Cam" và bỏ phần tử ở giữa thì chúng ta có thể sử dụng dấu phẩy để ngăn cách các phần tử mà mình không muốn lấy ở trong mảng. Để dễ hình dung bạn xem đoạn code sau nhé:

Đoạn Code:

 let mang = ["Màu Xanh", "Màu Đỏ", "Màu Cam"];
/*Cách lấy phần tử bằng Destructuring Assignment*/
 let [mau1, , mau3] = mang;

 console.log(mau1);
 console.log(mau3);

Kết Quả:

Cũng với ví dụ trên nếu chúng ta muốn lưu trữ "Màu Xanh" vào một biến và các phần tử còn lại vào trong một biến thì bạn có thể sử dụng dấu ... trước biến đó. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

Đoạn Code:

 let mang = ["Màu Xanh", "Màu Đỏ", "Màu Cam"];
/*Cách lấy phần tử bằng Destructuring Assignment*/
 let [mau1, ...mauConlai] = mang;

 console.log(mau1);
 console.log(mauConlai);

Kết Quả:

Chúng ta có thể lấy giá trị trả về của một hàm để gán vào trong biến bằng cách sử dụng destructuring assignments. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 function mang() {
     return ["Màu Xanh", "Màu Đỏ", "Màu Cam"];
 }
/*Cách lấy phần tử bằng Destructuring Assignment*/
 let [mau1, mau2, mau3] = mang();

 console.log(mau1);
 console.log(mau2);
 console.log(mau3)

Kết Quả:

Để dễ hình dung chúng ta sẽ đi vào ví dụ gán giá trị vào các thuộc tính của object khi sử dụng destructuring assignments. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {};
 [khachHang.ho, khachHang.ten] = ["Nguyễn", "An"];

 console.log(khachHang);

Kết Quả:

Ví dụ khi chúng ta sử dụng biến nhiều hơn phần tử hiện có trong mảng thì các giá trị biến dư đó sẽ có giá trị là undefined. Để dễ hình dung hơn bạn cùng mình xem ví dụ sau nhé:

Đoạn Code:

 let [mau1, mau2] = ["Màu Xanh"];

 console.log("Giá trị biến màu 1: " + mau1);
 console.log("Giá trị biến màu 2: " + mau2);

Kết Quả:

Thì lúc này chúng ta có thể sử dụng giá trị mặc định để có thể khai báo giá trị cho biến. Bạn xem ví dụ sau đây để hiểu rõ hơn nhé:

Đoạn Code:

 let [mau1, mau2 = "Màu Đỏ"] = ["Màu Xanh"];

 console.log("Giá trị biến màu 1: " + mau1);
 console.log("Giá trị biến màu 2: " + mau2);

Kết Quả:

Khi bạn hoán đổi giá trị giữa các biến thì chúng ta có thể sử dụng destructuring assignments để giải quyết vấn đề trên. Để bạn hiểu rõ hơn chúng ta cùng nhau đi vào tìm hiểu ví dụ sau nhé:

Đoạn Code:

 let ten = "Nguyễn";
 let ho = "An";
 [ten, ho] = [ho, ten]

 console.log(ho);
 console.log(ten);

Kết Quả:

Đối với kiểu dữ liệu object thì chúng ta cũng có thể lấy các giá trị của thuộc tính đối tượng đó để gán vào trong biến. Cách nó hoạt động thì cũng có nhiều nét tương đồng so với kiểu dữ liệu mảng. Bây giờ chúng ta sẽ đi vào cách lấy dữ liệu bằng cách thông thường với kiểu dữ liệu object thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let khachHang = {
    ten: "An",
    ho: "Nguyễn"
 }
 let tenKhachHang = khachHang.ten;
 let hoKhachHang = khachHang.ho;

 console.log(hoKhachHang);
 console.log(tenKhachHang);

Kết Quả:

Nếu bạn muốn xem lại hoặc tham khảo thêm về object (đối tượng) thì nhấn vào đây nhé.

Bây giờ chúng ta sẽ đi vào sử dụng destructuring assignment để lấy giá trị đối với kiểu dữ liệu object bằng ví dụ dưới đây nhé:

Đoạn Code:

 let khachHang = {
    ten: "An",
    ho: "Nguyễn"
 };
 let {ten, ho} = khachHang;

 console.log(ten);
 console.log(ho);

Kết Quả:

Với các giá trị thuộc tính ten và ho, dù bạn có chuyển vị trí nó trong việc khởi tạo biến thì giá trị của nó cũng sẽ không thay đổi nhé.

Nếu bạn gán tên biến khác so với tên thuộc tính của đối tượng thì kết quả trả về sẽ như thế nào nhỉ?
Để giải quyết vấn đề trên thì bạn thử xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {
    ten: "An",
    ho: "Nguyễn"
 };
 let {tenKhachHang, hoKhachHang}= khachHang;

 console.log(tenKhachHang);
 console.log(hoKhachHang);

Kết Quả:

Như bạn thấy thì chúng ta nhận được giá trị của hai biến là undefined.

Nhưng trong destructuring assignment có cung cấp cho chúng ta một cách để xác định tên khác cho biến không cần tuân theo quy tắc là đặt tên giống với thuộc tính của object. Để hiểu rõ hơn chúng ta cùng nhau đi vào ví dụ sau nhé:

Đoạn Code:

 let khachHang = {
    ten: "An",
    ho: "Nguyễn"
 };
 let {ten: tenKhachHang, ho: hoKhachHang}= khachHang;

 console.log(tenKhachHang);
 console.log(hoKhachHang);

Kết Quả:

Chúng ta có thể chỉnh sửa giá trị hay thêm mới các thuộc tính trong object nếu như thuộc tính đó không tồn tại. Để nắm rõ hơn chúng ta cùng nhau đi vào tìm hiểu ví dụ sau nhé:

Đoạn Code:

 let khachHang = {
    ten: "An",
    ho: "Nguyễn"
 };
 let {ten, ho, tuoi = 18, gioiTinh = "Nam"}= khachHang;

 console.log("Tên khách hàng là " + ten);
 console.log("Tuổi khách hàng là " + tuoi);

Kết Quả:

Cũng giống như mảng thì chúng ta có thể sử dụng dấu ... để lấy các thuộc tính trong kiểu dữ liệu object (đối tượng). Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {
    ten: "An",
    ho: "Nguyễn",
    tuoi: 18
 };
 let {ten, ...thongtinKhac}= khachHang;

 console.log(ten);
 console.log(thongtinKhac);

Kết Quả:

Như bạn biết thì một object có thể chứa được thêm nhiều các object khác. Do đó phần này chúng ta sẽ đi vào tìm hiểu cách lấy giá trị thuộc tính của object con đó. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {
   gioiTinh: "Nam",
   tuoi: 18,
   hoTen:{
      ten: "An",
      ho: "Nguyễn",
   }
 };
 let {hoTen: {ten, ho}}= khachHang;

 console.log(ten);
 console.log(ho);

Kết Quả:

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm và cách sử dụng destructuring assignments trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!