割り当て構造分解(rest)

こうぞうぶんかいわりあて
構造分解割り当ては、オブジェクトまたは配列を簡単に分解して変数に格納する機能です.

const [a, , c, d, e = 5] = [1, 2, 3]
console.log(a) // 1
console.log(c) // 3
console.log(d) // undefined
console.log(e)// 5

構造分解を割り当てるときは,順序が重要である.
変数の順序は要素の順序と一致します.
代入したくないお金は空けておいてもいいです.
デフォルト値はundefinedで、デフォルト値を設定できます.

const obj = {
  name: '철수',
  body: {
    height: 120,
    weight: 35,
  }
}
const {name, body: {height: tall}, age, school = '다람쥐유치원'} = obj
console.log(name, tall, age, school) // '철수' 120 undefined '다람쥐유치원'

構造分解オブジェクトを割り当てる場合は、オブジェクトのキー値と変数名が一致する必要があります.
変数名を変更する場合は、再宣言することなくtallに割り当てた後に使用できます.
受信したキー値が空の場合は、undefinedと入力してデフォルト値を設定します.

パラメータにも適用されます.

const destruct = ({name, age: a, tall = 120}) => {
  console.log(name) // '철수'
  console.log(a) // 7
  console.log(tall) // 120
}

destruct({name: '철수', age: 7})

rest
restはspreadと似ているように見えますが、役には大きな違いがあります.
restは、オブジェクト、配列、および関数のパラメータが渡す値をグループ化するために使用されます.

const child = {
  name: '철수',
  age: 7,
}

const { ...rest } = child
console.log(rest); // { name: '철수', age: 7 }

オブジェクトまたは配列でrestを使用する場合、構造分解割り当て構文とともに使用されます.
変数の名前は必ずしも同じではないため、通常restを変数名として使用し、浅いコピーを行います.

const child = {
  name: '철수',
  age: 7,
  body: {
    height: 120,
    weight: 35,
  }
}

const { name, ...rest } = child
console.log(name); // '철수'
console.log(rest); // { age: 7, body: { height: 120, weight: 35 } }

rest.age = 10
rest.body.height = 140

console.log(rest) // { age: 10, body: { height: 140, weight: 35 } }
console.log(child)
/*
{
  name: '철수',
  age: 7,
  body: { height: 140, weight: 35, age: 10 }
}
*/

プロパティを分離する場合は、変数名をキーと同じキーに設定して分離できます.
このとき...restが最後になく、後に変数がある場合はエラーが発生します.

アレイの非構造化割り当ても同様の方法を採用することができる.

const a = [1, 2, 3];
const [one, ...rest] = a;

console.log(one); // 1
console.log(rest); // [2, 3]

関数パラメータ

を使用

const a = (one, ...rest) => {
  if (one === 1)
  return rest;
}

console.log(a(1, 2, 3)) // [2, 3]

restを使用して、関数が渡す残りのパラメータを配列にグループ化します.
これは、パラメータとしてどのくらいのパラメータを渡すか分からない場合に便利です.

関数のパラメータの場合、restを使用してパラメータに展開できます.以下に示します.

const sum = (...rest) => rest.reduce((a, c) => a + c);

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(sum(...numbers)) // 55

spreadは関数のパラメータ配列(numbers)の展開方式であり、配列(numbers)を複数のパラメータにするために用いられる.
restはパラメータ(パラメータ)をパラメータからアレイ(Array)に渡す役割を果たす.