Gán cấu trúc đối tượng JavaScript cho các biến hiện có

Chúng tôi sử dụng các đối tượng JavaScript để lưu trữ dữ liệu và truy xuất dữ liệu sau. Chúng tôi lưu trữ dữ liệu [còn gọi là thông tin] theo cặp

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

9. Cặp khóa-giá trị còn được gọi là

const { id, name } = employee;

0

Đây là một đối tượng

const { id, name } = employee;

1 với ba thuộc tính. id, name, dept làm khóa và 007, 'James' và 'Spy' làm giá trị

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

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Kể từ ES6[ECMAScript 2015], JavaScript cung cấp cơ chế xử lý các thuộc tính của đối tượng theo cách sáng tạo hơn nhiều. Cơ chế này được gọi là

const { id, name } = employee;

2 [còn được gọi là phép gán phá hủy]. Đó 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

Nếu bạn cũng muốn học từ nội dung video, bài viết này cũng có sẵn dưới dạng video hướng dẫn trên YouTube tại đây. 🙂

Đừng quên SUBSCRIBE cho nội dung trong tương lai

Trong bài viết này, chúng ta sẽ tìm hiểu về các cách sử dụng hủy đối tượng quan trọng nhất mà bạn phải biết với tư cách là nhà phát triển web. Nó sẽ giúp bạn trở thành một nhà phát triển có năng lực và hiệu quả. Nếu bạn biết thêm những công dụng hay ho nào khác, đừng quên cho chúng tôi biết ở phần bình luận bên dưới nhé

⭐ Sử dụng hàm hủy để truy xuất các giá trị từ một đối tượng

Cách sử dụng cơ bản nhất của phá hủy đố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'
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Theo truyền thống, chúng ta sẽ sử dụng dấu chấm[. ] hoặc ký hiệu chỉ số dưới [[]] để truy xuất các giá trị từ đối tượng. Đoạn mã bên dưới hiển thị ví dụ về truy xuất giá trị của

const { id, name } = employee;

3 và

const { id, name } = employee;

4 từ đối tượng

const { id, name } = employee;

1 bằng cách sử dụng ký hiệu dấu chấm

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

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Không còn nghi ngờ gì nữa, nó hoạt động hoàn hảo. Nhưng hãy nghĩ về công việc đánh máy [hoặc sao chép-dán-chỉnh sửa] mệt mỏi khi bạn phải làm điều đó cho nhiều giá trị thuộc tính?

Để hủy cấu trúc 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;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ở đây, chúng tôi sử dụng 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 lấy giá trị của

const { id, name } = employee;

3 và

const { id, name } = employee;

4 mà không cần nhập chúng vào nhiều dòng

Ngay cả khi bạn có thêm 20 giá trị để truy xuất, vấn đề chỉ là chỉ định các tên khóa đó bằng dấu phẩy. Thật là nhẹ nhõm

⭐ Sử dụng hủy để truy xuất 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ư đối tượng

const { id, name } = employee;

1 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 truy xuất giá trị cho một khóa từ một đối tượng lồng nhau

Đây là đối tượng

const { id, name } = employee;

1 của chúng tôi trong đó giá trị của khóa

const { id, name } = employee;

50 là một đối tượng. Nó có một thuộc tính với khóa

const { id, name } = employee;

51 có giá trị là một đối tượng khác. Tuyệt vời, chúng ta đang xử lý một đối tượng lồng nhau ở đây

const { id, name } = employee;

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy truy xuất giá trị của thuộc tính

const { id, name } = employee;

51 theo cách truyền thống

const { id, name } = employee;

9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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

const { id, name } = employee;

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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

const { id, name } = employee;

53

const { id, name } = employee;

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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

const { id, name } = employee;

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ với việc phá hủy, mọi thứ trở nên đơn giản. Bạn có thể xác định tên khóa bằng khóa tiền thân của nó. Vì vậy, để lấy giá trị của

const { id, name } = employee;

51, chúng tôi sẽ bắt đầu với khóa tiền thân của nó là

const { id, name } = employee;

50. Vì vậy,

const { id, name } = employee;

