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;

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

区别在于，编译器认为赋值操作的返回值在第一种情况下可能很重要，而在第二种情况下则不重要。因此，在第一种情况下，您将在最后看到_config作为返回值。实际上，它不是必需的，但是编译器具有防御性-会尽最大努力确保功能完全相同。

关于为什么，它认为在第一种情况下可能需要返回值，这是因为在声明config对象之后缺少了分号。

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

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会有问题？

3 个答案: