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

解构你的方式将匹配键，而不是位置（你不能真正依赖于对象中的键顺序）。

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

相当于说

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

Answer 2

根据the MDN docs，结构的解构分配基于属性名称。对于第二个作业，由于您的对象没有属性name和age，因此这些变量未定义。

如果要在分配变量时重命名属性，可以使用以下语法：

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

这会将color foo属性分配给变量name，将result属性分配给age。

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

JavaScript：当我使用带有解构的赋值时，为什么我会得到`undefined`？

3 个答案: