Hướng dẫn dùng objetos JavaScript - sử dụng các đối tượng JavaScript

Thử nó

Cú pháp

const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;

const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
const { [key]: a } = obj;

let a, b, a1, b1, c, d, rest, pop, push;
[a, b] = array;
[a, , b] = array;
[a = aDefault, b] = array;
[a, b, ...rest] = array;
[a, , b, ...rest] = array;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;

({ a, b } = obj); // brackets are required
({ a: a1, b: b1 } = obj);
({ a: a1 = aDefault, b = bDefault } = obj);
({ a, b, ...rest } = obj);
({ a: a1, b: b1, ...rest } = obj);

Sự mô tả

Các biểu thức theo nghĩa đen của đối tượng và mảng cung cấp một cách dễ dàng để tạo các gói dữ liệu ad hoc.

const x = [1, 2, 3, 4, 5];

Bài tập phá hủy sử dụng cú pháp tương tự, nhưng ở phía bên trái của nhiệm vụ để xác định những giá trị nào để giải nén khỏi biến có nguồn gốc.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Tương tự, bạn có thể phá hủy các đối tượng ở phía bên trái của nhiệm vụ.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Khả năng này tương tự như các tính năng có trong các ngôn ngữ như Perl và Python.

Ràng buộc và chuyển nhượng

Đối với cả phá hủy đối tượng và mảng, có hai loại mẫu phá hủy: mẫu liên kết và mẫu gán, với các cú pháp hơi khác nhau.

