Cấu trúc đối tượng và mảng trong JavaScript với ES6

Với ES6 / ES2015, giờ đây bạn có thể extract dữ liệu từ các mảng và đối tượng một cách dễ dàng hơn và ít lộn xộn về cú pháp hơn. Xem cách nó được thực hiện với các ví dụ đoạn mã sau:

Cấu trúc mảng

Tự động tạo các biến có giá trị tương ứng với các mục trong một mảng:

const names = ['Bob', 'Fred', 'Benedict'];

const [cat, dog, alligator] = names;

console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict

Bạn cũng có thể bỏ qua các mục bằng cách sử dụng dấu phẩy mà không có bất kỳ tên nào cho tên biến:

const names = ['Bob', 'Fred', 'Benedict'];

const [cat, , alligator] = names;

console.log(cat); // Bob
console.log(alligator); // Benedict

Và bạn có thể hủy cấu trúc một phần của mảng, sau đó đặt phần còn lại vào một mảng mới:

const names = ['Bob', 'Fred', 'Benedict'];

const [cat, ...rest] = names;

console.log(cat); // Bob
console.log(rest); // ["Fred", "Benedict"]

Cấu trúc đối tượng

Việc hủy cấu trúc đối tượng hơi khác một chút vì các khóa không nhất thiết phải theo một thứ tự cụ thể, vì vậy các biến mới cần phải có tên phù hợp với khóa của đối tượng:

const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};

const {cat, dog, alligator} = names;

console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict

Tuy nhiên, có một cách để so khớp tên, đây là cách đặt tên mới cho các biến:

const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};

const {cat: newCat, dog: newDog, alligator: newAlligator} = names;

console.log(newCat); // Bob
console.log(newDog); // Fred
console.log(newAlligator); // Benedict

Tags:

Các tin liên quan

Cách làm việc với JSON trong JavaScript
2016-12-09
Một trang đơn giản mờ dần với JavaScript
2016-11-29
Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
2016-11-29
Let và Const trong JavaScript với ES6 / ES2015
2016-11-10
Chức năng của Trình tạo trong JavaScript với ES6 / ES2015
2016-11-07
Tham số phần còn lại trong JavaScript với ES6 / ES2015
2016-11-02
Hứa hẹn trong JavaScript với ES6 / ES2015
2016-10-31
Chữ mẫu trong JavaScript (ES6 / ES2015)
2016-10-11
console.table () trong JavaScript
2016-09-28
console.time () & console.timeEnd () trong JavaScript
2016-09-28