Phản ứng phá hủy ES6
Phá hủy
Để minh họa việc phá hủy, chúng ta sẽ làm một chiếc bánh sandwich. Bạn có lấy mọi thứ ra khỏi tủ lạnh để làm bánh sandwich không? Không, bạn chỉ lấy ra những món bạn muốn dùng trên bánh sandwich của mình.
Việc 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 đó.
Việc phá hủy giúp 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 phần tử mảng cho một biến:
Ví dụ
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í dụ
Với sự phá hủy:
const vehicles = ['mustang', 'f-150', 'expedition']; const [car, truck, suv] = vehicles;Khi hủy mảng, thứ tự khai báo các biến là quan trọng.
Nếu chúng ta chỉ muốn ô tô và suv, chúng ta có thể bỏ xe tải nhưng giữ nguyên dấu phẩy:
const vehicles = ['mustang', 'f-150', 'expedition']; const [car,, suv] = vehicles;Việc hủy cấu trúc có ích khi một hàm trả về một mảng:
Ví 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 ĐĂNG KÝ
Phá hủy đối tượng
Đây là cách cũ để sử dụng một đối tượng bên trong một hàm:
Ví dụ
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í dụ
Với sự phá 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 + '.'; }Lưu ý rằng các thuộc tính của đố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 đố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 các mục cần thiết từ đối tượng lồng nhau:
Ví 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 + '.'; }