刚学JS的小伙伴，一听到“算术运算符”就有点懵，总觉得是啥高深的技术，其实真不是。说白了，它就是JS里用来做“加减乘除”的工具，跟我们小时候算数学题一模一样，只不过换了种在代码里表达的方式。
别被“运算符”这三个字唬住，它一点都不抽象。咱们平时做网站，只要涉及到数字计算，都离不开它。比如用户购物算总价、表单里算年龄、倒计时算剩余时间，全是算术运算符在干活。
先唠唠最常用的几种，不玩虚的，全是一线开发里天天用的。加、减、乘、除就不用多说了，符号跟数学里一样，+是加、-是减、*是乘、/是除。但有几个小细节，新手特别容易踩坑。
比如加法，JS里的+有点“调皮”，如果两边是数字，就是正常加法；可要是一边是数字、一边是文字，它就会把数字变成文字，俩拼在一起。我刚学的时候，就犯过这错，想算10+20，结果写成10+"20"，出来个“1020”，尴尬得不行。
还有取余运算符%，看着冷门，其实超实用。比如判断一个数是奇数还是偶数，用数字%2，结果是0就是偶数，是1就是奇数。做分页、循环计数的时候，这玩意儿能省不少事。
还有自增++、自减--，比如i++，就是i自己加1，写起来比i = i + 1简洁多了。做计数器、倒计时的时候，几乎每次都能用到，能少写一行代码是一行，毕竟一线开发，效率最重要。
很多人觉得算术运算符简单，不用特意学，可实际写代码的时候，总容易出小问题。比如除法不保留小数、取余算错、加法拼接成字符串，这些小坑我都踩过。给大家整个综合实例，包含了常用的算术运算符，复制就能运行，一看就懂：
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.container {
width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #eee;
}
.result {
margin-top: 20px;
padding: 15px;
background: #f5f5f5;
font-size: 16px;
}
button {
padding: 8px 16px;
background: #0099ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<h3>JS算术运算符综合演示</h3>
<p>点击按钮，查看不同算术运算符的计算结果</p>
<button"calculate()">执行计算</button>
<div id="result">计算结果将显示在这里...</div>
</div>
<script>
function calculate() {
// 定义两个基础数字，模拟开发中用户输入的数值
let num1 = 25;
let num2 = 4;
let result = "";
// 1. 基础加减乘除
result += `25 + 4 = ${num1 + num2}\n`;
result += `25 - 4 = ${num1 - num2}\n`;
result += `25 × 4 = ${num1 * num2}\n`;
result += `25 ÷ 4 = ${num1 / num2}（保留小数）\n`;
result += `25 ÷ 4 取整 = ${Math.floor(num1 / num2)}\n`;
// 2. 取余运算（判断奇偶、分页常用）
result += `25 % 4 = ${num1 % num2}（余数）\n`;
result += `25是${num1 % 2 === 0 ? '偶数' : '奇数'}\n`;
// 3. 自增自减（计数器常用）
let count = 0;
count++; // 自增，相当于count = count + 1
count++;
result += `计数器自增两次后：${count}\n`;
count--; // 自减，相当于count = count - 1
result += `计数器自减一次后：${count}\n`;
// 4. 易错点：加法拼接 vs 数字加法
let num3 = 10;
let str = "20";
result += `10 + "20" = ${num3 + str}（注意：文字和数字相加会拼接）\n`;
result += `10 + Number("20") = ${num3 + Number(str)}（转成数字后正常加法）`;
// 显示结果
document.getElementById('result').innerText = result;
}
</script>
</body>
</html>
其实算术运算符真的很简单，核心就是用来处理数字计算。一线开发里，它不算高深技术，但却是基础中的基础，少了它，很多功能都实现不了。新手不用死记硬背，多动手写几遍实例，踩过几次小坑，自然就熟练了。毕竟写代码这事儿，实操永远比死记硬背管用。
