分割代入とは
下のような配列があるとします。
const profile = {
name : "すずお"
age : 25
}これを通常ならこう取り出します。
console.log(profile.name);これを分割代入にして、取り出すとこうなります。
const { name, age } = profile;
console.log(name); // → すずお
console.log(age); // → 25テンプレートリテラルで表すと通常はこうなり、
console.log(`名前は${myprofile.name}で、年齢は${myprofile.age}です`)
//名前はすずおで、年齢は25です分割代入を使えば、
const {name, age} = profile
console.log(`名前は${name}で、年齢は${age}です`)
//名前はすずおで、年齢は25ですとコンパクトになります。
例えば以下のようなオブジェクトがあった場合、
const profiles = [
{
name: "すずお",
age: 25
},
{
name: "さだこ",
age: 90
}
];分割代入なら下のようにシンプルに書けます。
$.each(profiles, function(_, { name, age }) {
console.log(`名前は${name}で、年齢は${age}です`);
});変数名を変えて取り出す
変数名を変えて取り出すこともできます。
const profile = {
name : "すずお"
age : 25
}
// 変数名を変えて取り出す
const { name: nickname } = profile;
console.log(nickname); // "すずお"値の入れ替え
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1デフォルト値を設定
関数の引数にはデフォルト値を設定することができます。
const sayHello = (name= 'ゲスト') => console.log(`こんにちは！${name}さん`)
sayHello()
//こんにちは!ゲストさん
sayHello(さだこ)
//こんにちは！さだこさん分割代入にも同様にデフォルト値を設定することができます。
const myProfile = {
age: 25
}
const {age, name='ゲスト'} = myProfile
console.log(name)//ゲストデフォルト値を設定しておけば、undefinedにならずに済みます。
オブジェクトの省略記法
const myProfile = {name, age}これを見ると分割代入の逆のように見えますが、
これは以下を略して書いたものです。
const myProfile = {
name: name,
age: age
}プロパティと変数名が同じ場合は省略して書くことができます。
これを利用して
const profiles = [
{
name: "すずお",
age: 25,
group: "A"
},
{
name: "さだこ",
age: 90,
group: "B"
}
];
const publicProfile = profiles.map(({name, group}) => ({name, group}));
console.log(publicProfile);
// [
// { name: "すずお", group: "A" },
// { name: "さだこ", group: "B"}
// ]これはオブジェクトの省略記法を使っていて、変数名とプロパティ名が同じなので省略しています。
省略しない書き方はこちら↓
profiles.map(profile => {
const name = profile.name;
const group = profile.group;
return { name: name, group: group };
});スプレッド構文
const arr = [1,2]
console.log(...arr)//1,2このようにスプレッド構文はドット３つで表し、配列などのiterableオブジェクトを展開してくれるので、
下のような場合、記述がコンパクトになります。
const Func = (num1, num2) => console.log(num1 + num2)
Func(arr[0], arr[1]) //3
Func(...arr)// 3配列のコピー
配列をコピーするときにスプレッド構文が便利です。
const arrA = [1, 2]この配列をコピーするには
const arrB = [...arrA]
console.log(arrB)//[1, 2]と書けばOKです。
配列の結合
配列を結合する場合もスプレッド構文が使えます。
const arrC = [3,4]
const arrD = [...arrA, ...arrC]
console.log(arrD)//[1, 2, 3, 4]レスト構文
レスト構文もスプレッド構文同様ドット３つで表します。
スプレッド構文と何が違うか見てみましょう。
const arr2 = [1,2,3,4,5]
const [num1,num2, ...arr3] = arr2
console.log(arr3)//[3,4,5]スプレッド構文が配列などのオブジェクトを展開していたのに対し、レスト構文は配列にまとめています。
全く反対のことをしているんですね。