🐵 Destructuring Object 🐵

Phá vỡ đối tượng thành các biến trong javascript

Destructuring là một kỹ thuật rất phổ biến trong js. Các bạn chưa biết thì nên tìm hiểu nó thật kỹ.
js_masterJavascript
javascript-offjs.jpg

Chào các bạn

Trong bài viết này mình sẽ nói về cách phá vỡ đối tượng object thành các biến.

Object

Trong javascript kiểu dữ liệu object này chúng ta sẽ gặp rất thường xuyên. Nên chúng ta càng hiểu nhiều về nó càng tốt.

Đễ phá vỡ một đối tượng thành các biến truy cập dễ dàng chúng ta dùng như sau.

Cú pháp

1let {key1, key2, keyN} = {key1: 1, key2: 2, keyN: "N"};

Đầu tiên là từ khóa let hoặc const hoặc var theo sau đó là dấu ngoặc nhọn {...}. Trong dấu ngoặc nhọn dấu 3 chấm ... đại diện cho biến chúng ta muốn phá vỡ. Tiếp theo là dấu bằng = đến đối tượng chúng ta muốn phá vỡ.

Ví dụ:

1let user = {
2    name: "Hồ Quang Trí",
3    age: 1000,
4    className: ["javascript", "tailwind", "reactjs", "nextjs", "strapi"],
5};
6
7let {
8    name,
9    age,
10    className: [item1, item2, ...itemN]
11} = user // Phá vỡ đối tượng thành các biến
12
13console.log(name);  // "Hồ Quang Trí"
14console.log(age);   // 1000
15console.log(item1); // "javascript"
16console.log(item2); // "tailwind"
17console.log(itemN); // ["reactjs", "nextjs", "strapi"]

Các key đối tượng được gán với các biến có tên tương ứng.

  • user.name => name
  • user.age => age
  • user.className[0] => item1
  • user.className[1] => item2
  • user.className[...N] => itemN

Chúng ta có thể gán giá trị mặc định cho biến bằng cách

1let { name = "Hồ Quang Trí", age } = {
2    age: 1000,
3};
4
5
6console.log(name); // "Hồ Quang Trí"
7console.log(age);  // 1000

Như các bạn có thể thấy. Đối tượng bên phải dấu bằng = không có key bằng name. Nên bây giờ giá trị mặc định Hồ Quang Trí được sử dụng.

Chúng ta cũng có thể nhúng biểu thức vào biến chúng ta cần phá gỡ. Nếu biến đó chưa có giá trị thì biểu thức được sử dụng.

1let { name = prompt("Nhập vào Tên"), age } = {
2    age: 1000,
3};
4
5
6console.log(name); // "Tên"
7console.log(age);  // 1000

Khi bạn chạy ví dụ này. Chức năng prompt sẽ hiển thị thông báo bạn nhập. Nếu bạn nhập vào Tên thì kết quả sẽ như ví dụ trên.

Cũng từ ví dụ ở trên. Nhưng bây giờ đối tượng đã có name. Thì chức năng prompt sẻ không chạy.

1let { name = prompt("Nhập vào Tên"), age } = {
2    age: 1000,
3    name: "Hồ Quang Trí"
4};
5
6
7console.log(name); // "Hồ Quang Trí"
8console.log(age);  // 1000

Và bây giờ đầu ra nó đã khác.

Chúng ta cụng có thể đặt bí danh cho nó bằng cách

1let { name: n, age: a } = {
2    name: "Hồ Quang Trí",
3    age: 1000,
4};
5
6console.log(n); // "Hồ Quang Trí"
7console.log(a); // 1000
  • name => n N là bí danh của name
  • age => a A chính là bí danh của age

Chúng ta cũng có thể gán bí danh cùng giá trị mặc định cùng lúc

1let { name: n = "Hồ Quang Trí", age: a } = {
2    age: 1000,
3};
4
5console.log(n); // "Hồ Quang Trí"
6console.log(a); // 1000

