JS中()不为人知的作用

今天偶然看到一道面试题：

为什么以下代码在解析中会报错，怎么改正？

let x;
{x}={x:1};

代码第一行let了一个变量，第二行进行了对象的解构赋值，把1赋给了x；所以这时候打印x的值应该是1。

可是浏览器直接报错了，

提示=有问题，可是对象的解构赋值不就是这么写的吗？

我们再来复习一下对象的解构赋值

let {x}={x:1};
console.log(x);

浏览器打印出了1，证明没什么问题，那到底是哪里的错呢？我们再来看一下这两次到底有什么区别？

let x;
{x}={x:1};
console.log(x);
-----------------------------
let {x}={x:1};
console.log(x);

区别就是上面的代码用let声明了一个x，之后才进行对象解构赋值，对象的前面没有let ,浏览器解析的时候只解析到了{x},ES6中{}代表了块级作用域，所以浏览器就直接把{x}解析成了块级作用域，一个对象赋值给块级作用域显然是不成立的，所以就报错了。

下面的代码{x}前面有个let JS直接就解析为对象解构赋值了。

如果把{}放在行首，很容易被JS解析为块级作用域报错。

扫描二维码关注公众号，回复： 8894425 查看本文章

这时候加上一个小括号就可以解决一切问题。

let x;
({x}={x:1});
console.log(x);

成功的打印出了1。

这个小括号到底有什么作用呢？

我们再来看一个例子

var a=(1,2,4,5);
console.log(a);

打印出来的结果是5。

所以小括号的作用就是执行单个或多个表达式，并返回最后一个表达式的值,多个表达式之间需要用逗号“,”分隔开。

所以加上小括号之后JS就把{x}={x:1}解析为表达式了，而不是块级作用域，这个问题就解决了。

自从知道了这个功能，再也不用担心报错了。