前言
本文将通过一系列代码示例详细解析这些运算符的使用方法和应用场景，帮助读者深入理解 JavaScript 中的运算符机制。
一、赋值运算符
简单赋值
赋值运算符是最基本的运算符之一，用于将一个值赋给变量。以下是一个简单的赋值操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//简单赋值
var i = 3;
var j = i; // 将i中变量值3取出来，存放到j的变量中
var k = i + 3; // i + 3是一个表达式，将表达式的结果6，存放到k的变量中
console.log(i, j, k); // 输出: 3 3 6
</script>
</body>
</html>
复合算术赋值
复合算术赋值运算符结合了算术运算和赋值操作，简化了代码书写。常见的复合算术赋值运算符有 +=, -= , *= , /= 和 %=。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//复合算术赋值
var i = 3;
i *= 2 + 3; // i = i * (2 + 3) i = 3 * (2 + 3)
console.log(i); // 输出: 15
var j = 3;
j += 3; // j = 3 + 3
console.log(j); // 输出: 6
var i = 5;
var a = 3;
a += ++i + ++i - i++ + i++; // i = 9
// a = 3 + (6 + 7 - 7 + 8) a = 17
console.log(a); // 输出: 17
var b = a++ + i++ + ++a + a++ + "a++";
// b = 17 + 9 + 19 + 19 + 'a++' 64 + 'a++' '64a++'
console.log(i, a, b); // 输出: 10 20 '64a++'
</script>
</body>
</html>
解析
i *= 2 + 3：先计算右边的表达式2 + 3，结果为5，然后将i乘以5，最终i的值为15。j += 3：将j的值增加3，最终j的值为6。a += ++i + ++i - i++ + i++：这里涉及多个自增和自减操作，需要注意它们的执行顺序。最终a的值为17。b = a++ + i++ + ++a + a++ + "a++"：这个表达式中包含了多个自增操作和字符串拼接，最终b的值为'64a++'。
二、关系运算符
关系运算符用于比较两个值的大小或相等性，返回布尔值 true 或 false。JavaScript 中的关系运算符包括 >, <, >=, <= 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//关系运算符
console.log(4 > 3); // true 数字之间比较，正常比较
console.log(4 > '3'); // true Number与String之间比较，先将字符串转为数字，再比较 '3' 3
console.log('10' > '2'); // false String之间比较，从左到右依次比较一个字符 第一次比较 '1' > '2' false
console.log(1 >= true); // true 在比较的时候，true自动转为1进行比较
console.log(1 >= false); // true 在比较的时候，false自动转为0进行比较
console.log(1 >= '3a'); // false '3a' 3a a不是一个数字 NaN
console.log(1 >= undefined); // false undefined转为NaN
console.log(1 >= NaN); // false
console.log('20' > '2'); // true 字符串比较时，逐字符比较，'2' > '2' 且 '0' > ''
console.log('a' > 'b'); // false 比较的是两个字符的编码值（是数字）
console.log('我' > '你'); // true Unicode 编码值比较
</script>
</body>
</html>
解析
4 > 3：数字之间的比较，结果为true。4 > '3'：字符串'3'被转换为数字3后进行比较，结果为true。'10' > '2'：字符串比较时，逐字符比较，'1'小于'2'，因此结果为false。1 >= true：true被转换为1后进行比较，结果为true。1 >= false：false被转换为0后进行比较，结果为true。1 >= '3a'：字符串'3a'转换为NaN，结果为false。1 >= undefined：undefined转换为NaN，结果为false。1 >= NaN：任何值与NaN比较都为false。'20' > '2'：字符串比较时，逐字符比较，'2'相等，'0'大于空字符，结果为true。'a' > 'b'：字符编码值比较，'a'小于'b'，结果为false。'我' > '你'：Unicode 编码值比较，'我'大于'你'，结果为true。
三、相等运算符
相等运算符用于判断两个值是否相等，分为宽松相等 == 和严格相等 ===。宽松相等会进行类型转换，而严格相等不会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(1 == '1'); // true '1'会自动转为1 1==1 true
console.log(1 === '1'); // false 先比较类型，Number 1 String '1' 所以类型不相同，false
console.log(1 === 1); // true 都是Number类型 1 === 1 结果也相同，所以true
console.log(1 != '1'); // false 1是否等于1 如果等于为true,如果不等于，为false
console.log(1 !== '1'); // true === 1. 如果类型相同，结果也相同，则为true. 2. 如果类型不相同 ，结果为false 3. 如果类型相同，结果不相同，结果为false
console.log(1 !== 2); // true
</script>
</body>
</html>
解析
1 == '1'：宽松相等，'1'被转换为1后进行比较，结果为true。1 === '1'：严格相等，类型不同，结果为false。1 === 1：严格相等，类型和值都相同，结果为true。1 != '1'：宽松不等，'1'被转换为1后进行比较，结果为false。1 !== '1'：严格不等，类型不同，结果为true。1 !== 2：严格不等，类型相同但值不同，结果为true。
四、逻辑运算符
逻辑运算符用于组合多个条件表达式，常见的逻辑运算符有 &&（逻辑与）和 ||（逻辑或）。它们具有短路特性，即当左边的表达式已经决定了整个表达式的值时，右边的表达式将不再执行。
逻辑与运算符 &&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 如果&&左边表达式的值为true时，返回右边表达式的值。
// 如果&&左边表达式的值为false时，发生短路，返回左边表达式的值。
var i = 3;
var j = !i && (i = 4);
console.log(i, j); // 3 false
var i = 3;
var j = i * 2 % 7 && (i = 4);
console.log(i, j); // 4 4
</script>
</body>
</html>
解析
!i && (i = 4)：!i为false，短路返回false，i不变。i * 2 % 7 && (i = 4)：i * 2 % 7结果为6，为true，返回右边表达式的值4，同时i被赋值为4。
逻辑或运算符 ||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// || 左为true,返回左边的值
// || 左为false,返回右边的值
var i = 3;
var j = !i || (i = 4);
console.log(i, j); // 4 4
var i = 3;
var j = i * 2 % 7 || (i = 4);
console.log(i, j); // 3 6
</script>
</body>
</html>
解析
!i || (i = 4)：!i为false，返回右边表达式的值4，同时i被赋值为4。i * 2 % 7 || (i = 4)：i * 2 % 7结果为6，为true，返回左边表达式的值6，i不变。
五、练习题
为了巩固对运算符的理解，下面提供一些练习题，并给出相应的答案。
练习题
-
number 等于或大于 90，但小于 100
number >= 90 && number < 100 -
ch 不是字符 q 也不是字符 k
ch !== 'q' && ch !== 'k' -
number 界于 1 到 9 之间（包括 1 不包括 9），但是不等于 5
number >= 1 && number < 9 && number !== 5 -
number 不在 1 到 9 之间
number < 1 || number > 9 -
判断这个字符是空格，是数字，是字母
ch === ' ' || ch >= '0' && ch <= '9' || ch >= 'a' && ch <= 'z' || ch >= 'A' && ch <= 'Z' -
有 3 个整数 a,b,c，判断谁最大，列出所有可能
a > b && a > c b > a && b > c c > a && c > b -
判断 year 表示的某一年是否为闰年
闰年的条件是符合下面二者之一：
- 能被 4 整除但不能被 100 整除
- 能被 400 整除
year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
结尾
通过对赋值运算符、关系运算符、相等运算符和逻辑运算符的详细解析，我们不仅掌握了这些运算符的基本用法，还了解了它们在实际编程中的应用场景。希望本文能够帮助读者更好地理解和运用 JavaScript 中的运算符，提升编程能力。
在日常开发中，合理使用运算符可以简化代码逻辑，提高代码的可读性和维护性。建议读者多加练习，熟悉各种运算符的特点和使用技巧，以便在实际项目中灵活运用。
以上内容涵盖了 JavaScript 中常见的运算符及其应用，希望能对读者有所帮助。
