当前位置：极客教程 > JavaScript > 学习JavaScript > JavaScript – 操作符

JavaScript – 操作符

JavaScript – 操作符

什么是操作符？

让我们看一个简单的表达式 4 + 5 等于 9 。在这里，4和5被称为 操作数 ，‘+’被称为 操作符 。JavaScript支持以下类型的操作符。

  • 算术运算符
  • 比较运算符
  • 逻辑（或关系）运算符
  • 赋值运算符
  • 条件（或三元）运算符

让我们逐个查看所有运算符。

算术运算符

JavaScript支持以下算术运算符−

假设变量A包含10，变量B包含20，则−

序号 操作符及其描述
1 +（加） 将两个操作数相加 例如： A + B 将给出30
2 -（减） 将第二个操作数从第一个操作数中减去 例如： A - B 将给出-10
3 *（乘） 将两个操作数相乘 例如： AB将得到200
4 /（除法） 将分子除以分母 例如： B / A将得到2
5 %（模） 输出整数除法的余数 例如： B % A将给出0
6 ++（递增） 将整数值增加1 例如： A++ 将给出11
7 \--（递减） 将整数值减少1 例如： A-- 将给出9

注 − 加法运算符（+）适用于数字和字符串。例如，"a" + 10将给出”a10″。

示例

以下代码展示了如何在JavaScript中使用算术运算符。

<html>
   <body>

      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var c = "Test";
            var linebreak = "<br />";

            document.write("a + b = ");
            result = a + b;
            document.write(result);
            document.write(linebreak);

            document.write("a - b = ");
            result = a - b;
            document.write(result);
            document.write(linebreak);

            document.write("a / b = ");
            result = a / b;
            document.write(result);
            document.write(linebreak);

            document.write("a % b = ");
            result = a % b;
            document.write(result);
            document.write(linebreak);

            document.write("a + b + c = ");
            result = a + b + c;
            document.write(result);
            document.write(linebreak);

            a = ++a;
            document.write("++a = ");
            result = ++a;
            document.write(result);
            document.write(linebreak);

            b = --b;
            document.write("--b = ");
            result = --b;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>

      将变量设置为不同的值，然后尝试...
   </body>
</html>
HTML

输出结果

a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
将变量设置为不同的值，然后尝试...
HTML

比较运算符

JavaScript支持以下比较运算符−

假设变量A包含10，变量B包含20，则−

序号 运算符和描述
1 = = (等于) 检查两个操作数的值是否相等，如果相等，则条件为真。 例如： (A == B) 为 false。
2 != (不等于) 检查两个操作数的值是否相等，如果值不相等，则条件为真。 例如： (A != B) 为 true。
3 > (大于) 检查左操作数的值是否大于右操作数的值，如果是，则条件为真。 例如： (A > B) 为 false。
4 < (小于) 检查左操作数的值是否小于右操作数的值，如果是，则条件为真。 例如： (A < B) 为 true。
5 >= (大于或等于) 检查左操作数的值是否大于或等于右操作数的值，如果是，则条件为真。 例如： (A >= B) 为 false。
6 <= (小于或等于) 检查左操作数的值是否小于或等于右操作数的值，如果是，则条件为真。 例如： (A <= B) 为 true。

示例

以下代码展示了如何在JavaScript中使用比较运算符。

