Phản ứng hủy cấu trúc ES6
Phá hủy
Để minh họa cho việc tái cấu trúc, chúng ta sẽ làm một chiếc bánh sandwich. Bạn có lấy tất cả mọi thứ ra khỏi tủ lạnh để làm bánh sandwich của bạn không? Không, bạn chỉ lấy ra những thứ bạn muốn sử dụng trên bánh mì sandwich của mình.
Sự phá hủy hoàn toàn giống nhau. Chúng ta có thể có một mảng hoặc đối tượng mà chúng ta đang làm việc, nhưng chúng ta chỉ cần một số mục có trong chúng.
Việc phá hủy cấu trúc giúp bạn dễ dàng chỉ trích xuất những gì cần thiết.
Phá hủy mảng
Đây là cách cũ để gán các mục mảng cho một biến:
Trước:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Đây là cách mới để gán các mục mảng cho một biến:
Với cấu trúc hủy:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Khi cấu trúc lại mảng, thứ tự các biến được khai báo là rất quan trọng.
Nếu chúng ta chỉ muốn có ô tô và suv, chúng ta có thể bỏ qua xe tải nhưng giữ lại dấu phẩy:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Cấu trúc hủy có ích khi một hàm trả về một mảng:
Thí dụ
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
}
const [add, subtract, multiply, divide] = calculate(4, 7);
Được chứng nhận!
$ 95 GHI DANH
Đối tượng phá hủy
Đây là cách cũ để sử dụng một đối tượng bên trong một hàm:
Trước:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
// old way
function myVehicle(vehicle) {
const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}Đây là cách mới để sử dụng một đối tượng bên trong một hàm:
Với cấu trúc hủy:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
function myVehicle({type, color, brand, model}) {
const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}
Chú ý rằng các thuộc tính đối tượng không cần phải được khai báo theo một thứ tự cụ thể.
Chúng ta thậm chí có thể hủy cấu trúc các đối tượng lồng nhau sâu bằng cách tham chiếu đến đối tượng lồng nhau, sau đó sử dụng dấu hai chấm và dấu ngoặc nhọn để hủy cấu trúc lại các mục cần thiết từ đối tượng lồng nhau:
Thí dụ
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red',
registration: {
city: 'Houston',
state: 'Texas',
country: 'USA'
}
}
myVehicle(vehicleOne)
function myVehicle({ model, registration: { state } }) {
const message = 'My ' + model + ' is registered in ' + state + '.';
}