解构分配导致错误:"意外令牌="

Question

假设我在es6中调用了这个语法:

let a, b;

{a, b} = { a: 100, b: 300 };

代码将无错误地运行;

但是让我们改写是这样的:

function fn() {
    return { a: 100, b: 200 }
}

let a, b;

{ a, b } = fn();

当我运行上面的代码时,它会显示意外的令牌"="; 我有点困惑,有什么区别？

Answer 1

加圆括号: ({ a, b } = fn());

来自Mozilla文档:

在没有声明的情况下使用对象文字解构赋值时,赋值语句周围的圆括号(...)是必需的语法.

{a, b} = {a: 1, b: 2} 不是有效的独立语法,因为 {a, b} 左侧被视为块而不是对象文字.

但是 ({a, b} = {a: 1, b: 2}) ,原样是有效的 var {a, b} = {a: 1, b: 2}