Khi không có name ở đối tượng phá gỡ thì bí danh n sẽ sử dụng giá trị mặc định chúng ta gán Hồ Quang Trí

Chúng ta cũng có thể phá gỡ đối tượng lồng nhau.

1let user = {
2    name: "Hồ Quang Trí",
3    className: {
4        id: 123,
5        users: ["user1", "user2", "user3"],
6    },
7};
8
9let {
10    name,
11    className: {
12        id,
13        users: [user1, ...userN],
14    },
15} = user;
16
17console.log(name); // "Hồ Quang Trí"
18console.log(id); // 123
19console.log(user1); // "user1"
20console.log(userN); // ['user2', 'user3']

Đơn nhiên nếu càng lồng nhâu sâu thì mã của chúng ta càng phức tạp. Vì nó yêu cầu cách phá gỡ tương ứng với đối tượng chúng ta cần phá gỡ.

Áp dụng vào thực tế

Có rất rất là nhiều cách áp dụng nó vào. Tùy thuộc vào bài toán bạn cần giải quyết

Ví dụ giả sử chức năng chúng ta có rất nhiều tham số. Mỗi lần truyền vào tham số thì chúng ta bắt buộc phải thêm đúng theo thứ tự tham số. Nếu ko thì sẽ sai

1function getUser(name, age, phone) {
2    return {
3        name,
4        age,
5        phone,
6    };
7}
8
9let user = getUser("Tên", "0353210168", 1000);
10
11console.log(user); // {name: 'Tên', age: '0353210168', phone: 1000}

Ở ví dụ trên mình cố ý truyền tham số phone với age sai để các bạn hình dung.

Bây giờ chúng ta chuyển sang sài destructuring

1// Tham số chức năng bây giờ là object
2// name, age, phone là tên biến
3function getUser({ name, age, phone } = {}) {
4    return {
5        name,
6        age,
7        phone,
8    };
9}
10
11let objUser = {
12    name: "Tên",
13    phone: "0353210168",
14    age: 1000,
15};
16
17let user = getUser(objUser);
18
19console.log(user); // {name: 'Tên', age: 1000, phone: '0353210168'}

Trong thực tế nếu chúng ta biết cách áp dụng thì rất hay. Trong reactjs các bạn sẽ gặp kiểu này rất thường xuyên.

Tổng kết

Trong bài viết này mình đã hướng dẫn qua cho các bạn biết cách phá gỡ một đối tượng trong javascript.

Nó cũng không có gì khó cả. Chỉ là lý thuyết. Sau này lên cao mình sẽ hướng dẫn các bạn cách làm ra trang web hoàn chỉnh từ những lý thuyết căn bản này.

  • Phá vỡ
  • đối tượng
  • mảng
  • chức năng

OFFJS.COM - Blog học tập giải trí - 🐲

Chia sẻ nhiều kiến thức thú vị trong lập trình cũng như cuộc sống.

Giới thiệu


Trang web này mình sẽ nói về kiến thức lập trình và cuộc sống mà các bạn mới học hay đang dự định học. Có một bước đi đầu đời vững chắc.

Hồ Quang Trí.jpg

Đi kèm với đó là những lý thuyết và các dòng code minh họa. Để các bạn dễ hình dung.

Đơn nhiên cũng không dễ dàng ngày một ngày hai mà học hết được.

Học Tập Là Một Con Đường Dài Vô Tận

Nó sẽ nuốt các bạn vô số thời gian nhưng bù lại khi đã biết thì mọi thứ thật là tuyệt.

1console.log("Hồ Quang Trí");

Nếu có ai nói bạn học lập trình trong vòng 3 đến 6 tháng thì mình xin nói thật không bao giờ có chuyện đó nhé.

Chúc các bạn thành công.

Chân trang

phone-toan-phat.png

0353210168

address-toan-phat.png

Việt Nam