Khóa động phá hủy đối tượng Javascript

Trong bài đăng này, bạn sẽ tìm hiểu cách xóa các thuộc tính khỏi một đối tượng trong JavaScript bằng cách sử dụng cấu trúc hủy và cú pháp ...rest

Cách mới này để loại bỏ các thuộc tính của đối tượng [bằng cách loại trừ chúng khỏi một đối tượng mới] mang lại cho chúng ta một cách viết JavaScript rõ ràng hơn, với ít mã hơn và dễ đọc hơn - cũng như đây là một hoạt động không thể thay đổi

Trước khi phá hủy, chúng tôi thường sử dụng từ khóa

const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
0 để xóa các thuộc tính khỏi một đối tượng. Vấn đề với
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
0 là nó là một hoạt động có thể thay đổi, thay đổi vật lý đối tượng và có khả năng gây ra các tác dụng phụ không mong muốn do cách JavaScript xử lý các tham chiếu đối tượng

Bằng cách sử dụng tính năng hủy đối tượng, kết hợp với toán tử còn lại ...rest, chúng ta có một cách tiếp cận đơn giản

Phá hủy đối tượng là gì?

Việc hủy đối tượng cho phép chúng ta tạo các biến từ tên thuộc tính đối tượng và biến sẽ chứa giá trị của tên thuộc tính - ví dụ

const data = { a: 1, b: 2, c: 3 };

const { a, b, c } = data;

console.log[a, b, c]; // 1, 2, 3

Bằng cách sử dụng

const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
3, chúng tôi đang khai báo 3 biến mới [
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
0,
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
1 và
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
2]

Nếu

const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
0,
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
1 và
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
2 tồn tại dưới dạng tên thuộc tính trên
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
6, thì các biến sẽ được tạo có chứa các giá trị của thuộc tính đối tượng. Nếu tên thuộc tính không tồn tại, bạn sẽ nhận được
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log[a]; // 1
console.log[rest]; // { b: 2, c: 3 }
7

…nghỉ ngơi trong quá trình phá hủy đối tượng

Đầu tiên là các tham số còn lại, sau đó là các thuộc tính còn lại

Đã thêm vào ECMAScript 2015 và hiện ở Giai đoạn 4 - chúng ở đây để duy trì và sử dụng cho đến ngày hôm nay

Với suy nghĩ này, làm thế nào để ...rest giúp chúng ta loại bỏ một thuộc tính khỏi một đối tượng thông qua phá hủy?

Sách điện tử miễn phí

Chỉ thị, đơn giản phải không? . Nhìn bề ngoài chúng có vẻ đơn giản, nhưng ngay cả các nhà phát triển Angular lành nghề cũng chưa nắm hết mọi khái niệm trong eBook này

Làm cách nào để truy cập khóa đối tượng một cách linh hoạt trong JavaScript?

Để truy cập thuộc tính đối tượng một cách linh hoạt trong JS, bạn cần phải chuyển tên thuộc tính dưới dạng một chuỗi trong dấu ngoặc vuông . Khi giá trị của khóa biến thay đổi, chúng tôi có quyền truy cập vào các thuộc tính khác nhau của đối tượng người dùng. Cách phổ biến nhất để truy cập các thuộc tính đối tượng trong JavaScript là dấu chấm.

Làm cách nào để thêm cặp giá trị khóa trong đối tượng JavaScript một cách linh hoạt?

Trả lời. Sử dụng ký hiệu dấu chấm hoặc dấu ngoặc vuông . ] để thêm một cặp khóa/giá trị hoặc thuộc tính vào đối tượng JavaScript.

Làm cách nào để đặt khóa thuộc tính động với ES6?

# Cách đặt Khóa thuộc tính động với ES6 🎉 . 1,}; . 1, [bánh]. '🥞', }; let cake = '🍰'; // ❌ Old way requires 2 steps let pan = { id: 1, }; pan[cake] = '🥞'; // ✅ YAY, much easier with ES6 let pan = { id: 1, [cake]: '🥞', }; 3 cách truy cập giá trị đối tượng. Cách truy cập giá trị đối tượng bằng các phím biểu tượng cảm xúc.

Làm cách nào để hủy cấu trúc đối tượng bên trong một đối tượng khác trong JavaScript?

Hủy cấu trúc các đối tượng lồng nhau . const { kỹ sư. { 1. { id, tên, nghề nghiệp, }, }, } = nhân viên; Bây giờ chúng ta có quyền truy cập vào tất cả các thuộc tính của đối tượng nhân viên thứ hai.

Chủ Đề