从零入门 JavaScript 运算符：理论 + 案例 + 实战全解析
·
作为 JS 最基础的核心语法之一，运算符是我们写代码时绕不开的工具。今天就把从基础算术运算符到实战案例的所有知识点，一次性整理成一篇完整的博客，新手也能轻松看懂、上手练习～
一、算术运算符：加减乘除，还有新手必踩的坑
算术运算符是最基础的运算符，和我们小学学的数学符号很像，但 JS 里有几个特殊用法需要注意。
1. 基础加减乘除
运行
console.log(10 + 10);
console.log(100 - 10);
console.log(10 * 2);
console.log(10 / 5);
这部分和我们平时的数学运算逻辑一致，就是用 JS 语法实现了数字计算。
2. 取余运算符 %
用来求两个数相除的余数，比如：
运行
console.log(13 % 5);
13 除以 5 商 2 余 3，所以结果是 3。它的常见用法是判断数字奇偶：num % 2 === 0 代表偶数。
3. 自增 / 自减运算符 ++ --（新手高频踩坑点）
关键区别：写在变量前面还是后面，执行顺序完全不同。
运行
var a = 1;
console.log(++a);
var b = 1;
console.log(--b);
var x = 1;
console.log(x++);
console.log(x);
var y = 1;
console.log(++y);
一句话总结：前置先算后用，后置先用后算！
二、赋值运算符：简化代码的 “偷懒神器”
赋值运算符把右边的值 “交给” 左边的变量，而复合赋值运算符能帮我们少写重复代码。
运行
var x = 2;
var y = 1;
console.log(x += y);
console.log(x -= y);
console.log(x *= y);
console.log(x /= y);
console.log(x %= y);
这些都是简写形式，和完整写法的效果完全一样，但写起来更简洁。
三、比较运算符：== 和 === 的区别一定要搞懂
比较运算符用来判断两个值的关系，返回 true 或 false，最容易踩坑的就是宽松相等和严格相等的区别。
运行
var num1 = 10;
var num2 = 10;
var num3 = "10";
console.log(num1 === num2);
console.log(num1 === num3);
console.log(num1 == num2);
console.log(num1 == num3);
💡 开发小建议：日常写代码优先用 ===，避免自动类型转换带来的隐藏 bug！
四、逻辑运算符：控制代码分支的核心
逻辑运算符用来组合多个条件判断，是写 if/else 语句的基础。
1. 取反运算符 !
它会把后面的值 “反过来”，同时触发 JS 的布尔转换规则。
运行
console.log(!undefined);
console.log(!null);
console.log(!0);
console.log(!NaN);
console.log(!"");
console.log(!888);
console.log(!"you are my baby");
补充：NaN 是 JS 里的特殊值，代表 “不是一个数字”，通常出现在非法数学运算里，比如 0 除以 0、对负数开平方、字符串转数字失败。
2. 逻辑与 &&
规则：所有条件都为 true，结果才是 true；只要有一个 false，结果就是 false。
运行
console.log(10 < 20 && 10 > 5); // true 两个条件都满足
console.log(10 > 20 && 10 > 5); // false 第一个条件不满足
3. 逻辑或 ||
规则：只要有一个条件为 true，结果就是 true；所有条件都为 false，结果才是 false。
运行
console.log(10 < 20 || 10 > 5); // true 两个条件都满足
console.log(10 > 20 || 10 > 5); // true 第二个条件满足
console.log(10 > 20 || 10 < 5); // false 两个条件都不满足
五、实战案例：用 JS 计算圆的周长与面积
学完了理论，我们来做一个完整的小练习，把前面的知识点串起来！
1. 完整代码
html
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS运算符实战：计算圆的周长与面积</title>
</head>
<body>
<script>
var r = 10.0;
var cir = 2 * Math.PI * r;
var area = Math.PI * r * r;
document.write("已知圆的半径为:" + r + "<br>");
document.write("则圆的周长为:" + cir + "<br>");
document.write("则圆的面积为:" + area);
</script>
</body>
</html>
2. 运行效果
把代码保存为 .html 文件，用浏览器打开后，页面会直接输出：
因为用了 Math.PI，结果比手动写 3.14 要精准得多～
六、新手避坑总结
- 自增 / 自减：前置先算后用，后置先用后算，写在不同位置结果完全不同。
- 相等判断：优先用
===，避免==自动类型转换带来的 bug。 - 布尔转换：记住 6 个会被视为
false的值：false、0、""、null、undefined、NaN。 - 逻辑运算符：
&&一假则假，||一真则真，写多条件判断时别搞混了。 - 实战小技巧：
Math.PI可以直接获取高精度圆周率，不用自己手动输入；toFixed()可以快速控制小数位数。
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)