别再死记硬背了,一篇文章搞懂 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岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号"软件求生",获取更多技术干货!

相关推荐
用头发抵命16 分钟前
Vue 3 中优雅地集成 Video.js 播放器:从组件封装到功能定制
开发语言·javascript·ecmascript
蓝冰凌40 分钟前
Vue 3 中 defineExpose 的行为【defineExpose暴露ref变量】详解:自动解包、响应性与实际使用
前端·javascript·vue.js
奔跑的呱呱牛1 小时前
generate-route-vue基于文件系统的 Vue Router 动态路由生成工具
前端·javascript·vue.js
柳杉1 小时前
从动漫水面到赛博飞船:这位开发者的Three.js作品太惊艳了
前端·javascript·数据可视化
Greg_Zhong2 小时前
前端基础知识实践总结,每日更新一点...
前端·前端基础·每日学习归类
We་ct2 小时前
LeetCode 148. 排序链表:归并排序详解
前端·数据结构·算法·leetcode·链表·typescript·排序算法
TON_G-T2 小时前
day.js和 Moment.js
开发语言·javascript·ecmascript
IT_陈寒2 小时前
JavaScript开发者必看:5个让你的代码性能翻倍的隐藏技巧
前端·人工智能·后端
Irene19912 小时前
JavaScript 中 this 指向总结和箭头函数的作用域说明(附:call / apply / bind 对比总结)
javascript·this·箭头函数