Verwenden von Spread-Notation in Array.reduce

Question

Ich versuche, die Es6-Syntax für dieses Codefragment arbeiten zu lassen.

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) 

Der Ausgang, wenn ich die Kommentarzeile in https://babeljs.io verwenden, wie unten und das ist, was ich die neue Syntax erhalten möchten.

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

Ich bin nicht sicher, ob es einen Syntaxfehler in diesem Code gibt. Ich habe versucht, alle Presets in Babeljs auszuwählen, aber es kompiliert nicht richtig.

Answer 1

Objektausbreitung ist stage 3 proposal und ist nicht Teil der bestehenden Spezifikationen. Stage 3 preset sollte in Babel aktiviert werden, nämlich transform-object-rest-spread.

Im obigen Code sind Syntaxfehler vorhanden, die verhindern, dass das Programm auch mit den erforderlichen Voreinstellungen korrekt kompiliert wird.

Es should be

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

Answer 2

Zunächst einmal müssen Sie die Eigenschaften in einem zusätzlichen Objekt wickeln (es sei denn, Sie auch die Verbreitung Betreiber auf, dass verwendet werden soll).

{...acc, {[check]: {valid: false}}} können So werden {...acc, [check]: {valid: false}}

Dies bedeutet, dass Sie ein Objekt zu Speicher sind hinzufügen. Der Schlüssel dieses Objekts ist der Name, den Sie ihm zugewiesen haben() und die Werte, die Sie festgelegt haben ({valid ...}).

Zweitens, soweit ich weiß, können Sie den Spread-Operator nicht ohne explizit einen neuen Wert verwenden. So sollten Sie entweder Ihren Zustand auf einer neuen Zeile wie schreiben:

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

Oder wickeln Sie es in zusätzlichen Klammern:

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