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.
- Phá vỡ
- đối tượng
- mảng
- chức năng
Các bài viết liên quan
Viết chức năng kiểm tra chuỗi
Có chứa thứ chúng ta truyền vào hay không. Trả về chuỗi chúng ta truyền vào hay không.JavascriptVòng lặp do while trong javascript
Chạy một lần trước khi kiểm tra điều kiệnJavascriptViết chương trình in ra tất cả các số lẽ `0 <= 100` trừ số 5, 17, 33
Bài tập căn bản. Cùng nhau giải quyết.Giải ThuậtĐối tượng trong javascript
Nó được sử dụng để lưu trữ các bộ sưu tập khóa khác nhau và các giá trị khác nhau tùy ý.JavascriptThêm phương pháp vào trong đối tượng trong javascript
Cùng nhau tìm hiễu các cách thêm phương pháp vào trong đối tượng trong jsJavascript