Các cách sử dụng của đối tượng JavaScript mà bạn phải biết

Chúng tôi sử dụng các đối tượng JavaScript để lưu trữ dữ liệu và truy xuất nó sau này. Chúng tôi lưu trữ dữ liệu (hay còn gọi là thông tin) key-valuetheo cặp. Cặp khóa-giá trị còn được gọi là object properties.

Đây là một employeeđối tượng có ba thuộc tính: id, name, dept as key và 007, 'James' và 'Spy' là các giá trị.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Kể từ ES6 (ECMAScript 2015), JavaScript cung cấp một cơ chế để xử lý các thuộc tính của các đối tượng theo một cách sáng tạo hơn nhiều. Cơ chế được gọi là Destructuring(còn được gọi là phân công hủy cấu trúc). Nó là một cú pháp mới được thêm vào ngôn ngữ hơn là một tính năng.

 Sử dụng cấu trúc hủy để lấy các giá trị từ một đối tượng

Cách sử dụng cơ bản nhất của cấu trúc đối tượng là lấy giá trị của khóa thuộc tính từ đối tượng.

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

Theo truyền thống, chúng tôi sẽ sử dụng ký hiệu dấu chấm (.) Hoặc ký hiệu chỉ số con ([]) để lấy các giá trị từ đối tượng. Đoạn mã dưới đây cho thấy ví dụ về truy xuất giá trị của idvà nametừ employeeđối tượng bằng cách sử dụng ký hiệu dấu chấm.

const id = employee.id;
const name = employee.name;

Không nghi ngờ gì nữa, nó hoạt động hoàn hảo. Nhưng hãy nghĩ về công việc gõ (hoặc sao chép-dán-chỉnh sửa) mệt mỏi khi bạn phải thực hiện nó cho nhiều giá trị thuộc tính? Đó là nơi mà cú pháp gán hủy cấu trúc xuất hiện như một vị cứu tinh.

Để cấu trúc lại một giá trị từ một đối tượng, bạn sử dụng một cú pháp như thế này,

const { id, name } = employee;

Ở đây, chúng tôi sử dụng các tên khóa của đối tượng để tạo các biến và gán chúng với giá trị từ đối tượng cho cùng một khóa. Trong đoạn mã trên, chúng tôi truy xuất giá trị của idvà namekhông cần nhập chúng vào nhiều dòng.

Sử dụng cấu trúc hủy để lấy các giá trị từ một đối tượng lồng nhau

Trong thực tế, đối tượng dữ liệu của bạn có thể không đơn giản như employeeđối tượng mà chúng ta đã thấy cho đến nay. Khóa của đối tượng có thể có một đối tượng khác làm giá trị và tạo thành một đối tượng lồng nhau. Bây giờ chúng ta hãy xem cách lấy giá trị cho một khóa từ một đối tượng lồng nhau.

Đây là employeeđối tượng của chúng ta trong đó giá trị của deptkhóa là một đối tượng. Nó có một thuộc tính với khóa addresscó giá trị là một đối tượng khác. Tuyệt vời, chúng tôi đang xử lý một đối tượng lồng nhau ở đây.

const employee = {
  id: 007,
  name: 'James',
  dept: {
    id: 'D001',
    name: 'Spy',
    address: {
      street: '30 Wellington Square',
      city: 'Chelsea'  
    }
  }  
}

Hãy truy xuất giá trị của thuộc addresstính theo cách truyền thống.

const address = employee.dept.address;

Nó hoạt động và đầu ra là,

{
    "street": "30 Wellington Square",
    "city": "Chelsea"
}

Bây giờ chúng ta hãy xuống một cấp nữa và lấy giá trị của thuộc streettính.

const street = employee.dept.address.street;

Tất nhiên, chúng tôi đã nhập nhiều hơn và kết quả là

30 Wellington Square

Bây giờ với cấu trúc hủy, mọi thứ thật đơn giản. Bạn có thể xác định tên khóa bằng cách sử dụng khóa tiền nhiệm của nó. Vì vậy, để truy xuất giá trị của address, chúng ta sẽ bắt đầu với khóa tiền nhiệm của nó dept. Vì vậy, deptlà chìa khóa cấp cao nhất không có người tiền nhiệm. Do đó, cú pháp là,

const { dept: { address } } = employee;
console.log(address);

và đối với streettài sản,

const { dept: { address: { street } } } = employee;
console.log(street);