Question

我最近偶然发现了ES6提供的新Destructuring Javascript功能。

发现一个奇怪的情况，我不确定发生了什么。希望你们能帮助我理解。

如果我在我的控制台中输入此内容：

var car={}
var {undefinedProp: es6Magic} = car;

我得到一个未定义的。看起来很公平，因为汽车没有明确的属性。

但如果我使用围绕它的If语句，我会得到一个不同的意外结果：

function testPriorities() {
      var car = {}
      if ({
          undefinedProp: es6Magic
        } = car) {
        console.log('how do i even get here', es6Magic);
      }
    }

到底是什么？

为什么为es6Magic分配了一个未定义的值，它仍然返回true？

运行if语句时应用了哪些规则？

Answer 1

如果我在我的控制台中输入此内容：
var car={}
var {undefinedProp: es6Magic} = car;
我得到一个未定义的。

但不是因为es6Magic有一个未定义的值（确实如此，我的意思是它不是原因）。这是因为变量声明没有结果值，并且您的完整代码段没有结果（与表达式语句不同）。

但如果我使用围绕它的If语句，我会得到一个不同的意外结果：
var car = {}
if ({undefinedProp: es6Magic} = car) {
    console.log('how do i even get here', es6Magic);
}
我想这是真的，因为car存在，但为什么它与控制台的评价不同？

实际上，在console.log输出后，您将still get the undefined result from the last statement。

是的，if条件评估为真值，因为car存在 - 这就是赋值表达式总是这样做的。这甚至与解构无关，… = car始终评估到右侧car，无论左侧目标表达式是什么。

您也可以尝试

> var car = {}, es6Magic;
undefined
> ({undefinedProp: es6Magic} = car); // no `var` - plain assignment!
[object Object]

Answer 2

执行if语句是因为你基本上在assignment语句中执行if，它总是返回assigned值，在这种情况下是{}，其值为{{1} }}

true

Answer 3

控制台显示undefined，因为变量声明不返回任何内容，它声明了一个变量。

第二个版本有效，因为{foo: bar}被解释为您要分配的对象文字。这会返回对象，这是真实的。我希望抛出一个错误，它在控制台中执行：

未捕获的SyntaxError：无效的解构分配目标

字面值不应该是有效的目标，但是转换器很可能会破坏它。

使用ES6解构的if语句中的评估顺序

3 个答案: