您当前的位置：首页 > 计算机 > 编程开发 > JavaScript

JavaScript 运算符详解与应用

时间：02-05来源：作者：点击数：25

前言

本文将通过一系列代码示例详细解析这些运算符的使用方法和应用场景，帮助读者深入理解 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 中常见的运算符及其应用，希望能对读者有所帮助。如果有任何问题或需要进一步讨论，请随时留言交流。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:Vue3实现PDF在线预览功能下一篇:用 HTML、CSS 和 JavaScript 打造绚丽烟花效果

Grid-A-Licious 基于	使用Windows API实现
如何快速了解一个行业	InDesign入门教程\|半

首页

学习

工作

生活

兴趣组

电子

计算机

掌上机件

图库

游戏

考试与竞赛

黑板报

国学

外语

下载

故事汇

社区

课程

JavaScript 运算符详解与应用

前言

一、赋值运算符

简单赋值

复合算术赋值

解析

二、关系运算符

解析

三、相等运算符

解析

四、逻辑运算符

逻辑与运算符 `&&`

解析

逻辑或运算符 `||`

解析

五、练习题

练习题

结尾

JavaScript 运算符详解与应用

前言

一、赋值运算符

简单赋值

复合算术赋值

解析

二、关系运算符

解析

三、相等运算符

解析

四、逻辑运算符

逻辑与运算符 &&

解析

逻辑或运算符 ||

解析

五、练习题

练习题

结尾

逻辑与运算符 `&&`

逻辑或运算符 `||`