前端开发必备：JavaScript 基础知识（二）

在前一篇中📕前端开发必备：JavaScript 基础知识（一），我们学习了变量、数据类型和基本语法结构。本文将深入探讨运算符与表达式的核心用法，帮助你掌握代码中的数学计算、条件判断和逻辑操作。

运算符与表达式

算术运算符

算术运算符接收两个数字类型的操作数，并返回一个数字类型的算术运算结果。

在 JavaScript 中，算术运算符共有 6 种：加 +、减 -、乘 *、除 /、取余 %、求幂 **。

算术运算符的使用

新建一个 index .html文件，在 <script> 标签内写入以下内容：

console.log(1 + 2)    // 1 + 2 = 3
console.log(7 - 5)    // 7 - 5 = 2
console.log(6 * 3)    // 6 * 3 = 18
console.log(8 / 2)    // 8 / 2 = 4
console.log(9 % 2)    // 9 % 2 = 1
console.log(2 ** 3)   // 2 ** 3 = 8

 控制台的输出结果如下：

 

加法运算符的功能

在 JavaScript 中，加法运算符与其他算术运算符不同，还可以接收两个字符串类型的操作数，并返回字符串的拼接结果。如果只有一个操作数是字符串类型，那么另一个操作数将被强制转换为字符串类型进行拼接。

字符串的拼接

console.log('net' + 'work') // 输出：network

console.log('24' + 'hours') // 输出：24hours
console.log(24 + 'hours')   // 输出：24hours

console.log('number' + '1') // 输出：number1
console.log('number' + 1)   // 输出：number1

 控制台的输出结果如下：

只要加法运算符的两个操作数中有一个为字符串类型，就会执行字符串拼接操作。此时另一个操作数不论是什么类型，都会被强制转换为字符串类型。

运算符的优先级

在 JavaScript 中，各种算术运算与现实一致，存在不同的优先级：先乘除，后加减，同级运算从左至右。

示例：

let a = 50 + 10 / 8
console.log(a)  // 输出：51.25

此时，先计算 10 / 8，结果为 1.25，再计算 50 + 1.25，结果为 51.25。

控制台的输出结果如下：

为了控制运算的先后次序，我们可以使用圆括号将需要先运算的部分包裹起来。

let a = (50 + 10) / 8
console.log(a)  // 输出：7.5

控制台的输出结果如下：

此时，先计算 50 + 10，结果为 60，再计算 60 / 8，结果为 7.5。

比较运算符

比较运算符接收两个操作数，根据特定的规则进行比较，判断为真或为假，返回一个布尔类型的值。

在 JavaScript 中，各种比较运算符的名称及功能如下：

运算符	名称	功能
==	相等	当两侧操作数相等时返回 true，否则返回 false
!=	不相等	当两侧操作数不相等时返回 true，否则返回 false
===	全等	当两侧操作数相等且类型相同时返回 true，否则返回 false
!==	不全等	当两侧操作数不相等或类型不相同时返回 true，否则返回 false
<	小于	当左侧操作数小于右侧操作数时返回 true，否则返回 false
<=	小于等于	当左侧操作数小于或等于右侧操作数时返回 true，否则返回 false
>	大于	当左侧操作数大于右侧操作数时返回 true，否则返回 false
>=	大于等于	当左侧操作数大于或等于右侧操作数时返回 true，否则返回 false

比较运算符的使用

新建一个 index.html文件，在 <script> 标签内写入以下内容：

console.log('2 > 3 的结果为 ' + (2 > 3))      // false
console.log('4 < 5 的结果为 ' + (4 < 5))      // true
console.log('3 >= 1 的结果为 ' + (3 >= 1))    // true
console.log('3 <= 1 的结果为 ' + (3 <= 1))    // false
console.log('4 == 0 的结果为 ' + (4 == 0))    // false
console.log('5 != 4 的结果为 ' + (5 != 4))    // true
console.log('0 !== true 的结果为 ' + (0 !== true))    // true
console.log('0 === true 的结果为 ' + (0 === true))    // false

注意：为了先执行比较运算、再执行字符串拼接，我们需要使用圆括号控制运算顺序。

控制台的输出结果如下：

逻辑运算符

在 JavaScript 中，逻辑运算符包括：与 &&、或 ||、非 !。

这些逻辑运算的真值表如下：

其中，p 和 q 代表两个布尔类型的值，1 代表 true，0 代表 false。

示例：

console.log(true || false)    // true
console.log(true && false)    // false
console.log(!true)            // false

其实，逻辑运算符的操作数不必为布尔类型，结果也可能不是布尔类型：

