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;解構陣列時，宣告變數的順序很重要。
如果我們只需要汽車和 SUV，可以簡單地省略卡車，但要保留逗號
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 + '.';
}
