您的位置:首页> 前端教程> ES6教程
文章导航

JavaScript 解构赋值小括号

2018-9-19 10:46| 作者: admin| 查看: 1696| 评论: 0|来自: 蚂蚁部落

相当一部分文章将小括号 () 称作为强制运算符,这是错误的。

JavaScript 没有强制运算符,小括号是分组运算符,参阅 小括号 () 分组运算符 一章节。

解构赋值中经常有分组运算符的应用,下面介绍一下容易出现失误的应用场景。

一.不能使用小括号的情况:

(1).声明中的变量不能用小括号包裹:

[JavaScript] 纯文本查看 复制代码
let [(webName)] = ["蚂蚁部落"];

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/19/105215tklppbn1ktdz0ztc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

小括号是运算符,它与操作数 webName 构成一个表达式。

表达式返回对操作数运算后的值,然而此时变量 webName 并未被声明。

又由于变量在声明之前不能对其取值,所以最终报错。

[JavaScript] 纯文本查看 复制代码
let {url: (webUrl)} = {url:"softwhy.com"};
function func([(age)]) { return age; };

上述两行代码都会报错,原因和前面的代码一致,不再累赘。

(2).模式整体不能使用小括号:

[JavaScript] 纯文本查看 复制代码运行代码
let [webName,url, address] = ["蚂蚁部落", "www.softwhy.com",  "青岛市南区"];
console.log(webName,url,address);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/19/105410ikwgumng7bugiq3u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

左侧部分 [webName,url,address] 可以称之为模式,规定解构赋值采用何种模式。

模式不能使用小括号包裹,代码修改如下:

[JavaScript] 纯文本查看 复制代码
let ([webName,url,address]) = ["蚂蚁部落", "  "青岛市南区"];

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/19/105619mhz4v10f3515fqu5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

左侧是模式,不是一个表达式或者值,而运算符会对操作数运算求值,并返回这个值。

不可能使用运算符对一个模式求值,所以上述代码报错。

(3).模式不能使用小括号:

[JavaScript] 纯文本查看 复制代码
let {(url): url} = {url: "http://www.softwhy.com"};

上面代码报错,因为 url 不是一个普通变量,而是模式,无法使用操作符对其运算求值。

二.可以应用小括号的情形:

[JavaScript] 纯文本查看 复制代码运行代码
let url;
[(url)] = ["http://www.softwhy.com"];
console.log(url);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/19/105832k23v3vh4zj1spunq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面之所以可以用小括号,因为变量url已经声明,只不过在外部声明而已。

[JavaScript] 纯文本查看 复制代码运行代码
let url;
({ url:url } = {url:"http://www.softwhy.com"});
console.log(url);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/19/105928auisfwt77owsio6f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是在整个解构赋值外面包裹小括号,否则会报错。

因为大括号会优先被解读为语句,而不是解构赋值的语法结构。

三.最后总结:

关键在于对运算符的理解,什么样的内容可以作为操作数,比如变量、直接量等可以作为操作数,但是不能将解构赋值的模式作为操作数,也不能对未声明的变量使用运算符,因为不能对未声明变量取值。

3

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

最新评论

返回顶部