JavaScript基础篇:四、 运算符与表达式
一、运算符概述
运算符是用于执行特定操作的符号,能够对一个或多个操作数进行计算、比较或逻辑判断等操作。JavaScript 中的运算符种类丰富,涵盖算术运算符、比较运算符、逻辑运算符、赋值运算符、位运算符等,每种运算符都有其独特的功能和使用场景。
二、算术运算符
算术运算符用于执行基本的数学运算,如加法、减法、乘法、除法等。
(一)加法运算符(`+`)
用于将两个操作数相加。如果操作数都是数字,则执行算术加法;如果其中有一个操作数是字符串,则将另一个操作数转换为字符串后进行拼接。
console.log(5 + 3); // 输出 8console.log("5" + 3); // 输出 "53"
(二)减法运算符(`-`)
用于计算两个数字的差值。如果操作数中包含非数字类型,会尝试将其转换为数字后再进行计算。
console.log(5 - 3); // 输出 2console.log("5" - 3); // 输出 2
(三)乘法运算符(`*`)
用于计算两个数字的乘积。同样,非数字操作数会先被转换为数字。
console.log(5 * 3); // 输出 15console.log("5" * 3); // 输出 15
(四)除法运算符(`/`)
用于计算两个数字的商。需要注意的是,除数不能为零,否则会导致错误或返回`Infinity`、`-Infinity`或`NaN`。
console.log(6 / 2); // 输出 3console.log(5 / 0); // 输出 Infinity
(五)取模运算符(`%`)
用于计算两个数字相除后的余数。取模运算中,被除数和除数的符号会影响结果的符号。
console.log(10 % 3); // 输出 1console.log(-10 % 3); // 输出 -1
(六)递增运算符(`++`)
用于将变量的值增加 1。可以放在变量前面(前置递增)或后面(后置递增),两者在单个表达式中的表现略有不同。
let a = 5;console.log(++a); // 输出 6,a 的值变为 6console.log(a++); // 输出 6,a 的值在下一次使用时变为 7
(七)递减运算符(`--`)
与递增运算符相反,用于将变量的值减少 1。同样有前置和后置两种形式。
let b = 5;console.log(--b); // 输出 4,b 的值变为 4console.log(b--); // 输出 4,b 的值在下一次使用时变为 3
三、比较运算符
比较运算符用于比较两个值的大小或关系,返回一个布尔值(`true`或`false`)。
(一)等于运算符(`==`)
进行松散比较,会尝试将操作数转换为相同的类型后再进行比较。这种转换可能导致一些意外的结果,因此在实际开发中应谨慎使用。
console.log(5 == "5"); // 输出 trueconsole.log(true == 1); // 输出 true
(二)不等于运算符(`!=`)
与等于运算符相反,当两个值不相等时返回`true`。同样会进行类型转换。
console.log(5 != "5"); // 输出 falseconsole.log(true != 2); // 输出 true
(三)严格等于运算符(`===`)
进行严格比较,不仅比较值,还比较类型。只有当类型和值都相同时,才返回`true`。
console.log(5 === "5"); // 输出 falseconsole.log(true === true); // 输出 true
(四)严格不等于运算符(`!==`)
与严格等于运算符相反,当类型或值不同时返回`true`。
console.log(5 !== "5"); // 输出 trueconsole.log(true !== true); // 输出 false
(五)大于运算符(`>`)、小于运算符(`<`)、大于等于运算符(`>=`)、小于等于运算符(`<=`)
用于比较两个值的大小关系。在比较时,如果操作数类型不同,会尝试进行类型转换。
console.log(5 > 3); // 输出 trueconsole.log("5" < 10); // 输出 trueconsole.log(5 >= "5"); // 输出 true
四、逻辑运算符
逻辑运算符用于执行逻辑判断,返回布尔值。常见的逻辑运算符有逻辑与(`&&`)、逻辑或(`||`)和逻辑非(`!`)。
(一)逻辑与运算符(`&&`)
当且仅当两个操作数都为`true`时,结果才为`true`。如果操作数不是布尔值,会先进行隐式转换。
console.log(true && true); // 输出 trueconsole.log(false && true); // 输出 falseconsole.log(5 > 3 && 10 < 20); // 输出 true
(二)逻辑或运算符(`||`)
只要有一个操作数为`true`,结果就为`true`。同样会对非布尔值的操作数进行隐式转换。
console.log(true || false); // 输出 trueconsole.log(false || false); // 输出 falseconsole.log(5 < 3 || 10 > 20); // 输出 false
(三)逻辑非运算符(`!`)
用于取反布尔值。如果操作数不是布尔值,会先转换为布尔值,然后再取反。
console.log(!true); // 输出 falseconsole.log(!false); // 输出 trueconsole.log(!(5 > 3)); // 输出 false
五、赋值运算符
赋值运算符用于将右边的值赋给左边的变量。基本的赋值运算符是等号(`=`),此外还有一些复合赋值运算符,用于简化运算和赋值的步骤。
(一)简单赋值运算符(`=`)
将右边的值赋给左边的变量。如果左边的变量未声明,会报错。
let x = 10;console.log(x); // 输出 10
(二)复合赋值运算符
复合赋值运算符结合了算术运算符或其他运算符和赋值操作,使代码更加简洁。
1. 加法赋值运算符(`+=`)
相当于`x = x + y`。
let x = 5;x += 3;console.log(x); // 输出 8
2. 减法赋值运算符(`-=`)
相当于`x = x - y`。
let x = 5;x -= 3;console.log(x); // 输出 2
3. 乘法赋值运算符(`*=`)
相当于`x = x * y`。
let x = 5;x *= 3;console.log(x); // 输出 15
4. 除法赋值运算符(`/=`)
相当于`x = x / y`。
let x = 6;x /= 2;console.log(x); // 输出 3
5. 取模赋值运算符(`%=`)
相当于`x = x % y`。
let x = 10;x %= 3;console.log(x); // 输出 1
六、位运算符
位运算符对操作数的二进制位进行操作,通常用于底层操作或优化某些计算。
(一)按位与运算符(`&`)
对两个操作数的每一位进行与操作,只有当对应的两位都为 1 时,结果位才为 1,否则为 0。
console.log(5 & 3); // 输出 1(二进制 101 & 011 = 001)
(二)按位或运算符(`|`)
对两个操作数的每一位进行或操作,只要对应的两位中有一个为 1,结果位就为 1。
console.log(5 | 3); // 输出 7(二进制 101 | 011 = 111)
(三)按位异或运算符(`^`)
对两个操作数的每一位进行异或操作,当对应的两位不同时,结果位为 1,否则为 0。
console.log(5 ^ 3); // 输出 6(二进制 101 ^ 011 = 110)
(四)按位取反运算符(`~`)
对操作数的每一位进行取反操作,将 0 变为 1,1 变为 0。
console.log(~5); // 输出 -6(二进制 101 取反为 ...11111010,相当于 -6)
(五)左移运算符(`<<`)
将操作数的二进制位向左移动指定的位数,右边空出的位用 0 填充。
console.log(5 << 1); // 输出 10(二进制 101 << 1 = 1010)
(六)右移运算符(`>>`)
将操作数的二进制位向右移动指定的位数,左边空出的位用符号位填充(正数补 0,负数补 1)。
console.log(5 >> 1); // 输出 2(二进制 101 >> 1 = 10)console.log(-5 >> 1); // 输出 -3(二进制 ...11111011 >> 1 = ...11111101)
(七)无符号右移运算符(`>>>`)
与右移运算符类似,但左边空出的位始终用 0 填充,适用于无符号整数。
console.log(-5 >>> 1); // 输出 2147483643(二进制 ...11111011 >>> 1 = 0111111111111111111111111111111)
七、表达式
表达式是由一个或多个操作数和运算符组成的合法的代码片段,用于计算或执行某种操作。根据表达式的用途和结构,可以分为不同类型。
(一)算术表达式
由数字、变量和算术运算符组成,用于进行数学计算。
let result = (5 + 3) * 2;console.log(result); // 输出 16
(二)逻辑表达式
由布尔值、变量和逻辑运算符组成,用于进行逻辑判断。
let isAllowed = (age >= 18) && (hasPermission === true);console.log(isAllowed); // 根据 age 和 hasPermission 的值输出 true 或 false
(三)条件表达式
使用三元运算符(`? :`)根据条件返回不同的值。
let max = a > b ? a : b;console.log(max); // 输出 a 和 b 中的较大值
(四)逗号表达式
由多个表达式用逗号分隔组成,整个表达式的值是最后一个表达式的值。
let x = (a = 5, b = 10, a + b);console.log(x); // 输出 15
八、运算符优先级与结合性
在复杂的表达式中,运算符的优先级决定了它们的执行顺序。优先级高的运算符会先于优先级低的运算符执行。如果运算符优先级相同,则根据结合性(从左到右或从右到左)来确定执行顺序。
(一)优先级示例
console.log(5 + 3 * 2); // 输出 11,因为乘法优先级高于加法console.log((5 + 3) * 2); // 输出 16,括号改变了优先级
(二)结合性示例
console.log(5 - 3 - 2); // 输出 0,从左到右结合console.log(5 = 3 = 2); // 报错,因为赋值运算符从右到左结合,但不能连续赋值
九、实际应用示例
// 计算三角形的面积let base = 10;let height = 5;let area = (base * height) / 2;console.log("三角形的面积是:" + area);// 判断成绩等级let score = 85;let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : score >= 60 ? "D" : "E";console.log("成绩等级:" + grade);// 交换两个变量的值let a = 5, b = 10;a = a + b;b = a - b;a = a - b;console.log("交换后,a=" + a + ",b=" + b);// 计算阶乘function factorial(n) {if (n === 0 || n === 1) {return 1;} else {return n * factorial(n - 1);}}console.log("5的阶乘是:" + factorial(5));
十、总结与展望
通过本篇教程,系统学习了 JavaScript 中的运算符与表达式,包括算术运算符、比较运算符、逻辑运算符、赋值运算符、位运算符等的用法、优先级和结合性,并通过实际示例展示了它们的应用。运算符和表达式是构建复杂程序逻辑的基础,熟练掌握它们对于编写高效的 JavaScript 代码至关重要。在后续的学习中,将进一步深入探讨 JavaScript 的流程控制语句、函数等核心内容,逐步构建完整的 JavaScript 知识体系,提升编程实践能力。