JavaScript勉強の記録その13: スプレッド構文とレスト構文を使ったオブジェクトの操作

スプレッド構文を利用したプロパティーの結合

スプレッド構文を利用して、２つのオブジェクトのプロパティーを結合することができます。

index.js

const otherProps = {
  r: 4,
  color: 'red',
}

const point = {
  x: 100,
  y: 180,
  ...otherProps,
};

console.log(point);
//=>{x: 100, y: 180, r: 4, color: "red"}

レスト構文を利用してプロパティーの値を分割代入する

レスト構文を使って、オブジェクトの分割代入をすることもできます。

index.js

const otherProps = {
  r: 4,
  color: 'red',
}

const point = {
  x: 100,
  y: 180,
  ...otherProps,
};
const {x, y, ...others} = point;

console.log(x);
//=>100
console.log(y);
//=>180
console.log(others);
//=>{r: 4, color: "red"}