JavaScript：非構造化の割り当てを使用すると、なぜ「未定義」になるのですか？

Question

JavaScript、Google Chrome

これは私のコード例です。なぜundefinedの値を取得するのですか？あなたはそれが（あなたが本当にオブジェクト内のキーの順序に依存することはできません）キー、ない位置に一致します行った方法を非構造

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

を言うのと同じです。 2番目の割り当てでは、オブジェクトのプロパティーがnameおよびageでないため、これらの変数は未定義になります。

あなたが変数に割り当てるときにプロパティの名前を変更したい場合は、次の構文を使用することができます。

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

変数nameとageにresultプロパティにfooのcolorプロパティを割り当てます。

Answer 2

。

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

構造のための割り当てがプロパティ名に基づいて構造化代入、the MDN docsによる

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

Answer 3

コードがバベルを使用してどのようにトランスバールされているかを見て、何が起きているのかが本当に明確になります。 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