Array.reduceのスプレッドノーテーションを使用

Question

私はこのコードフラグメントでes6構文を使用しようとしています。

let checkList = [1, 2].map(i => "Check " + i) 

let checks = checkList 
    // .reduce((acc, check) => Object.assign(acc, {[check]: {valid: false}}), {}) 
    .reduce((acc, check) => {...acc, {[check]: {valid: false}}}, {}) 
console.log(checks) 

出力私はhttps://babeljs.ioにコメント行を使用する場合は以下の通りであると私は新しい構文を使用して取得したいものです。

Object { 
    "Check 1": Object { 
    "valid": false 
    }, 
    "Check 2": Object { 
    "valid": false 
    } 
} 

このコードに構文エラーがあるかどうかはわかりません。私はbabeljsのすべてのプリセットを選択しようとしましたが、正しくコンパイルしません。

Answer 1

オブジェクトの広がりはstage 3 proposalであり、既存の仕様の一部ではありません。 BabelではStage 3 presetを有効にする必要があります。つまり、transform-object-rest-spreadです。

上記のコードには、必要なプリセットでも正しくコンパイルできないという構文エラーがあります。

それのshould be

let checks = checkList 
    .reduce((acc, check) => ({...acc, [check]: {valid: false}}), {}); 

Answer 2

まずあなたは（あなたはまた、その上のスプレッド演算子を使用する場合を除き）、余分なオブジェクトのプロパティをラップしていません。

ので{...acc, {[check]: {valid: false}}}これは、あなたがアキュムレータにオブジェクトを追加している意味{...acc, [check]: {valid: false}}

になることができます。このオブジェクトのキーは、割り当てた名前（Check[n]）で、値は設定したものです（{valid ...}）。

第2に、私が知っている限り、明示的に新しい値を指定しなくてもスプレッド演算子を使用することはできません。だから、のような新しい行にあなたの状態を記述する必要があり、次のいずれか

let checks = checkList.reduce((acc, check) => { 
    return {...acc, [check]: {valid: false}} 
}, {}) 

や余分な括弧でラップ：

let checks = checkList.reduce((acc, check) => ({...acc, [check]: {valid: false}}) , {})