50 là khóa cấp cao nhất không có khóa tiền nhiệm. Do đó cú pháp là,

const { id, name } = employee;

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

và đối với tài sản

const { id, name } = employee;

53,

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

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy chuyển sang cái tiếp theo

⭐ Xác định một biến mới với tính năng phá hủy đối tượng

Có thể xảy ra trường hợp bạn không chắc liệu đối tượng có khóa cụ thể hay không khi truy xuất giá trị của nó. Ngoài ra, bạn có thể muốn tạo một biến mới với giá trị mặc định trong trường hợp khóa không có sẵn trong đối tượng

Hãy lấy đối tượng

const { id, name } = employee;

1 này làm ví dụ,

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

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, giả sử chúng ta đang cố truy xuất giá trị của thuộc tính

const { id, name } = employee;

59 không có trong đối tượng. Một cách truyền thống để làm điều đó là,

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

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu chúng tôi tìm thấy thuộc tính

const { id, name } = employee;

59, truy cập giá trị của nó và gán nó cho biến khác, hãy gán giá trị mặc định là 25. Vì vậy, chúng ta sẽ làm điều đó như thế nào với cú pháp hủy đối tượng mà chúng ta đã học cho đến nay?

nó khá đơn giản

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

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như bạn thấy, chúng ta có thể thực hiện dễ dàng bằng cách chỉ định tên khóa cùng với giá trị mặc định. Nó có tác dụng tương tự như cách truyền thống mà chúng ta vừa học

Cầm giữ. Phần phá hủy đã có nhiều phép thuật hơn để hiển thị. Làm thế nào về việc tạo một biến hoàn toàn mới và gán một giá trị được tính bằng cách sử dụng các giá trị thuộc tính đối tượng?

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

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi tạo một biến

const { id, name } = employee;

91 và gán một giá trị được tính bằng cách sử dụng các giá trị thuộc tính

const { id, name } = employee;

4 và

const { id, name } = employee;

50 của đối tượng

const { id, name } = employee;

1. Mạnh mẽ nhỉ?

Đầu ra là,

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

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

⭐ Làm cách nào để sử dụng bí danh phá hủy đối tượng JavaScript?

Trong quá trình phá hủy đối tượng JavaScript, bạn có thể đặt tên cho các biến đã hủy cấu trúc của mình là

const { id, name } = employee;

95. Nó rất hữu ích để giảm khả năng xung đột tên biến

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

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Giả sử mã nguồn của bạn có một biến hiện có tên là

const { id, name } = employee;

50. Vì vậy, nếu chúng ta sử dụng cùng một tên biến trong quá trình hủy, sẽ xảy ra xung đột tên

Thay vào đó, bạn có thể sử dụng tên bí danh để tạo biến với tên mới này. Ví dụ: chúng ta có thể sử dụng tên bí danh

const { id, name } = employee;

97 trong trường hợp này

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

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xin lưu ý, chúng tôi đã hủy cấu trúc với tên bí danh, không phải với tên khóa thực vẫn chưa được xác định

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

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra,

Tôi đã chia sẻ cách sử dụng này như một byte kiến ​​thức trên Twitter một thời gian trước,

Tapas Adhikary

@tapasadhikary

Trong Phá hủy đối tượng JavaScript, bạn có thể đặt tên 'bí danh' cho các biến đã hủy cấu trúc của mình.

Nó rất hữu ích để giảm nguy cơ xung đột tên biến.

Coi chừng. Ở đây, bạn đang phá hủy với tên bí danh, không phải tên khóa thực vẫn chưa được xác định.

09. 03 AM - 15/01/2022

THEO DÕI tôi trên Twitter để biết thêm mẹo và nội dung

⭐ Xử lý thuộc tính tên động với tính năng hủy đối tượng

Chúng tôi thường xử lý dữ liệu phản hồi API dưới dạng đối tượng JavaScript. Các đối tượng này có thể chứa dữ liệu động, với tư cách là khách hàng, chúng tôi thậm chí có thể không biết trước tên khóa thuộc tính