<html>
   <body>  
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";

            document.write("(a == b) => ");
            result = (a == b);
            document.write(result);
            document.write(linebreak);

            document.write("(a < b) => ");
            result = (a < b);
            document.write(result);
            document.write(linebreak);

            document.write("(a > b) => ");
            result = (a > b);
            document.write(result);
            document.write(linebreak);

            document.write("(a != b) => ");
            result = (a != b);
            document.write(result);
            document.write(linebreak);

            document.write("(a >= b) => ");
            result = (a >= b);
            document.write(result);
            document.write(linebreak);

            document.write("(a <= b) => ");
            result = (a <= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      将变量设置为不同的值和不同的运算符，然后尝试...
   </body>
</html>
HTML

输出

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true
将变量设置为不同的值和不同的运算符，然后尝试...
HTML

逻辑运算符

JavaScript支持以下逻辑运算符 −

假设变量A为10，变量B为20，则 −

序号 运算符&描述
1 && (逻辑与) 如果两个操作数都是非零的，则条件为真。 例如: (A && B)为真。
2 || (逻辑或) 如果两个操作数中有一个是非零的，则条件为真。 例如: (A || B)为真。
3 ! (逻辑非) 反转其操作数的逻辑状态。如果条件为真，则逻辑非运算符将使其变为假。 例如: ! (A && B)为假。

示例

尝试以下代码以了解如何在JavaScript中实现逻辑运算符。

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = true;
            var b = false;
            var linebreak = "<br />";

            document.write("(a && b) => ");
            result = (a && b);
            document.write(result);
            document.write(linebreak);

            document.write("(a || b) => ");
            result = (a || b);
            document.write(result);
            document.write(linebreak);

            document.write("!(a && b) => ");
            result = (!(a && b));
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>设置变量值和不同的运算符，然后尝试...</p>
   </body>
</html>
HTML

输出

(a && b) => false 
(a || b) => true 
!(a && b) => true
设置变量值和不同的运算符，然后尝试...
HTML

位运算符

JavaScript支持以下位运算符−

假设变量A为2，变量B为3，则−

序号 运算符及描述
1 & (位运算AND) 对于整数参数的每个位执行布尔AND运算。 例子: (A & B) 等于 2。
2 | (位运算OR) 对于整数参数的每个位执行布尔OR运算。 例子: (A | B) 等于 3。
3 ^ (位运算XOR) 对于整数参数的每个位执行布尔异或运算。异或意味着操作数1为真或操作数2为真，但不是两者都是真的。 例子: (A ^ B) 等于 1。
4 ~ (位运算NOT) 这是一元运算符，通过反转操作数中的所有位来操作。 例子: (~B) 等于 -4。
5 << (左位移) 它将第一个操作数中的所有位向左移动，并且移动的位数由第二个操作数指定。新的位被填充为零。将值左移一个位置等于将其乘以2，将两个位置左移等于乘以4，依此类推。 例子: (A << 1) 等于 4。
6 >> (右位移) 二进制右移运算符。左操作数的值向右移动由右操作数指定的位数。 例子: (A >> 1) 等于 1。
7 >>> (零填充右位移) 这个运算符就像>>运算符，但左移时在左边移入的位始终是零。 例子: (A >>> 1) 等于 1。

例子

尝试以下代码来在 JavaScript 中实现位运算。

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 2; // 二进制10
            var b = 3; // 二进制11
            var linebreak = "<br />";

            document.write("(a & b) => ");
            result = (a & b);
            document.write(result);
            document.write(linebreak);

            document.write("(a | b) => ");
            result = (a | b);
            document.write(result);
            document.write(linebreak);

            document.write("(a ^ b) => ");
            result = (a ^ b);
            document.write(result);
            document.write(linebreak);

            document.write("(~b) => ");
            result = (~b);
            document.write(result);
            document.write(linebreak);

            document.write("(a << b) => ");
            result = (a << b);
            document.write(result);
            document.write(linebreak);

            document.write("(a >> b) => ");
            result = (a >> b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      设置不同的变量和不同的运算符，然后尝试...
   </body>
</html>
HTML
(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0
设置不同的变量和不同的运算符，然后尝试...
HTML

赋值运算符

JavaScript支持以下赋值运算符 –

Sr.No. 运算符 & 描述
1 = (简单赋值) 将右侧操作数的值赋给左侧操作数 例如: C = A + B 将 A + B 的值赋给 C
2 += (加和赋值) 将右侧操作数与左侧操作数相加并将结果赋给左侧操作数。 例如: C += A 相当于 C = C + A
3 −= (减和赋值) 从左侧操作数中减去右侧操作数并将结果赋给左侧操作数。 例如: C -= A 相当于 C = C - A
4 *= (乘和赋值) 将右侧操作数与左侧操作数相乘并将结果赋给左侧操作数。 例如: C *= A 相当于 C = C * A
5 /= (除和赋值) 将左侧操作数除以右侧操作数并将结果赋给左侧操作数。 例如: C /= A 相当于 C = C / A
6 %= (取模和赋值) 使用两个操作数取模并将结果赋给左侧操作数。 例如: C %= A 相当于 C = C % A

注意 − 逻辑相同适用于位运算符，因此它们将变成像 <<=，>>=，&=，|= 和 ^= 这样的样子。

示例

尝试以下代码以在JavaScript中实现赋值运算符。

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var linebreak = "<br />";

            document.write("Value of a => (a = b) => ");
            result = (a = b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a += b) => ");
            result = (a += b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a -= b) => ");
            result = (a -= b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a *= b) => ");
            result = (a *= b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a /= b) => ");
            result = (a /= b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a %= b) => ");
            result = (a %= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>将变量设置为不同的值和不同的操作符，然后尝试......</p>
   </body>
</html>
HTML

输出

Value of a => (a = b) => 10
Value of a => (a += b) => 20 
Value of a => (a -= b) => 10 
Value of a => (a *= b) => 100 
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
将变量设置为不同的值和不同的操作符，然后尝试......
HTML

杂项运算符

在JavaScript中有两个非常有用的运算符：条件运算符（? 🙂 和 typeof运算符。

条件运算符（? 🙂

条件运算符首先对一个表达式进行真假值的评估，然后根据评估结果执行两个给定的语句中的一个。

序号 运算符及描述
1 ? : (条件运算符) 判断条件是否成立，若成立则返回值X，否则返回值Y

示例

尝试以下代码来理解JavaScript中的条件运算符作用。

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";

            document.write ("((a > b) ? 100 : 200) => ");
            result = (a > b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);

            document.write ("((a < b) ? 100 : 200) => ");
            result = (a < b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>设置不同的变量值和运算符再尝试…</p>
   </body>
</html>
HTML

输出

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100
设置不同的变量值和运算符再尝试…
HTML

typeof运算符

typeof运算符是一个一元运算符，它位于单个操作数之前，可以是任何类型。它的值是一个字符串，表示操作数的数据类型。

如果操作数是数字、字符串或布尔值，typeof运算符计算结果为”number”、”string”或”boolean”，并根据计算结果返回true或false。

以下是typeof运算符的返回值列表。

类型 typeof返回的字符串
Number “number”
String “string”
Boolean “boolean”
Object “object”
Function “function”
Undefined “undefined”
Null “object”

示例

以下代码展示了如何实现typeof运算符。

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = "String";
            var linebreak = "<br />";

            result = (typeof b == "string" ? "B is String" : "B is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);

            result = (typeof a == "string" ? "A is String" : "A is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>设置不同的变量值和不同的运算符，然后尝试…</p>
   </body>
</html>
HTML

输出

Result => B is String Result => A is Numeric
设置不同的变量值和不同的运算符，然后尝试…
Bash

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

学习JavaScript

登录

找回密码？

注册