第四课:运算符——计算机的“加减乘除”与“灵魂拷问”
大家好!上节课咱们在内存里给数据安了家,还认识了各种数据“物种”——数字、字符串、布尔值……但光有数据不动,就像买了一堆菜却不做饭,有啥用?今天,我们要学习怎么“烹饪”这些数据,用各种运算符让它们动起来、比一比、甚至做逻辑推理。
运算符就是计算机里的“工具人”,有的负责算术(加减乘除),有的负责比较(谁大谁小),有的负责逻辑(与或非)。学会它们,你就能指挥计算机干各种活了。
1. 算术运算符:数学课代表
算术运算符就是用来做数学运算的,跟小学数学差不多,但多了几个新朋友。
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
+ |
加法 | 5 + 3 |
8 |
- |
减法 | 5 - 3 |
2 |
* |
乘法 | 5 * 3 |
15 |
/ |
除法 | 5 / 2 |
2.5 |
% |
取余 | 5 % 2 |
1 |
** |
指数 | 5 ** 2 |
25 |
1.1 加法运算符的“两面派”
+有两个身份:数字相加和字符串拼接。如果两边都是数字,就做加法;如果有一边是字符串,就把另一边也转成字符串,然后拼接。这就是它的“两面派”作风。
console.log(3 + 5); // 8(数字加法)
console.log('3' + 5); // '35'(字符串拼接)
console.log('hello' + ' world'); // 'hello world'
1.2 取余运算符(%):看看能不能整除
取余就是求除法剩下的余数。常用于判断奇偶(num % 2 === 0为偶数),或者实现循环队列。
console.log(10 % 3); // 1
console.log(8 % 2); // 0
1.3 指数运算符(**):快速幂
ES7引入的**相当于Math.pow(),比如2 ** 3就是2的3次方(结果为8)。
2. 赋值运算符:把值塞进变量
最基本的赋值是=,意思是把右边的值赋给左边的变量。但JavaScript提供了一些“快捷操作”,让你在赋值的同时做运算。
| 运算符 | 例子 | 等价于 |
|---|---|---|
= |
x = y |
x = y |
+= |
x += y |
x = x + y |
-= |
x -= y |
x = x - y |
*= |
x *= y |
x = x * y |
/= |
x /= y |
x = x / y |
%= |
x %= y |
x = x % y |
**= |
x **= y |
x = x ** y |
这些运算符能让你少敲几个字母,比如count += 1比count = count + 1简洁多了。
let num = 10;
num += 5; // 相当于 num = num + 5,现在 num 是 15
num *= 2; // 现在 num 是 30
3. 比较运算符:谁更强?谁相等?
比较运算符用来比较两个值,结果永远是布尔值:true(真)或false(假)。它们是程序的“判官”,决定代码走哪条路。
3.1 相等与不等:双等号和三等号的恩怨
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
== |
相等(值相等) | 5 == '5' |
true |
=== |
严格相等 | 5 === '5' |
false |
!= |
不等 | 5 != '5' |
false |
!== |
严格不等 | 5 !== '5' |
true |
==只比较值,不比较类型,如果类型不同会先进行类型转换(这叫“隐式转换”),然后再比较。这经常带来意想不到的结果:
console.log(0 == false); // true(false 转成 0)
console.log('' == false); // true(都转成 0?其实规则复杂)
console.log(null == undefined); // true(特殊规则)
而===是严格相等,值和类型必须都一样才返回true。建议永远使用===和!==,避免隐式转换带来的坑。
3.2 大小比较:>、<、>=、<=
这些运算符也会进行类型转换(比如字符串和数字比较时,字符串会转成数字,如果转不了就成NaN,结果总是false)。
console.log(5 > 3); // true
console.log(5 >= 5); // true
console.log('10' > 5); // true('10' 转成 10)
console.log('abc' > 5); // false('abc' 转成 NaN,NaN 与任何数比较都是 false)
比较特殊的是字符串之间比较,是按字典顺序(ASCII/Unicode码)逐个字符比较。
console.log('apple' > 'banana'); // false(因为 a 和 b 比较)
console.log('2' > '12'); // true(因为比较的是字符 '2' 和 '1',不是数字大小)
所以字符串比较要小心,最好转成数字再比。
4. 逻辑运算符:与、或、非的“决策三人组”
逻辑运算符用来组合或反转布尔值,是程序逻辑的核心。
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
&& |
与 | true && false |
false |
|| |
或 | true || false |
true |
! |
非 | !true |
false |
4.1 逻辑与(&&):一假即假
a && b只有a和b都是true时,结果才为true;否则为false。
有趣的是,&&和||并不总是返回布尔值,它们返回的是决定结果的那个操作数的值(短路计算)。比如:
console.log(5 && 10); // 10(因为 5 是 truthy,所以返回第二个操作数)
console.log(0 && 10); // 0(因为 0 是 falsy,直接返回 0)
console.log('hello' && 'world'); // 'world'
这叫短路求值:对于&&,如果左边是假,整个表达式肯定是假,右边就不计算了,直接返回左边值;如果左边是真,结果取决于右边,返回右边值。
4.2 逻辑或(||):一真即真
a || b如果a是 true,直接返回a;否则返回b。
console.log(5 || 10); // 5(5 是真,直接返回 5)
console.log(0 || 10); // 10(0 是假,返回右边 10)
console.log(null || '默认值'); // '默认值'
这个特性常用来设置默认值,比如let name = inputName || '匿名';。
4.3 逻辑非(!):颠倒黑白
!把真变成假,假变成真。它总是返回布尔值。
console.log(!true); // false
console.log(!0); // true(0 是 falsy,!0 就是 true)
console.log(!'hello'); // false('hello' 是 truthy)
两次非!!可以用于将任何值转成对应的布尔值(相当于Boolean()):
console.log(!!'hello'); // true
console.log(!!0); // false
5. 位运算符(简介):操作二进制
位运算符直接操作数字的二进制位,包括&(与)、|(或)、~(非)、^(异或)、<<(左移)、>>(右移)等。对于初学者,了解即可,通常用在底层或性能优化场景。
console.log(5 & 1); // 1(0101 & 0001 = 0001)
console.log(5 | 1); // 5(0101 | 0001 = 0101)
6. 运算符优先级:先算谁,后算谁
就像数学里先乘除后加减一样,JavaScript运算符也有优先级。遇到复杂表达式时,优先级高的先运算。记不住优先级没关系,可以用括号()明确指定顺序。
let a = 2 + 3 * 4; // 先算 3*4=12,再加 2,得 14
let b = (2 + 3) * 4; // 括号优先,得 20
let c = true || false && false; // 先算 false && false 为 false,再 true || false 得 true
当不确定时,用括号最保险。
7. 动手小练习:运算符大乱斗
打开控制台,玩一玩这些运算符:
- 计算
7 + 3 * 2和(7 + 3) * 2看看区别。 - 判断
'10' - 5的结果和类型。 - 试试
5 == '5'和5 === '5'的区别。 - 用
&&写一个表达式:如果age大于18,就输出'成年',否则输出'未成年'。(提示:可以用短路求值,比如age >= 18 && console.log('成年')但这样不完善,下节课学if会更简单) - 用
||设置一个默认值:let username = 用户输入 || '游客';并测试用户输入为空的情况。 - 用
!判NaN的布尔值(!!NaN是什么?)。
8. 小结与下集预告
今天咱们认识了运算符大家庭:
- 算术运算符:
+ - * / % **,数据的基本操作。 - 赋值运算符:
= += -=等,简化代码。 - 比较运算符:
==vs===,记住用三等号避坑。 - 逻辑运算符:
&& || !,程序的“决策大脑”。 - 位运算符:二进制操作,进阶技能。
- 运算符优先级:用括号掌控一切。
下节课,我们将学习流程控制——用if/else和switch让程序学会“思考”,根据不同的条件执行不同的代码。到时候,你就能写出真正有“智商”的程序了。
记得完成练习,下节课见!
课后作业:
- 写出以下表达式的结果,并在控制台验证:
10 + '20' - 5'10' * '2'true + true + true'5' == 5 && '5' === 5!null && !!undefined
- 编写一段代码,用
prompt获取用户的年龄(字符串),然后用>=判断是否成年(18岁),用console.log打印“成年”或“未成年”。注意处理用户输入非数字的情况(可以先不管,但可以思考)。 - 用
||实现:如果用户输入的名字为空,则使用默认名字“匿名用户”。
评论