运算符	名称	功能
&&	逻辑与	当左侧操作数不能转换为 true 时将其返回，否则返回右侧操作数
||	逻辑或	当左侧操作数可以转换为 true 时将其返回，否则返回右侧操作数
!	逻辑非	当操作数可以转换为 true 时返回 false，否则返回 true

注意：对于逻辑与、或运算，如果左侧操作数满足相应条件，那么右侧操作数根本不会被求值。这称为逻辑运算符的短路特性。

逻辑运算符的使用

console.log('0 && 1 的结果为 ' + (0 && 1))    // 0
console.log('0 || 1 的结果为 ' + (0 || 1))    // 1
console.log('!1 的结果为 ' + !1)              // false

控制台的输出结果如下：（0为false 1为true）  

 

条件运算符

条件运算符也叫三目运算符，可以用来判断条件的真假，根据真假执行不同的语句。

在 JavaScript 中，条件运算符的使用方式如下：

<条件表达式> ? <表达式 1> : <表达式 2>

如果「条件表达式」的值可以转换为 true，那么返回「表达式 1」的值，否则返回「表达式 2」的值。  

条件运算符的使用

const age = 20
console.log(age >= 18 ? '已成年' : '未成年')    // 已成年

控制台的输出结果如下：

由于 age 变量的值为 20，故条件表达式 age >= 18 的值为 true，所以条件运算符返回 已成年。

赋值运算符

赋值运算符（=）用于将值分配给变量。

对于以下示例：

let answer
answer = 42
console.log(answer)     // 42

对于未初始化的变量 answer，经过赋值操作后，其值变为 42。

在 JavaScript 中，还存在其它几种赋值运算符，如下所示：

运算符	名称	功能
+=	加法赋值	对两侧操作数执行加法运算，将结果分配给左侧操作数
-=	减法赋值	对两侧操作数执行减法运算，将结果分配给左侧操作数
*=	乘法赋值	对两侧操作数执行乘法运算，将结果分配给左侧操作数
/=	除法赋值	对两侧操作数执行除法运算，将结果分配给左侧操作数
%=	取余赋值	对两侧操作数执行取余运算，将结果分配给左侧操作数
**=	求幂赋值	对两侧操作数执行求幂运算，将结果分配给左侧操作数
&&=	逻辑与赋值	当左侧操作数不能转换为 true 时什么也不做，否则将右侧操作数的值分配给左侧操作数
||=	逻辑或赋值	当左侧操作数可以转换为 true 时什么也不做，否则将右侧操作数的值分配给左侧操作数

 注意：对于逻辑与、或赋值操作，如果左侧操作数满足相应条件，那么右侧操作数根本不会被求值。这称为逻辑赋值运算符的短路特性。

赋值运算符的使用

let a = 2
a += 2          // 相当于 a = a + 2
console.log(a)  // 此时 a 的值为 4
a -= 1          // 相当于 a = a - 1
console.log(a)  // 此时 a 的值为 3
a *= 6          // 相当于 a = a * 6
console.log(a)  // 此时 a 的值为 18
a /= 2          // 相当于 a = a / 2
console.log(a)  // 此时 a 的值为 9

自加自减运算符

在 JavaScript 中，我们可以使用自增运算符 ++ 将一个数字类型的值加一，使用自减运算符 -- 将一个数字类型的值减一。

示例：

let a = 10
a++            // 相当于 a = a + 1 或 a += 1
console.log(a) // 此时 a 的值为 11

let b = 10
b--             // 相当于 b = b - 1 或 b -= 1
console.log(b)  // 此时 b 的值为 9

事实上，自加自减运算符不仅可以放到操作数的后面，也可以放到操作数的前面。

自加自减运算符的使用

let a = 10
let b = a++
console.log(a, b)   // 输出：11 10

let x = 10
let y = ++x
console.log(x, y)   // 输出：11 11

• 自加运算符作为后缀时，先执行赋值操作，故变量 b 的值为 10，然后执行加一操作，故 a 的值为 11；
• 自加运算符作为前缀时，先执行加一操作，故变量 x 的值为 11，然后执行赋值操作，故 y 的值为 11。自减运算符同理。

总结​

运算符与表达式是 JavaScript 的核心基础，直接影响代码的执行逻辑和性能。

本篇文章介绍了 JavaScript 中的六类基本运算符，如下所示：

• 算术运算符：+、-、*、/、%、**

• 比较运算符：==、!=、===、!==、<、<=、>、>=

• 逻辑运算符：&&、||、!

• 条件运算符：<条件表达式> ? <表达式 1> : <表达式 2>

• 赋值运算符：=、+=、-=、*=、/=、%=、**=、&&=、||=

• 自加自减运算符：a++ ++a a-- --a

希望这篇博客能帮助你夯实基础！如果需要补充细节或调整示例，请随时评论或私信告诉我 😊