JavaScript Destructuring: Cú pháp, Ứng dụng và Ví dụ
Tìm hiểu về JavaScript Destructuring và cách sử dụng cú pháp này để giải quyết
các tình huống phức tạp trong lập trình. Bài viết cung cấp những ví dụ thực tế
và ứng dụng của Destructuring trong việc trích xuất giá trị từ mảng, đối
tượng, tham số hàm, và các cấu trúc dữ liệu phức tạp khác. Khám phá cách tận
dụng tính linh hoạt của JavaScript Destructuring để cải thiện hiệu suất và sự
đơn giản trong mã nguồn của bạn.
Javascript Destructuring
Destructuring assignment được giới thiệu trong ES6 giúp dễ dàng gán các giá
trị mảng và thuộc tính của đối tượng cho các biến riêng biệt, Ví dụ
Trước ES6:
// assigning object attributes to variables
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
let name = person.name;
let age = person.age;
let gender = person.gender;
console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female
Từ khi ES6:
// assigning object attributes to variables
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
// destructuring assignment
let { name, age, gender } = person;
console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female
Lưu ý: Thứ tự các tên không quan trọng trong việc object destructuring.
Ví dụ, bạn có thể viết chương rình trên dưới dạng:
let { age, gender, name } = person;
console.log(name); // Sara
Lưu ý: Khi destructuring objects, bạn nên sử dụng cùng một tên cho các biến
làm key tương ứng.
Ví dụ:
let {name1, age, gender} = person;
console.log(name1); // undefined
Nếu bạn muốn gán các tên biến khác nhau cho các object key thì bạn có thể dùng
như nhau:
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
// destructuring assignment
// using different variable names
let { name: name1, age: age1, gender:gender1 } = person;
console.log(name1); // Sara
console.log(age1); // 25
console.log(gender1); // female
Array Destructuring
Bạn cũng có thể thực hiện destructuring array tương tự với cách với object. Ví
dụ
const arrValue = ['one', 'two', 'three'];
// destructuring assignment in arrays
const [x, y, z] = arrValue;
console.log(x); // one
console.log(y); // two
console.log(z); // three
Assign Default Values
Bạn có thể gán các giá trị mặc định cho các biến khi sử dụng destructuring. Ví dụ
let arrValue = [10];
// assigning default value 5 and 7
let [x = 5, y = 7] = arrValue;
console.log(x); // 10
console.log(y); // 7
Trong đoạn code trên, arrValue chỉ có một phần tử.
Kể từ đó,
- Biến x sẽ là 10.
- Biến y sẽ lấy giá trị mặc định là 7.
Trong quá trình object destructuring, bạn có thể truyền các giá trị mặc định
theo các tương tự trên.
const person = {
name: 'Jack',
}
// assign default value 26 to age if undefined
const { name, age = 26} = person;
console.log(name); // Jack
console.log(age); // 26
Swapping Variables
Trong ví dụ này, 2 biến được hoán đổi (swap) với nhau khi sử dụng cú pháp
destructuring assignment.
// program to swap variables
let x = 4;
let y = 7;
// swapping variables
[x, y] = [y, x];
console.log(x); // 7
console.log(y); // 4
Skip Items
Bạn có thể bỏ qua các mục không mong muốn trong một mảng mà không cần gán
chúng cho các biến cục bộ. Ví dụ
const arrValue = ['one', 'two', 'three'];
// destructuring assignment in arrays
const [x, , z] = arrValue;
console.log(x); // one
console.log(z); // three
Trong đoạn code ở trên, phận tử thứ 2 được bỏ qua bằng các sử dụng dấu phân
các là dấu phẩy.
Assign Remaining Elements to a Single Variable
Bạn có thế gán những phần tử còn lại của một mảng cho một biến bằng cách sử
dụng cú phấp spread "...". Ví dụ
const arrValue = ['one', 'two', 'three', 'four'];
// destructuring assignment in arrays
// assigning remaining elements to y
const [x, ...y] = arrValue;
console.log(x); // one
console.log(y); // ["two", "three", "four"]
Ở đây, one được gán cho biến x. Và các phần tử còn lại được gán
cho biến y.
Bạn cũng có thể gán phần còn lại của các thuộc tính của một object cho một
biến duy nhất. Ví dụ
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
// destructuring assignment
// assigning remaining properties to rest
let { name, ...rest } = person;
console.log(name); // Sara
console.log(rest); // {age: 25, gender: "female"}
Lưu ý: Biến có cú pháp spread không được có dấu phẩy ở sau. Bạn nên sử dụng
phần tử còn lại này (biến có sử dụng cú pháp spread) làm biến cuối cùng.
Ví dụ,
const arrValue = ['one', 'two', 'three', 'four'];
// throws an error
const [ ...x, y] = arrValue;
console.log(x); // eror
Nested Destructuring Assignment
Bạn có thể thực hiện nested destructuring cho các phần tử mảng. Ví dụ
// nested array elements
const arrValue = ['one', ['two', 'three']];
// nested destructuring assignment in arrays
const [x, [y, z]] = arrValue;
console.log(x); // one
console.log(y); // two
console.log(z); // three
Ở đây, biến y và z được gán nested với phần tử two và
three.
Để thực hiện phép nested destructuring assignment, bạn phải đặt các biến trong
một cấu trúc mảng (bằng cách đặt bên trong [])
Bạn cũng có thể thực hiện nested destructuring cho thuộc tính của object. Ví
dụ
const person = {
name: 'Jack',
age: 26,
hobbies: {
read: true,
playGame: true
}
}
// nested destructuring
const {name, hobbies: {read, playGame}} = person;
console.log(name); // Jack
console.log(read); // true
console.log(playGame); // true
Để thực hiện phép nested destructuring cho các đối tượng, bạn phải đặt các
biến trong một cấu trúc object (bằng cách đặt bên trong {}).
Lưu ý: Tính năng destructuring assignments được giới thiệu ở bản ES6. Một số trình duyệt có thể sẽ không hỗ trợ cú pháp này. Hãy ghé qua trang Javascript Destructuring support để tìm hiểu thêm.
Một số bài viết liên quan:
Tags
Javascript