Trong các mẫu liên kết, mẫu bắt đầu bằng từ khóa khai báo (

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

Tất cả các biến chia sẻ cùng một tuyên bố, vì vậy nếu bạn muốn một số biến được chỉ định lại nhưng các biến khác chỉ được đọc, bạn có thể phải phá hủy hai lần-một lần với

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

Trong các mẫu gán, mẫu không bắt đầu với một từ khóa. Mỗi thuộc tính bị phá hủy được gán cho mục tiêu gán-có thể được khai báo trước bằng

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

LƯU Ý: Các dấu ngoặc đơn

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

Nếu phong cách mã hóa của bạn không bao gồm dấu chấm phẩy kéo dài, biểu thức

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

Lưu ý rằng mẫu liên kết tương đương của mã ở trên không phải là cú pháp hợp lệ:

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

Giá trị mặc định

Mỗi thuộc tính bị phá hủy có thể có một giá trị mặc định. Giá trị mặc định được sử dụng khi thuộc tính không có hoặc có giá trị

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

const [a = 1] = []; // a is 1
const { b = 2 } = { b: undefined }; // b is 2
const { c = 2 } = { c: null }; // c is null

Giá trị mặc định có thể là bất kỳ biểu thức nào. Nó sẽ chỉ được đánh giá khi cần thiết.

const { b = console.log("hey") } = { b: 2 };
// Does not log anything, because `b` is defined and there's no need
// to evaluate the default value.

Tài sản nghỉ ngơi

Bạn có thể kết thúc một mô hình phá hủy với thuộc tính REST

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

const x = [1, 2, 3, 4, 5];

Thuộc tính còn lại phải là cuối cùng trong mẫu và không phải có dấu phẩy kéo dài.

const x = [1, 2, 3, 4, 5];

Các mô hình phá hủy với các cú pháp khác

Trong nhiều cú pháp mà ngôn ngữ liên kết một biến cho bạn, bạn cũng có thể sử dụng một mẫu phá hủy. Bao gồm các:

• Biến vòng lặp của vòng lặp

  const obj = { a: 1, b: { c: 2 } };
  const { a } = obj; // a is constant
  let { b: { c: d } } = obj; // d is re-assignable
  

  6 và

  const obj = { a: 1, b: { c: 2 } };
  const { a } = obj; // a is constant
  let { b: { c: d } } = obj; // d is re-assignable
  

  7;
• Tham số chức năng;
• Biến liên kết

  const obj = { a: 1, b: { c: 2 } };
  const { a } = obj; // a is constant
  let { b: { c: d } } = obj; // d is re-assignable
  

  8.

Đối với các tính năng cụ thể để phá hủy mảng hoặc đối tượng, vui lòng tham khảo các ví dụ riêng lẻ bên dưới.

Ví dụ

Mảng phá hủy

Bài tập biến cơ bản

const x = [1, 2, 3, 4, 5];

Phá hủy với nhiều yếu tố hơn nguồn

Trong một mảng phá hủy từ một mảng độ dài n được chỉ định ở phía bên phải của gán, nếu số lượng biến được chỉ định ở phía bên trái của gán lớn hơn n, chỉ có các biến N đầu tiên được gán giá trị. Các giá trị của các biến còn lại sẽ không được xác định.

const x = [1, 2, 3, 4, 5];

Trao đổi biến

Hai giá trị biến có thể được hoán đổi trong một biểu thức phá hủy.

Không có sự phân công phá hủy, trao đổi hai giá trị yêu cầu một biến tạm thời (hoặc, trong một số ngôn ngữ cấp thấp, thủ thuật trao đổi XOR).

const x = [1, 2, 3, 4, 5];

Phân tích một mảng được trả về từ một hàm

Luôn luôn có thể trả lại một mảng từ một hàm. Phá hủy có thể làm cho làm việc với một giá trị trả về mảng ngắn gọn hơn.

Trong ví dụ này,

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const x = [1, 2, 3, 4, 5];

Bỏ qua một số giá trị được trả về

Bạn có thể bỏ qua các giá trị trả về mà bạn không quan tâm:

const x = [1, 2, 3, 4, 5];

Bạn cũng có thể bỏ qua tất cả các giá trị được trả về:

Sử dụng một mẫu ràng buộc làm thuộc tính còn lại

Tính chất còn lại của gán phá hủy mảng có thể là một mẫu liên kết hoặc mảng khác. Điều này cho phép bạn đồng thời giải nén các thuộc tính và chỉ số của mảng.

const x = [1, 2, 3, 4, 5];

const x = [1, 2, 3, 4, 5];

Các mẫu ràng buộc này thậm chí có thể được lồng, miễn là mỗi thuộc tính REST là cuối cùng trong danh sách.

const x = [1, 2, 3, 4, 5];

Mặt khác, phá hủy đối tượng chỉ có thể có một định danh là thuộc tính còn lại.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Giải nén các giá trị khỏi một biểu thức phù hợp thông thường

Khi phương thức biểu thức chính quy

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Sử dụng phá hủy mảng trên bất kỳ điều gì có thể

Array phá hủy gọi giao thức có thể lặp lại của phía bên phải. Do đó, bất kỳ mảng có thể lặp lại, không nhất thiết, có thể được phá hủy.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Không có thiết lập không thể được phá hủy dưới dạng mảng.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Tererables chỉ được lặp lại cho đến khi tất cả các ràng buộc được gán.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Các ràng buộc còn lại được đánh giá một cách háo hức và tạo ra một mảng mới, thay vì sử dụng điều khác nhau.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Đối tượng phá hủy

Bài tập cơ bản

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Gán cho các tên biến mới

Một thuộc tính có thể được giải nén từ một đối tượng và được gán cho một biến có tên khác với thuộc tính đối tượng.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Ở đây, ví dụ,

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

Gán cho các tên biến mới và cung cấp các giá trị mặc định

Một tài sản có thể là cả hai

• Giải nén từ một đối tượng và được gán cho một biến có tên khác.
• Được chỉ định một giá trị mặc định trong trường hợp giá trị chưa đóng gói là

  const obj = { a: 1, b: { c: 2 } };
  const { a } = obj; // a is constant
  let { b: { c: d } } = obj; // d is re-assignable
  

  3.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Giải nén các thuộc tính khỏi các đối tượng được truyền dưới dạng tham số hàm

Các đối tượng được truyền vào các tham số chức năng cũng có thể được giải nén thành các biến, sau đó có thể được truy cập trong cơ thể hàm. Đối với gán đối tượng, cú pháp phá hủy cho phép biến mới có cùng tên hoặc một tên khác với thuộc tính gốc và gán các giá trị mặc định cho trường hợp khi đối tượng gốc không xác định thuộc tính.

Hãy xem xét đối tượng này, trong đó chứa thông tin về người dùng.

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Ở đây chúng tôi chỉ ra cách giải nén một thuộc tính của đối tượng được truyền vào một biến có cùng tên. Giá trị tham số

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Bạn có thể xác định tên của biến giải nén. Ở đây chúng tôi giải nén tài sản có tên

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Các đối tượng lồng nhau cũng có thể được giải nén. Ví dụ dưới đây cho thấy thuộc tính

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Đặt giá trị mặc định của tham số chức năng

Các giá trị mặc định có thể được chỉ định bằng cách sử dụng

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

Dưới đây chúng tôi hiển thị một hàm trong đó kích thước mặc định là

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Trong chữ ký chức năng cho

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

Bạn cũng có thể đã viết chức năng mà không có mặc định đó. Tuy nhiên, nếu bạn bỏ đi giá trị mặc định đó, hàm sẽ tìm kiếm ít nhất một đối số được cung cấp khi được gọi, trong khi ở dạng hiện tại của nó, bạn có thể gọi

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

Để biết thêm thông tin, hãy xem tham số mặc định> Tham số bị phá hủy với gán giá trị mặc định.

Đối tượng lồng nhau và phá hủy mảng

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Cho phép lặp và phá hủy

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Tên thuộc tính đối tượng được tính toán và phá hủy

Tên tài sản được tính toán, giống như trên các chữ cái đối tượng, có thể được sử dụng với sự phá hủy.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Định danh JavaScript không hợp lệ làm tên thuộc tính

Phá hủy có thể được sử dụng với các tên thuộc tính không phải là định danh JavaScript hợp lệ bằng cách cung cấp một định danh thay thế hợp lệ.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Kết hợp mảng và phá hủy đối tượng

Mảng và phá hủy đối tượng có thể được kết hợp. Giả sử bạn muốn phần tử thứ ba trong mảng

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Chuỗi nguyên mẫu được tra cứu khi đối tượng được giải mã

Khi giải mã một đối tượng, nếu một thuộc tính không được truy cập, nó sẽ tiếp tục tìm kiếm dọc theo chuỗi nguyên mẫu.

const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;

Xem thêm