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

JavaScript 连等赋值

2018-11-7 10:47| 作者: admin| 查看: 1018| 评论: 0|来自: 蚂蚁部落

JavaScript赋值运算是最为简单的操作之一。

甚至可以说,即便最为基础薄弱的学习者,对此操作的应用也是充满信心。

代码实例如下:

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

上述代码声明变量webName,并赋值"蚂蚁部落"。

毫无疑问,上面的赋值操作极其简单,再来看如下代码:

[JavaScript] 纯文本查看 复制代码运行代码
let oneObj={webName:"蚂蚁部落"};
let twoObj=oneObj;
oneObj.ant=oneObj={webName:"百度"};
// 打印结果
console.log(oneObj.ant);
console.log(twoObj.ant);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/104833q2su5ih828bs68bm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码是一个连等赋值,打印结果很多朋友可能无法理解。

很多看似简单的操作,其中也牵涉着很多重要的知识,下面分布进行分析。

一.左值与右值:

看如下形式赋值语句:

[JavaScript] 纯文本查看 复制代码
A=B

上面是一个赋值表达式,两个操作数也是表达式,但是有区别:

(1).A必须是左值。

(2).B可以是任意表达式。

左值强调的是引用地址,也就是存储数据的内存地址,右值强调的是数据值,也就是将要被存储的数据。

赋值运算,首先会计算左侧操作数,然后再计算右侧操作数:

(1).首先计算操作数A,得到一个引用地址refA。

(2).然后计算操作数B,得到一个值valB。

(3).最后将值valB存储到refA引用指向的地址,并返回值valB。

更多关于左值与右值内容参阅JavaScript 左值与右值一章节。

二.连等赋值结合性:

看如下赋值语句结构:

[JavaScript] 纯文本查看 复制代码
表达式一=表达式二=表达式三=表达式四

连等赋值遵循右结合规则,上面连等赋值等同于:

[JavaScript] 纯文本查看 复制代码
表达式一=(表达式二=(表达式三=表达式四))

从整体来看,表达式一与运算符右侧所有内容形成一个大的赋值语句,右侧又可以分解为小的赋值语句。

又由于,对单个赋值语句,首先计算左侧运算数,然后再计算右侧运算数,那么上述连等赋值计算顺序如下:

(1).计算表达式一,得到ref1。

(2).计算表达式二,得到ref2。

(3).计算表达式三,得到ref3。

(4).计算表达式四,得到val4。

三.代码分析如下:

经过上面的知识准备,下面再来分析文章开头提出的问题。

[JavaScript] 纯文本查看 复制代码
let oneObj={webName:"蚂蚁部落"};
let twoObj=oneObj;
oneObj.ant=oneObj={webName:"百度"};

为了阐述方便,分别给两个对象直接量取别名mayi与baidu。

代码分析如下:

(1).前两条语句很简单,oneObj与twoObj指向同一个对象。

(2).下面分析第三条语句,它等同于oneObj.ant=(oneObj={webName:"百度"})。

(3).首先计算oneObj.ant,为oneOb所指向的对象添加一个属性ant,对象mayi变为{webName:"蚂蚁部落",ant:undefined},并得到oneObj.ant地址。

(4).然后将对象baidu赋值给oneObj,这时oneObj变为{webName:"百度"},并返回对象baidu,再将baidu赋值给oneObj.ant(不要以为这里的oneObj指向赋值后的新对象{webName:"百度"},它依然指向最初的对象mayi,因为对它求值在oneObj={webName:"百度"}之前),那么mayi对象变为{webName:"蚂蚁部落",ant:{webName:"百度"}},twoObj指向此对象,所以twoObj.ant的值为{webName:"百度"}。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部