JavaScript：爲什麼我在解構時使用賦值時會得到`undefined`？

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

據the MDN docs，解構爲結構分配相當於是基於屬性名稱。對於第二個作業，由於您的對象沒有屬性name和age，因此這些變量未定義。

如果你想分配給變量時，重命名的屬性，可以使用下面的語法：

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

這將在foo的color屬性賦值給變量name和result屬性age。

Answer 2

解構你做到了將匹配上的按鍵，而不是位置（你不能真正依賴的關鍵順序中的對象）的方式。

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

是說

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

Answer 3

看看代碼是如何使用babel進行傳輸的，並且它變得非常清楚發生了什麼。 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