spread operator {...hoge} で ほしいキーだけとりたい

Question

  const dayEdited = {
    dayTypeId: this.props.day.dayTypeId,
    nonReservedVisits: this.props.day.nonReservedVisits,
    reservedVisits: this.props.day.reservedVisits,
    canceledReservations: this.props.day.canceledReservations,
    workStaffIds: this.props.day.workStaffIds
  };

これのもっといい書きかた教えてください。

const dayEdited = {...this.props.day}

これだとthis.props.dayの中身全部が入ってしまいます。
this.props.dayの中からほしいやつだけ指定する方法ないですか?

//動かないコード
  const dayEdited = {
    dayTypeId
    nonReservedVisits,
    reservedVisits,
    canceledReservations,
    workStaffIds
  } = this.props.day;

つまり、これみたいなことしたいですけど、できないですか?

Answer 1

流石にそれは出来ません。
現実的にはこんな感じでしょうか。

const {dayTypeId, nonReservedVisits, reservedVisits, canceledReservations, workStaffIds} = this.props.day;
const dayEdited = {dayTypeId, nonReservedVisits, reservedVisits, canceledReservations, workStaffIds}

スタフロの質問で似たようなのを見つけました。
How to get a subset of a javascript object's properties

const object = { a: 5, b: 6, c: 7  };
const picked = (({ a, c }) => ({ a, c }))(object);

console.log(picked); // { a: 5, c: 7 }

模範解答はこれでまぁそうだよねって感じ、おっと思いましたが結局キー名を2度書くのも同様で微妙です。
解答欄でビビっときたのがこれですね。

var subset = ['color', 'height'].reduce(function(o, k) { o[k] = elmo[k]; return o; > }, {});

Array.prototype.reduceは難解ですが、ネイティブのJSでは配列から作れないものがないといったレベルで何でも加工出来ますので、是非覚えましょう。
これベースで質問文を書き直すとこうなります。

const dayEdited = ['dayTypeId', 'nonReservedVisits', 'reservedVisits', 'canceledReservations', 'workStaffIds'].reduce((obj, key) => {
  obj[key] = this.props.day[key];
  return obj;
}, {})

---

ライブラリが使えるならRamda.jsのpickかすぐ下にあるpickAllあたりを採用すれば一撃です。
Lodashにもpickがあるので、何かしらのライブラリを忍ばせておくと何かと便利だと思います。