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解析为块级作用域报错。

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

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

成功的打印出了1。

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

我们再来看一个例子

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

打印出来的结果是5。

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

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

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页