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 + '.';
}截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!