React ES6 การทำลายโครงสร้าง
การทำลายล้าง
เพื่อแสดงการทำลายล้าง เราจะทำแซนวิช คุณนำทุกอย่างออกจากตู้เย็นเพื่อทำแซนวิชหรือไม่? ไม่ คุณนำเฉพาะรายการที่คุณต้องการใช้กับแซนวิชของคุณเท่านั้น
การทำลายล้างก็เหมือนกันหมด เราอาจมีอาร์เรย์หรือวัตถุที่เรากำลังใช้งานอยู่ แต่เราต้องการเพียงบางรายการที่มีอยู่ในสิ่งเหล่านี้
การทำลายล้างทำให้ง่ายต่อการแยกเฉพาะสิ่งที่จำเป็นเท่านั้น
อาเรย์ทำลายล้าง
นี่เป็นวิธีเก่าในการกำหนดรายการอาร์เรย์ให้กับตัวแปร:
ก่อน:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];
นี่คือวิธีใหม่ในการกำหนดรายการอาร์เรย์ให้กับตัวแปร:
ด้วยการทำลายล้าง:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;
เมื่อทำลายอาร์เรย์ ลำดับการประกาศตัวแปรมีความสำคัญ
หากเราต้องการแค่รถและรถเอสยูวี เราสามารถละทิ้งรถบรรทุกแต่เก็บเครื่องหมายจุลภาคไว้:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;
การทำลายโครงสร้างมีประโยชน์เมื่อฟังก์ชันส่งคืนอาร์เรย์:
ตัวอย่าง
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);
วัตถุทำลายล้าง
นี่เป็นวิธีเก่าในการใช้วัตถุภายในฟังก์ชัน:
ก่อน:
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 + '.';
}
นี่คือวิธีใหม่ในการใช้วัตถุภายในฟังก์ชัน:
ด้วยการทำลายล้าง:
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 + '.';
}
โปรดสังเกตว่า คุณสมบัติของอ็อบเจ็กต์ไม่จำเป็นต้องประกาศในลำดับเฉพาะ
เราสามารถทำลายโครงสร้างวัตถุที่ซ้อนกันอย่างล้ำลึกได้ด้วยการอ้างอิงวัตถุที่ซ้อนกัน จากนั้นใช้เครื่องหมายทวิภาคและวงเล็บปีกกาเพื่อทำลายวัตถุที่ซ้อนอยู่อีกครั้ง:
ตัวอย่าง
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 + '.';
}