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

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.