8.1 Phá vỡ cấu trúc đối tượng
Phá vỡ cấu trúc trong JavaScript — là cú pháp cho phép bạn lấy ra các giá trị từ mảng hoặc thuộc tính từ đối tượng và gán chúng vào các biến riêng biệt. Điều này làm cho mã dễ đọc và gọn gàng hơn. Trong bài giảng này, tụi mình sẽ đi sâu vào việc phá vỡ cấu trúc đối tượng và mảng, cùng các ví dụ khác nhau và ứng dụng của chúng.
1. Cú pháp cơ bản
Phá vỡ cấu trúc đối tượng cho phép lấy ra giá trị của thuộc tính đối tượng và gán chúng cho các biến:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Sẽ in ra: John
console.log(age); // Sẽ in ra: 30
console.log(isStudent); // Sẽ in ra: false
2. Gán cho biến mới
Có thể gán giá trị thuộc tính đối tượng cho các biến có tên khác:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Sẽ in ra: John
console.log(personAge); // Sẽ in ra: 30
3. Giá trị mặc định
Nếu thuộc tính không tồn tại trong đối tượng, có thể đặt giá trị mặc định:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Sẽ in ra: true
4. Phá vỡ cấu trúc lồng nhau
Có thể lấy giá trị từ các đối tượng lồng nhau:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Sẽ in ra: New York
console.log(country); // Sẽ in ra: USA
5. Phá vỡ cấu trúc trong tham số hàm
Phá vỡ cấu trúc có thể được sử dụng trong tham số hàm:
function greet({ name, age }) {
console.log(`Hello, tên của tôi là ${name} và tôi ${age} tuổi.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Sẽ in ra: Hello, tên của tôi là John và tôi 30 tuổi.
8.2 Phá vỡ cấu trúc mảng
1. Cú pháp cơ bản
Phá vỡ cấu trúc mảng cho phép lấy giá trị của phần tử mảng và gán chúng cho các biến:
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // Sẽ in ra: apple
console.log(second); // Sẽ in ra: banana
console.log(third); // Sẽ in ra: cherry
2. Bỏ qua phần tử
Có thể bỏ qua các phần tử mảng mà không cần lấy giá trị:
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // Sẽ in ra: apple
console.log(third); // Sẽ in ra: cherry
3. Giá trị mặc định
Có thể đặt giá trị mặc định cho phần tử mảng:
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // Sẽ in ra: banana
4. Phá vỡ cấu trúc lồng nhau
Có thể lấy giá trị từ các mảng lồng nhau:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Sẽ in ra: 2
console.log(three); // Sẽ in ra: 3
5. Phá vỡ cấu trúc trong tham số hàm
Phá vỡ cấu trúc có thể được sử dụng trong tham số hàm cho mảng:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Sẽ in ra: John Doe
8.3 Ví dụ ứng dụng của phá vỡ cấu trúc
1. Đổi giá trị biến
Phá vỡ cấu trúc cho phép đổi giá trị biến một cách dễ dàng:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Sẽ in ra: 2
console.log(b); // Sẽ in ra: 1
2. Lấy dữ liệu từ đối tượng
Phá vỡ cấu trúc giúp dễ dàng lấy dữ liệu từ đối tượng, ví dụ như từ API response:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Sẽ in ra: John Doe
console.log(email); // Sẽ in ra: john@example.com
3. Cài đặt mặc định trong hàm
Phá vỡ cấu trúc cho phép dễ dàng đặt giá trị mặc định cho tham số hàm:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Sẽ in ra: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Sẽ in ra: { name: 'Anonymous', age: 0, isAdmin: false }
4. Mảng và hàm
Phá vỡ cấu trúc làm cho việc làm việc với mảng dễ dàng hơn, đặc biệt khi sử dụng các phương thức mảng:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Sẽ in ra: 1
console.log(second); // Sẽ in ra: 2
console.log(rest); // Sẽ in ra: [3, 4, 5]
GO TO FULL VERSION