React ES6の分割代入
分解
分割代入を説明するためにサンドイッチで例えてみます。あなたはサンドイッチを作るために冷蔵庫から全ての材料を取り出す事はしません、サンドイッチに使いたいものだけを取り出します。
分割代入もまったく同じです。作業中の配列またはオブジェクトがある場合がありますが、これらに含まれるアイテムの一部のみが必要です。
分割代入すると、必要なものだけを簡単に抽出できます。
配列の分割代入
以下は、配列項目を変数に割り当てる古い方法です。
例
Before:
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);
オブジェクトの分割代入
関数内でオブジェクトを使用する古い方法を次に示します。
例
Before:
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 + '.';
}
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。