【零基础学JS - 8 】javaScript中的运算符

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

什么是运算符？

在JavaScript中，运算符是一种特殊的符号，用于对运算数（值和变量）执行运算。例如，

2 + 3; // 5

这里的+是一个执行加法的运算符，而2和3是运算数。

JavaScript运算符类型

以下是本文中将要学习的不同运算符的列表。

• 赋值运算符
• 算术运算符
• 比较运算符
• 逻辑运算符
• 位运算符
• 字符串运算符
• 其他运算符

JavaScript赋值运算符

赋值运算符用于将值赋给变量。例如，

const x = 5;

这里，=运算符用于将值5赋给变量x。

以下是常用的赋值运算符列表：

运算符	名称	示例
=	赋值运算符	a = 7; // 7
+=	加法赋值运算符	a += 5; // a = a + 5
-=	减法赋值运算符	a -= 2; // a = a - 2
*=	乘法赋值运算符	a *= 3; // a = a * 3
/=	除法赋值运算符	a /= 2; // a = a / 2
%=	取余赋值运算符	a %= 2; // a = a % 2
**=	指数赋值运算符	a **= 2; // a = a**2

注意：常用的赋值运算符是=。一旦学习了算术运算符，你就会理解其他赋值运算符，例如+=、-=、*=等。

JavaScript算术运算符

算术运算符用于执行算术计算。例如，

const number = 3 + 5; // 8

这里，+运算符用于添加两个运算数。

运算符	名称	示例
+	加法	x + y
-	减法	x - y
*	乘法	x * y
/	除法	x / y
%	取余	x % y
++	递增（递增1）	++x或x++
–	递减（递减1）	–x或x–
**	指数（幂）	x ** y

以下是JavaScript中算术运算符的示例代码：

let x = 5;
let y = 3;

// 加法
console.log('x + y = ', x + y);  // 8

// 减法
console.log('x - y = ', x - y);  // 2

// 乘法
console.log('x * y = ', x * y);  // 15

// 除法
console.log('x / y = ', x / y);  // 1.6666666666666667

// 取余
console.log('x % y = ', x % y);   // 2

// 递增
console.log('++x = ', ++x); // x现在是6
console.log('x++ = ', x++); // 打印6，然后增加到7
console.log('x = ', x);     // 7

// 递减
console.log('--x = ', --x); // x现在是6
console.log('x-- = ', x--); // 打印6，然后减少到5
console.log('x = ', x);     // 5

//指数
console.log('x ** y =', x ** y);

访问++和–运算符以了解更多信息。

注意：**运算符在ECMAScript 2016中引入，某些浏览器可能不支持。

JavaScript比较运算符

比较运算符比较两个值并返回布尔值，即true或false。例如，

const a = 3, b = 2;
console.log(a > b); // true 

这里，比较运算符>用于比较a是否大于b。

运算符	描述	示例
==	等于：如果运算数相等，则返回true	x == y
!=	不等于：如果运算数不相等，则返回true	x != y
===	严格等于：如果运算数相等且类型相同，则返回true	x === y
!==	严格不等于：如果运算数相等但类型不同或根本不相等，则返回true	x !== y
>	大于：如果左运算数大于右运算数，则返回true	x > y
>=	大于或等于：如果左运算数大于或等于右运算数，则返回true	x >= y
<	小于：如果左运算数小于右运算数，则返回true	x < y
<=	小于或等于：如果左运算数小于或等于右运算数，则返回true	x <= y

以下是JavaScript中比较运算符的示例代码：

// 等于运算符
console.log(2 == 2); // true
console.log(2 == '2'); // true

// 不等于运算符
console.log(3 != 2); // true
console.log('hello' != 'Hello'); // true

// 严格等于运算符
console.log(2 === 2); // true
console.log(2 === '2'); // false

// 严格不等于运算符
console.log(2 !== '2'); // true
console.log(2 !== 2); // false

比较运算符用于决策和循环。你将在后面的教程中详细了解比较运算符的使用。

JavaScript逻辑运算符

逻辑运算符执行逻辑运算并返回布尔值，即true或false。例如，

const x = 5, y = 3;
(x < 6) && (y < 5); // true

