前端基础之JavaScript运算符

合集 - 前端炒米粉(25)

1.前端基础之前端知识引入2024-03-182.前端基础之HTTP协议介绍2024-03-183.前端基础之HTML基础2024-03-184.前端基础之HTML进阶2024-03-185.前端基础之CSS基础2024-03-196.前端基础之CSS选择器2024-03-197.前端基础之CSS基本属性2024-03-198.前端基础之CSS浮动和定位方式2024-03-199.CSS小练习2024-03-1910.前端基础之JavaScript引入2024-03-1911.前端基础之JavaScript的数据类型2024-03-1912.前端基础之JavaScript数组2024-03-21

13.前端基础之JavaScript运算符2024-03-21

14.前端基础之JavaScript流程控制2024-03-2115.前端基础之JavaScript函数2024-03-2116.前端基础之JavaScript对象2024-03-2117.前端基础之JavaScriptDOM和BOM2024-03-2118.前端基础之原生js事件绑定案例2024-03-2119.前端基础之jQuery引入2024-03-2320.前端基础之jQuery基础2024-03-2321.前端基础之jQuery进阶2024-03-2322.前端基础之jQuery事件2024-03-2323.前端基础之jQuery重要补充2024-03-2324.前端框架之Bootstrap2024-03-2425.前端补充：url编码2024-04-09

收起

一、什么是运算符

运算符，顾名思义就是在运算中的符号，例如加法中的 ”+“ 就是一个运算符。严谨来说，运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。

二、运算符的分类

JavaScript 中的运算符可以分为多种类型，包括算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符等。以下是这些运算符的详细解释：

1. 算术运算符

• +：加法运算符，用于相加两个值。
• -：减法运算符，用于相减两个值。
• *：乘法运算符，用于相乘两个值。
• /：除法运算符，用于相除两个值。
• %：取模运算符，返回除法操作的余数。
• ++：递增运算符，将操作数的值增加 1。
• --：递减运算符，将操作数的值减少 1。

加法运算
（1）两个字符串进行加法运算，则作用是连接字符串，并返回；

（2）任何字符串 + “ ”空串做运算，都将转换为字符串，由浏览器自动完成，相当于调用了String （ ）

运算顺序

• 先乘除取余，再算加减，有括号先算括号

特殊NaN

• 只要NaN参与运算得到的结果也是NaN

隐式转换

• 隐式转换：null转换成0，undefined转换成NaN等

2. 赋值运算符

• =：赋值运算符，用于将右侧的值赋给左侧的变量。
• +=、-=、*=、/=：分别表示加、减、乘、除后再赋值给左侧的变量。

例如： a+=3 等价于 a=a+3

3. 比较运算符

• ==、===：相等运算符，分别表示相等和严格相等。
• !=、!==：不相等运算符，分别表示不相等和严格不相等。
• >、<、>=、<=：大于、小于、大于等于、小于等于运算符。

（1）特殊NaN

• NaN是Not a Number的缩写，表示一种特殊的浮点数，它与任何数值都不相等，包括自己。

isNaN(NaN) // true
isNaN(Infinity) // false
isNaN(-Infinity) // false
isNaN("hello") // true
isNaN(true) // false

• 在比较两个NaN值时，它们并不严格相等，而是被视为相等（因为JavaScript中的所有NaN值都被视为“不同”）。
• 但是，在非严格比较中，如果两个NaN值同时出现在同一个运算中，则它们被视为相等。

（2）Infinity

• Infinity是JavaScript中的一个特殊数字，表示正无穷大或负无穷大。

• 它是双精度浮点数类型的最大或最小值。

• Infinity ===Infinity 其他要根据情况而定

Infinity == Infinity // true
Infinity != Infinity // false
Infinity > Infinity // false
Infinity < Infinity // false
Infinity >= Infinity // true
Infinity <= Infinity // true

• 注意，尽管两个Infinity值在比较中被认为是相等的，但它们并不严格相等。
• 只有在它们都作为右操作数用于逻辑运算时才会被认为是相等的。
• 此外，由于Infinity是一个特殊的数字类型，因此不能使用typeof运算符来检查其类型。
• 相反，可以使用isFinite函数来检查一个值是否有限制：

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(10) // true

（3）null

null >=0 
// true
 
null <=0 
// true
 
null==undefined
// true 

（4）字符串

• 字符串是比较字符的编码顺序,从前往后 0-9，a-z，A-Z

（5）比较顺序

• 从前往后比较，前面比较的结果再与后面比较 例如：3>2>1 结果为false

4. 逻辑运算符

• &&：逻辑与运算符，当两个操作数都为真时返回真。
• ||：逻辑或运算符，当两个操作数中有一个为真时返回真。
• !：逻辑非运算符，用于取反操作数的值。
• NaN 0 控制符 null undefined为false。非0 非空 非NaN的数字 非空字符串转化成true

注意：一定要注意到底什么时候返回的是布尔值(比较的时候)，什么时候返回的是数据(逻辑运算的时候)

思考题：

!5 && '5'输出结果是____
5

5. 位运算符

• &：按位与运算符。
• |：按位或运算符。
• ^：按位异或运算符。
• ~：按位非运算符。
• <<：左移运算符。
• >>：有符号右移运算符。
• >>>：无符号右移运算符。

6.一元运算符

（1）++a

• 先增加后赋值
• 先增加后赋值，即先将变量的值加一，然后再返回原来的值，并将其赋值给表达式的右侧变量。

var a = 10;
// undefined
 
var res2 = ++a;
// undefined
 
res2
// 12
 
a
// 11

• 当 ++ 在前面时
• 先将变量 a 的值加一得到 11
• 然后返回原来的值 10 并将其赋值给 res2 变量
• 因此 res2 的值为 12

（2）a++

• 先赋值后增加
• 先赋值后增加，即先将变量的值赋给表达式的左侧变量，然后再将变量的值加一。

var a = 10;
// undefined
 
var res1 = a++;
// undefined
 
res1
// 10
 
a
// 11

• 当 ++ 在后面时
• 先将变量 a 的值赋给 res1 变量，得到 10
• 然后将变量 a 的值加一得到 11
• 所以 res1 的值为 10 。

（3）--

• 减一操作符，它可以用于减少变量的值。

let a = 10;
console.log(a); // 输出：10
 
a--;
console.log(a); // 输出：9
 
let b = "hello";
b--;
// NaN
 
console.log(b); 
// NaN

• 首先声明了一个变量 a 并将其设置为 10。
• 然后我们使用 -- 操作符将 a 的值减一，因此 a 的新值为 9。
• 最后，我们将 -- 操作符应用于字符串变量 b，这将导致错误，因为不能从字符串中减去数字。

6. 其他运算符

• ?:：条件（三元）运算符，用于简单的条件判断。

  • 三元运算符是一个条件运算符，它将根据条件的真假来返回两个表达式中的一个。它的一般形式如下：

    condition ? expr1 : expr2

    其中，"condition"是一个逻辑表达式，如果它返回true，则执行并返回expr1，否则执行并返回expr2。

• ,：逗号运算符，用于在表达式中分隔多个表达式，返回最后一个表达式的值。

三、运算优先级

• () -> 一元 -> 算数 -> 比较 -> 逻辑 -> 赋值
• 括号最高
• 一元运算
• 算数运算
• 关系运算
• 相等运算
• 逻辑运算 先&& 再 ||
• 赋值运算