正确利用JS赋值表达式返回值

  1. 什么是赋值表达式
  2. 赋值表达式的返回值是多少
  3. 赋值表达式的应用
  4. 赋值表达式需要注意的地方
  5. 初始化变量的省力写法

什么是赋值表达式

赋值表达式就是利用赋值号(=) 将右值赋给左值的一个表达式, 很多人应该不知道,赋值表达式也和其他表达式一样,是有返回值的。

赋值表达式的返回值是多少

例如一个常规表达式 a=1 ,针对赋值表达式, 表达式的返回值就是他的右值本身,也就是说 a=1 的返回值是1,当然,在这个例子中,并没有一个变量接收这个返回值。

赋值表达式的应用

那么,这个特性如何进行实际应用呢?相信读者很快就能想到脑海里的一种骚操作: a=b=c=d=e=1 。 没错,这种写法是完全可以解释的: 赋值表达式是将右值赋值给左值,那首先:
e=1 返回值是1,接下来相当于d=1 以此类推,所有跟着的变量就全都是1了。

赋值表达式需要注意的地方

如果真的有这么好用,那也就不会有本篇文章了。最近因为这个技巧陷入了一个大坑。
因为这种写法用来初始化变量十分方便, 所以我写了类似 a=b=c=d=[] 的语句,这里的重点在于,赋值表达式的右值是一个对象类型(JS中数组也属于对象类型),后续对abcd分别进行push加内容,比如

a.push('a')
b.push('b')
c.push('c')
d.push('d')

却发现原本不属于一个变量的元素也被加进去了。比如这时打印d,会发现d是['a','b','c','d']
通过这样讲解下来或许很容易意识到这里犯了一个很基本的错误,那就是将对象赋值给变量时,变量保存的是对象的引用,而不是对象本身,所以其实上述四个变量全都引用了同一个数组,也就是说,a、b、c、d
都等于['a','b','c','d']

通过这次踩坑,也是彻底清楚了, 赋值表达式的返回值就是右值本身,而不是右值的克隆等形式

初始化变量的省力写法

上面这种利用赋值表达式返回值来初始化变量, 对于基本类型是完全ok的。而对于对象类型,相比一句赋值一个变量,可以用解构的形式快速赋值。

[a, b, c, d, e] = [[], [], [], [], []]

不过这种写法的缺点是,容易把一句写的很长,后续要维护更换变量或者什么情况的时候,不太方便。对应的办法是将变量分组进行多次解构赋值,或者直接干脆就一次只解构赋值部分变量:

[a.all, b.all, c.all] = [[], [], []]
[a.allID, b.allID, c.allID] = [[], [], []]

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以邮件至 yionr99@gmail.com