这里，&&是逻辑运算符AND。由于x < 6和y < 5都为true，因此结果为true。

运算符	描述	示例
&&	逻辑AND：如果两个运算数都为true，则返回true，否则返回false	x && y
||	逻辑OR：如果任一运算数为true，则返回true；如果两个都为false，则返回false	x || y
!	逻辑NOT：如果运算数为false，则为true，反之亦然。	!x

以下是JavaScript中逻辑运算符的示例代码：

// 逻辑AND
console.log(true && true); // true
console.log(true && false); // false

// 逻辑OR
console.log(true || false); // true

// 逻辑NOT
console.log(!true); // false

逻辑运算符用于决策和循环。你将在后面的教程中详细了解逻辑运算符的使用。

JavaScript位运算符

位运算符对数字的二进制表示执行运算。

运算符	描述
&	按位和
|	按位或
^	按位异或
~	按位非
<<	左移
>>	带符号右移
>>>	无符号右移

位运算符在日常编程中很少使用。

JavaScript字符串运算符

在JavaScript中，你还可以使用+运算符将两个或多个字符串连接（连接）在一起。

以下是JavaScript中字符串运算符的示例代码：

// 连接运算符
console.log('hello' + 'world');

let a = 'JavaScript';

a += ' tutorial';  // a = a + ' tutorial';
console.log(a);

输出：
helloworld
JavaScript tutorial

注意：当+与字符串一起使用时，它执行连接。但是，当+与数字一起使用时，它执行添加。

其他JavaScript运算符

以下是JavaScript中的其他运算符列表。你将在后面的教程中了解这些运算符的使用。

运算符	描述	示例
,	评估多个运算数并返回最后一个运算数的值。	let a = (1, 3, 4); // 4
?:	三元运算符，基于条件返回值	(5>3)？‘success’：‘error’; //“success”
delete	删除对象的属性或数组的元素	delete x
typeof	返回指示数据类型的字符串	typeof 3; // “number”
void	丢弃表达式的返回值	void（x）
in	如果对象中指定的属性存在，则返回true	prop in object
instanceof	如果指定的对象是指定的对象类型，则返回true	object instanceof object_type

详解自增运算符++和自减运算符–的使用

在编程中（如Java、C、C++、JavaScript等），自增运算符++将变量的值增加1，而自减运算符–将变量的值减少1。

例如：

a = 5
++a;          // a的值变为6
a++;          // a的值变为7
--a;          // a的值变为6
a--;          // a的值变为5

这些操作很简单易懂。但是，当这些运算符作为前缀或后缀使用时，它们之间有一个重要的区别。

前缀和后缀的++和–运算符

如果你将运算符作为前缀使用，如：++var，那么变量var的值将增加1，然后返回该值。

如果你将运算符作为后缀使用，如：var++，那么先返回变量var的原始值，然后再将其增加1。

这些运算符的工作方式类似于减法运算符，只不过它将值减少1。

让我们看看在C、C++、Java和JavaScript中如何使用。

示例1：C

#include <stdio.h>
int main() {
   int var1 = 5, var2 = 5;

   // 显示5
   // 然后，var1的值增加到6。
   printf("%d\n", var1++);

   // var2的值增加到6
   // 然后，它被显示。
   printf("%d\n", ++var2);

   return 0;
}

示例2：C++

#include <iostream>

using namespace std;

int main() {
   int var1 = 5, var2 = 5;

   // 显示5
   // 然后，var1的值增加到6。
   cout << var1++ << endl;

   // var2的值增加到6
   // 然后，打印。
   cout << ++var2 << endl;

   return 0;
}

示例3：Java

class Operator {
    public static void main(String[] args) {
        int var1 = 5, var2 = 5;

        // 显示5
        // 然后，var1的值增加到6。
        System.out.println(var1++);

        // var2的值增加到6
        // 然后，var2被显示。
        System.out.println(++var2);
    }
}

示例4：JavaScript

let var1 = 5, var2 = 5;

// 显示5
// 然后，var1的值增加到6
console.log(var1++)

// var2的值增加到6
// 然后，var2被显示
console.log(++var2)

这些程序的输出将是相同的。

输出结果为：

5
6