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

JavaScript 解构赋值小括号的应用

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

不少文章将小括号称作为强制运算符,这是错误的。

在JavaScript中并没有强制运算符这个概念,小括号是分组运算符。

小括号的用法可以参阅JavaScript 小括号()分组运算符一章节。

解构赋值是ES2015新增的功能,可以参阅如下几篇文章:

(1).数组结构赋值参阅JavaScript数组解构赋值一章节。

(2).对象解构赋值参阅JavaScript对象解构赋值一章节。

(3).字符串解构赋值参阅JavaScript字符串解构赋值一章节。

(4). 函数参数解构赋值参阅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]) = ["蚂蚁部落","www.softwhy.com","青岛市南区"];

代码运行效果截图如下:

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;}

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

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

三.最后总结:

上面讲了这么多,好像繁杂的样子,其实关键在于对运算符的理解,什么样的内容可以作为操作数,比如变量、直接量等可以作为操作数,但是不能将解构赋值的模式作为操作数,也不能对未声明的变量使用运算符,因为不能对未声明变量取值。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部