JavaScript: Warum erhalte ich `undefined`, wenn ich einen Auftrag mit Destrukturierung verwenden?

Question

JavaScript, Google Chrome

Dies ist mein Codebeispiel. Warum bekomme ich die undefined Werte?

let foo = {name: 'Bob', age: 24}; 
 
let {name, age} = foo; 
 

 
console.log(name); // 'Bob' 
 
console.log(age); // 24 
 

 
foo = {color: 'red', result: true}; 
 
({name, age} = foo); 
 

 
console.log(name); // "undefined" instead of 'red' 
 
console.log(age); // undefined instead of true

Answer 1

sagen Nach the MDN docs, für Strukturen Destrukturierung Zuordnung auf Eigenschaftsnamen basiert. Für Ihre zweite Zuordnung, da Ihr Objekt keine Eigenschaften name und age, werden diese Variablen nicht definiert.

Wenn Sie Eigenschaften umbenennen, wenn auf Variablen zuordnen, können Sie die folgende Syntax verwenden:

foo = {color: 'red', result: true}; 
({color: name, result: age} = foo); 

dass die color Eigenschaft foo auf die Variable name und der result Eigenschaft age wird zuweisen.

Answer 2

Destrukturierung so, wie Sie es taten auf den Tasten entsprechen, werden nicht Position (Sie in Objekte auf dem Schlüssel, um abhängen kann nicht wirklich).

const {foo} = {foo: "bar"} 

ist das Äquivalent

const foo = ({foo: "bar"}).foo 

Answer 3

Werfen Sie einen Blick darauf, wie der Code transpiled wird babel mit und es wird wirklich klar, was geschieht. Using the babel console

'use strict'; 

var foo = { name: 'Bob', age: 24 }; 
var _foo = foo, 
    name = _foo.name, 
    age = _foo.age; 


console.log(name); // 'Bob' 
console.log(age); // 24 

foo = { color: 'red', result: true }; 
var _foo2 = foo; 
name = _foo2.name; 
age = _foo2.age; 


console.log(name); // "undefined" instead of 'red' 
console.log(age); // undefined instead of true