为什么在声明的对象上解构 ES6 会出现问题？

Question

我有一个问题，或者更奇怪的情况。我正在使用 https://es6console.com.

我想使用解构并将属性分配给已声明的变量。看起来我声明对象的地方有问题。请打开 https://es6console.com/jm6e72c7/ 并点击转换为 ES5。我在变量后声明对象时有一种奇怪的行为。

// not working
let ip, port;

let config = {
    ip: 'ip',
    port: 'port'
}

({ip, port} = config)

console.log(ip);

//working
let obj = {
    name: 'name',
    age: 'age'
}

let name, age;

({name, age} = obj)

console.log(name);

Answer 1

这是必须使用分号的情况之一：

let ip, port;

let config = {
 ip: 'ip',
 port: 'port'
};  //< --- you need the ;

({ip, port} = config)

console.log(ip);

否则javascript会将代码解释为：

let config = {ip: 'ip',port: 'port'}() which is a type error because it tries to call a function.

Answer 2

首先，它们都有效。将 ES6 代码编译为 ES5 有两种不同的方法：

({ip, port} = config)
// converted to
((_config = config, ip = _config.ip, port = _config.port, _config));

// and

({name, age} = obj)
// converted to
name = obj.name;
age = obj.age;

在这两种情况下，结果都是将变量设置为对象中的适当值。

不同之处在于，编译器认为赋值操作的 return 值在第一种情况下可能很重要，但在第二种情况下则不会。因此，在第一种情况下，您会在末尾看到 _config 作为 return 值。实际上不需要，但转译器是防御性的——它会尽最大努力确保功能完全相同。

至于为什么它认为你可能想要第一种情况下的return值，这是因为[的声明后缺少分号=13=]对象。

添加分号后，它按预期工作：

let config = {
    ip: 'ip',
    port: 'port'
};

({ip, port} = config)

Working example

Answer 3

问题是缺少分号。

let ip, port;

let config = {
 ip: 'ip',
 port: 'port'
}

({ip, port} = config)//this is being evaluated as part of the let config declaration...

console.log(ip);
console.log('------------------------------');

let obj = {
 name: 'name',
 age: 'age'
}

let name, age;

({name, age} = obj)

console.log(name);

需要

let ip, port;

let config = {
 ip: 'ip',
 port: 'port'
};//added semicolon here

({ip, port} = config);//not needed here, but good to have

console.log(ip);
console.log('------------------------------');

let obj = {
 name: 'name',
 age: 'age'
}

let name, age;

({name, age} = obj)

console.log(name);

您会注意到，即使运行为 es6，您也会在第一个代码片段中遇到解构错误。这是因为解释器将语句读为

let ip, port;
let config = {ip:'ip',port:'port'}({ip, port} = config)

为什么在声明的对象上解构 ES6 会出现问题？

Why there is a problem with destructuring ES6 on declared object?

javascript

ecmascript-6

object-destructuring