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

Question

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

发现一个奇怪的情况，我不太确定发生了什么。希望大家帮我理解。

如果我在控制台中输入：

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

我得到一个未定义的。对我来说很公平，因为 car 没有定义属性.

但是如果我在它周围使用 If 语句，我会得到不同的意外结果：

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

什么鬼？

为什么 es6Magic 被赋予了一个未定义的值，但它仍然 returns 正确？

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

Answer 1

执行 if 语句是因为您基本上是在 if 语句中执行 assignment，该语句始终 return assigned 值，在本例中为 {}计算结果为 true.

var b

if(b={}){console.log("what!!")}

function a(){
  var car={}
  return {undefinedProp: es6Magic} = car;
}

console.log(a())

Answer 2

控制台显示 undefined 因为变量声明没有 return 任何东西，它声明了一个变量。

第二个版本有效，因为 {foo: bar} 被解释为您要分配给的对象文字。 return 是真实的对象。我希望它会在控制台中引发错误：

Uncaught SyntaxError: Invalid destructuring assignment target

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

Answer 3

If i type this in my console:
var car={}
var {undefinedProp: es6Magic} = car;
I get an undefined.

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

But if i use an If statement around it i get a different and unexpected result:
var car = {}
if ({undefinedProp: es6Magic} = car) {
    console.log('how do i even get here', es6Magic);
}
I guess that is true because the car exists, but why does it evaluate differently from the console?

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

是的，if 条件的计算结果为真值，因为 car 存在 - 这就是赋值表达式总是做的事情。这甚至与解构没有任何关系，… = car 总是计算右侧 car 而不管左侧目标表达式是什么。

你也可以试试

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

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

Order of evaluation in if statement in with ES6 destructuring

javascript

destructuring

ecmascript-6