Hãy hiểu nó với một ví dụ [cùng một đối tượng nhân viên]

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

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng ta có thể viết một hàm trả về giá trị của các thuộc tính đối tượng nhân viên khi chúng ta chuyển một khóa làm đối số không? . Nó là năng động cho chức năng

Đây là đoạn mã để giới thiệu cách chúng ta có thể gọi hàm

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

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy định nghĩa nó ngay bây giờ

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

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xin lưu ý dấu ngoặc vuông [[. ]] vào khoảng

const { id, name } = employee;

98 trong nhiệm vụ phá hủy. Khóa chúng ta chuyển đến hàm được đánh giá và giá trị được lấy từ đối tượng. không phải là mát mẻ. Đó là cách sử dụng hiệu quả

⭐ Hủy cấu trúc các đối tượng trong đối số hàm và giá trị trả về

Bạn phải học cách sử dụng này nếu bạn muốn khám phá bất kỳ khung/thư viện dựa trên JavaScript hiện đại nào như React, Vue, Svelte, Angular, v.v. Bạn có thể sử dụng tính năng hủy đối tượng để chuyển các giá trị thuộc tính làm đối số cho hàm

Đối tượng nhân viên,

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

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, chúng ta hãy tạo một hàm đơn giản để tạo một thông báo bằng cách sử dụng các giá trị thuộc tính

const { id, name } = employee;

4 và

const { id, name } = employee;

50 để đăng nhập vào bảng điều khiển trình duyệt

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

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chỉ cần nhận ra nó đơn giản như thế nào. Bạn không cần lấy toàn bộ đối tượng làm đối số và chọn các giá trị thuộc tính bắt buộc. Bạn chuyển trực tiếp các giá trị dưới dạng đối số hàm và sử dụng chúng bên trong

Bây giờ bạn có thể gọi hàm là,

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

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Có thêm một cách sử dụng phá hủy đối tượng bằng chức năng. Nếu một hàm trả về một đối tượng, bạn có thể hủy cấu trúc các giá trị trực tiếp thành các biến. Hãy tạo một hàm trả về một đối tượng

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

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ nếu bạn muốn truy xuất giá trị của thuộc tính

const { id, name } = employee;

59, bạn có thể thực hiện như sau,

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

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nó thực sự tiết kiệm rất nhiều thời gian và đánh máy

⭐ Sử dụng phá hủy đối tượng trong các vòng lặp

Cách sử dụng cuối cùng [nhưng không phải là ít nhất] mà chúng ta sẽ thảo luận là phá hủy trong các vòng lặp. Hãy nghĩ về một mảng các đối tượng nhân viên. Chúng tôi muốn lặp qua mảng và muốn sử dụng các giá trị thuộc tính của từng đối tượng nhân viên

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

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể sử dụng vòng lặp

const { id, name } = employee;

02 để lặp qua đối tượng

const { id, name } = employee;

03 và sau đó sử dụng cú pháp gán phá hủy đối tượng để truy xuất thông tin chi tiết. Hãy để chúng tôi đăng nhập tên và tuổi của từng nhân viên trong bảng điều khiển trình duyệt

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

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra,

thật gọn gàng. Bây giờ tất cả chúng ta đều thích phá hủy đối tượng

kết luận

Thời gian là quý giá. Bạn càng tiết kiệm được nhiều, bạn càng có thể sản xuất nhiều hơn. Cú pháp phá hủy đối tượng ở đây để giúp bạn tiết kiệm thời gian đó. Hãy vận dụng vào thực tế, nếu chưa có

Tôi rất vui được chia sẻ kinh nghiệm của mình về phá hủy đối tượng với bạn bằng bài viết này. Vui lòng cho tôi biết nếu bạn thấy nó hữu ích. Bạn có thể tìm thấy tất cả mã nguồn được sử dụng trong bài viết này từ đây,

Đối tượng Destructuring có tạo một biến mới không?

Destructuring sao chép tài liệu tham khảo?

Bạn sẽ đặt giá trị mặc định như thế nào trong khi Phá hủy một mảng?

Chúng ta có thể Hủy cấu trúc đối số được truyền cho một hàm không?