从搬家故事讲起:彻底看懂 JavaScript 赋值操作符

9 阅读5分钟



如果你问我,刚学 JavaScript 的时候,哪类操作符最容易被低估?我会毫不犹豫地说:赋值操作符

因为大多数人第一眼看到它,脑子里只剩下一个符号:=

甚至会下意识地觉得:“这有什么好讲的?不就是把右边的值,放到左边的变量里吗?”

但如果你真在项目里踩过坑,尤其是那种变量突然变了、值莫名其妙被改了、对象怎么越用越乱的坑,你就会明白:赋值操作符,决定了数据的“归属权”。

而今天,我想换一种方式,跟你聊聊它。

故事从一次“搬家”开始

我先给你讲个生活里的故事。

假设你要搬家。你原来住在 A 房间,现在准备搬到 B 房间。你把行李从 A 房间,原封不动地搬进了 B 房间。

这一步,在现实世界里叫:搬运

而在 JavaScript 世界里,这个动作,本质上就是——赋值

这行代码,在 JS 眼里就像是在说:把 a 房间里的“10”,复制一份,放到 b 房间里。

重点来了:对基本数据类型来说,搬家是真的“复制一份”

你后来改 b,a 不会受影响。

这一切都很美好,也很直觉。但故事,往往在这里开始变味。

当你搬的是“仓库”,问题就来了

有一天,你不只是搬一个箱子了。你搬的是一个仓库。

你以为发生的是:把 obj1 里的东西,复制一份给 obj2

但 JavaScript 实际做的是:把“仓库地址”,同时写在 obj1 和 obj2 的门牌上

于是,后果就出现了。

这时候你一脸问号:我改的是 obj2,关 obj1 什么事?这正是赋值操作符最容易被误解的地方

= 并不是永远在“复制值”, 在对象、数组、函数这些引用类型里,它复制的是地址(引用)

赋值操作符,其实是在“改归属关系”

如果用一句话来总结:赋值操作符,本质不是“拷贝内容”,而是“建立绑定关系”。

  • 基本类型:绑定的是
  • 引用类型:绑定的是地址

这也是为什么在实际开发中,我们会经常看到这些写法:

然后某天你在某个函数里:

整个系统的状态突然变了。不是 bug,是你不小心共享了同一个“仓库”

复合赋值操作符:程序员的“快捷搬运工”

讲完最基础的 =,我们聊点稍微高级一点的。JavaScript 里还有一类赋值操作符,叫:复合赋值操作符

比如:

  • +=
  • -=
  • *=
  • /=
  • %=

很多人第一次看到它们,觉得这只是语法糖。但如果你用生活场景去想,它们其实很形象。

这就像在说:把 score 房间里的东西,拿出来,加 5,再放回原房间

也就是说:

这些操作符最大的价值,不只是少写几个字符,而是表达意图更清晰

当我看到:

我一眼就知道你在做“累计”。而不是在做“重新计算”。

赋值的“返回值”:一个经常被忽略的细节

你知道吗?在 JavaScript 里,赋值操作符本身也是有返回值的。而且返回的就是被赋的那个值

这段代码是完全合法的。执行顺序是:

  1. b = 10 → 返回 10
  2. a = 10

所以,a 和 b 都是 10。

很多初学者看到这种代码会懵,但理解了“赋值有返回值”,一切就通了。当然,作为一个负责任的工程师,我还是要说一句:这种写法可读性不高,不建议在业务代码中频繁使用。

解构赋值:JavaScript 给你的“智能搬家助手”

如果说普通赋值是人工搬箱子,那解构赋值,就是请了一个智能搬家公司。

这行代码在做什么?它在说:从 user 仓库里,按名字,把 name 和 age 这两个箱子,单独搬出来。

不多不少,刚刚好。数组也是一样:

你不需要关心下标,也不需要写一堆中间变量。这就是现代 JavaScript 里,赋值操作符进化后的形态

默认值:防止“空手而归”的保险

解构赋值还有一个特别实用的能力:默认值

这句话的潜台词是:如果 config 里没有 role,就给我一个默认的 user。

这在处理接口返回值、配置项的时候,简直是救命神器。你不需要写一堆 if,也不需要担心 undefined 到处飞。

赋值顺序,决定了你会不会踩坑

有些 bug,表面看是逻辑问题,实际上是赋值顺序的问题。比如:

你猜 a 是多少?

答案是:1

原因是:

  1. a++ 先返回旧值 1
  2. 再把 a 自增为 2
  3. 然后赋值操作,把 1 又赋回给 a

所以,最终 a 还是 1。

这类问题,本质上都是:赋值操作符 + 表达式求值顺序, 理解这一点,你会少掉很多“玄学 bug”。

为什么说赋值操作符是“隐形的核心能力”

很多人学 JavaScript,只关注:

  • 框架
  • 新特性

但在我看来,真正决定你代码质量的,往往是这些基础操作符。赋值操作符,决定了:

  • 数据是被复制,还是被共享
  • 状态是被修改,还是被替换
  • 变量之间,是独立的,还是绑在一起的

你写 Redux、Vue、React,你调接口、做状态管理、搞性能优化,底层全都是赋值在起作用

总结

如果让我用一句话总结今天的内容,我会说:赋值操作符,不是一个“简单符号”,而是一种“数据管理哲学”。

它告诉你:

  • 什么东西属于谁
  • 谁在改数据
  • 改的是值,还是引用

当你真正理解它,你会发现:很多所谓“诡异的 JavaScript 行为”,其实一点也不诡异。

只是你以前,没有认真看过这个 = 而已。

END

如果你觉得这篇文章对你有帮助,欢迎点个 “在看” ,也可以转发给那个还在被对象赋值坑得怀疑人生的朋友

我是小米,一个喜欢分享技术的31岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货!