JavaScript 连等赋值

小灰灰 2020-06-02 14:50 559阅读 0赞

# JavaScript 连等赋值

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

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

代码实例如下：

```javascript
let webName="蒲公英云";
```

上述代码声明变量webName，并赋值"蒲公英云"。

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

```javascript
let oneObj={webName:"蒲公英云"};
let twoObj=oneObj;
oneObj.ant=oneObj={webName:"百度"};
// 打印结果
console.log(oneObj.ant);
console.log(twoObj.ant);
```

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

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

**一.左值与右值：**

看如下形式赋值语句：

```javascript
A=B
```

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

（1）.A必须是左值。

（2）.B可以是任意表达式。

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

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

（1）.首先计算操作数A，得到一个引用地址refA。

（2）.然后计算操作数B，得到一个值valB。

（3）.最后将值valB存储到refA引用指向的地址，并返回值valB。

**二.连等赋值结合性：**

看如下赋值语句结构：

```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:"百度"}。

发表评论取消回复

表情：

评论列表（有 0 条评论，559人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript逻辑运算符与赋值运算符

逻辑运算符 JavaScript中有三个逻辑运算符，&&与、||或、!非。 JavaScript 中的逻辑运算符可用来确定变量或者是值之间的逻辑关系。通常用于布尔型值，

柔情只为你懂/ 2022年11月03日 10:44/ 0 赞/ 216 阅读

相关 JavaScript连等赋值问题

var a = {n:1}; var b = a; // 持有a，以回查 a.x = a = {n:2}; alert(a.x);/

末蓝、/ 2022年07月16日 09:13/ 0 赞/ 133 阅读

相关 JavaScript之对象拷贝与赋值

今天在做公司面试题的时候，遇到了一道关于JavaScript之对象拷贝与赋值的问题，突然觉得很有意义，想和大家一起来分享一下！首先，先摆出代码，如下： / C

拼搏现实的明天。/ 2022年07月14日 11:13/ 0 赞/ 111 阅读

相关 JavaScript中赋值运算符的使用

JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中；而复合赋值运算混合了其他操作（例如算术运算

向右看齐/ 2022年06月02日 09:48/ 0 赞/ 156 阅读

相关 JAVA 连等赋值问题

一、描述关于 Java 连等赋值，例如`a=b=c;`我们知道它是从右往左依次赋值的，其结果大致可以拆分为`b=c;a=b;`，但是当栈中没有持有变量的引用时，则会出现

雨点打透心脏的1/2处/ 2022年02月12日 16:49/ 0 赞/ 148 阅读

相关 JavaScript赋值运算符

开发工具与关键技术：vs与js 作者：戴怡斌撰写时间：2019年6月17日运算符可能不熟悉的人会有点陌生，不过看了这篇文章大

拼搏现实的明天。/ 2022年01月12日 18:09/ 0 赞/ 245 阅读

相关 Javascript 面试题连等赋值 a.x = a = {n: 2}

Javascript 面试题连等赋值 a.x = a = \{n: 2\} var a = {n: 1} var b = a; a.n = a = {

淩亂°似流年/ 2021年10月23日 09:41/ 0 赞/ 203 阅读

相关 javaScript---ES6解构赋值

今天我兄弟遇到的一道题，分享给大家： ![70][] 运行结果：![70 1][] 这是ES6结构赋值的问题：解析如下： ![70 2][] [70]:

叁歲伎倆/ 2021年09月15日 02:10/ 0 赞/ 295 阅读

相关 JavaScript 连等赋值

JavaScript 连等赋值 JavaScript赋值运算是最为简单的操作之一。甚至可以说，即便最为基础薄弱的学习者，对此操作的应用也是充满信心。

小灰灰/ 2020年06月02日 14:50/ 0 赞/ 560 阅读

相关 JavaScript 等号 = 赋值运算符

JavaScript 等号 = 赋值运算符赋值运算符用一个等号 = 表示，将右侧表达式的值赋值给左侧。一个等号表示赋值，两个等号是等号运算符，三个等号是全等运算符。

红太狼/ 2020年05月26日 14:54/ 0 赞/ 923 阅读