别再死记硬背了,一篇文章搞懂 JS 乘性操作符



想象一下。在 JavaScript 世界里,有一家非常忙碌的工厂,名字叫 Number Factory 。这家工厂每天的工作就是------处理各种数字请求

有的请求很简单:

"帮我算一下 2 × 3。"

有的请求就很奇怪:

"帮我算一下 '6' * '2'。"

"那 null / 5 呢?"

"true % 2 会剩下什么?"

于是,工厂门口站着三位老员工:

  • **乘法操作符 *** ------ 力气最大
  • 除法操作符 / ------ 切得最细
  • 取模操作符 % ------ 专门管"剩下多少"

今天,我们就以数字工厂的一天 为主线,把 JavaScript 的乘性操作符彻底讲透。

什么是乘性操作符?

在 JavaScript 中,乘性操作符(Multiplicative Operators) 一共有三个:

听起来是不是很简单?

别急。 JavaScript 的精髓,从来不在"能算",而在------它是怎么帮你算的

乘法操作符 *:力气最大的老员工

1、最普通的乘法

这是最常见的用法:

没什么好说的,对吧?但 JavaScript 从不满足于"普通"。

2、字符串 × 数字:先换工服再干活

在数字工厂里,只要你拿着 * 进门,不管你是谁,都得先换成 Number 工服

规则很明确:乘法操作符会把操作数隐式转换成 Number 类型

但如果换不了呢?

3、换不了工服的下场:NaN

在工厂里,'abc' 被领到更衣室一看:"兄弟,你这不是数字啊。"

于是结果直接变成:

4、特殊值参与乘法

我们来看一张非常重要的表:

示例代码:

面试高频点:null 在数值运算中,几乎总是 0。

除法操作符 /:切得最细的老员工

如果说乘法是"使劲干活",那除法就是------精细分配

1、基本除法

JavaScript 的除法,默认是浮点除法,不会像某些语言那样自动取整。

2、被除数是 0?故事开始刺激了

在数字工厂里,除法员工遇到 0,会很冷静地说一句:"无限大。"

3、0 / 0:工厂直接宕机

规则总结一下:

4、除法中的隐式转换

和乘法一样,除法也会触发 Number 转换

规则一句话记住:乘法和除法,是 JavaScript 中最"严格"的操作符之一, 它们不玩字符串拼接,只认数字。

取模操作符 %:管"剩下多少"的老员工

终于轮到今天最容易被误解的一个了。

1、什么是取模?

取模,不是取百分比 ,而是:取除法后的余数

在数字工厂里:10 块钱,每人发 3 块,发完以后桌上还剩 1 块。

2、取模的经典应用场景

✔ 判断奇偶

这是前端面试出现频率极高的一种写法。

3、负数取模,很多人会算错

记住一个核心规则取模结果的符号,跟被除数一致

4、特殊值参与取模

对,你没看错:

  • null → 0
  • true → 1

三大操作符行为对照表(重点收藏)

这张表,我建议你直接截图:

为什么面试官爱问"乘性操作符"?

因为它表面简单,实际全是坑

  1. 隐式类型转换
  2. NaN 的传染性
  3. Infinity 的出现条件
  4. 负数取模的规则
  5. null / undefined 的差异

很多人写 JavaScript 写了好几年,却在这一块翻车。

总结

如果你今天只能记住三句话,请记住这三句:

乘法、除法、取模,都会把操作数转成 Number

转不了的,直接 NaN

取模结果的符号,永远跟被除数走

JavaScript 从来不是"随便算",而是规则清晰,只是你没系统看过

END

如果你觉得这篇文章对你有帮助,欢迎点赞、收藏、转发 给那个总是被 JS 隐式转换坑的朋友

我们,下篇见。

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

相关推荐
十里-10 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季66611 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
雨季66611 小时前
Flutter 三端应用实战:OpenHarmony 简易倒序文本查看器开发指南
开发语言·javascript·flutter·ui
小北方城市网11 小时前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf
console.log('npc')11 小时前
vue2 使用高德接口查询天气
前端·vue.js
2401_8920005211 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter
天马379811 小时前
Canvas 倾斜矩形绘制波浪效果
开发语言·前端·javascript
天天向上102411 小时前
vue3 实现el-table 部分行不让勾选
前端·javascript·vue.js
qx0912 小时前
esm模块与commonjs模块相互调用的方法
开发语言·前端·javascript
摘星编程12 小时前
在OpenHarmony上用React Native:SectionList吸顶分组标题
javascript·react native·react.js