当前位置：极客教程 > 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 * (乘法) 将两个操作数相乘 例如: A * B 将得到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>

      Set the variables to different values and then try...
   </body>
</html>
HTML

输出

a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...
HTML

比较运算符

JavaScript支持以下比较运算符 −

假设变量A的值为10，变量B的值为20，则有以下情况 −

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

示例

下面的代码展示了如何在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>      
      Set the variables to different values and different operators and then try...
   </body>
</html>
HTML

输出

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true
Set the variables to different values and different operators and then try...
JavaScript

逻辑运算符

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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>
HTML

输出

(a && b) => false 
(a || b) => true 
!(a && b) => true
Set the variables to different values and different operators and then try...
JavaScript

位运算符

JavaScript 支持以下位运算符 –

假设变量 A 持有 2，变量 B 持有 3，则 –

序号 运算符与描述
1 & (按位与) 对其整数参数的每个位执行布尔与操作。 示例： (A & B) 等于2。
2 | (按位或) 对其整数参数的每个位执行布尔或操作。 示例： (A | B) 等于3。
3 ^ (按位异或) 对其整数参数的每个位执行布尔异或操作。 异或意味着第一个操作数为真或第二个操作数为真，但不能都为真。 示例： (A ^ B) 等于1。
4 ~ (按位取反) 它是一个一元操作符，通过反转操作数中的所有位来操作。 示例： (~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; // Bit presentation 10
            var b = 3; // Bit presentation 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>      
      Set the variables to different values and different operators and then try...
   </body>
</html>
HTML

输出:

(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0
Set the variables to different values and different operators and then try...
JavaScript

赋值运算符

JavaScript支持以下赋值运算符 –

序号 运算符和描述
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>Set the variables to different values and different operators and then try...</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
Set the variables to different values and different operators and then try...
JavaScript

其他运算符

在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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>
HTML

输出

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...
JavaScript

typeof运算符

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

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

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

Type 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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>
HTML

输出

Result => B is String 
Result => A is Numeric
Set the variables to different values and different operators and then try...
JavaScript

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 精品教程

登录

找回密码？

注册