当前位置：首页 > news >正文

【JavaScript】相等运算符、条件运算符

news 来源：原创 2025/4/29 10:27:52

1、相等运算符

（1）==（相等）

相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln(1 == 1);document.writeln("<br>");document.writeln(1 == 5);</script>
</head><body></body></html>

结果：

注意：当使用来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型（不一定转换为数字，大部分情况下转换为数字），然后再比较

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln("1" == 1);</script>
</head><body></body></html>

结果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln(true == '1');document.writeln("<br>");document.writeln(null == 0);//没有将null转换为数值类型</script>
</head><body></body></html>

结果：

注意：undefined衍生自null,所以这两个值做相等判断时，会返回true。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln(undefined == null);</script>
</head><body></body></html>

结果：

注意：NaN不和任何值相等，包括它本身

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln(NaN == NaN);document.writeln("<br>");document.writeln(NaN == "12");</script>
</head><body></body></html>

结果：

判断一个值是不是NaN的函数：isNaN(),如果该值是NaN，则返回true，否则返回false

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = NaN;document.writeln(isNaN(ch));</script>
</head><body></body></html>

结果：

（2）！=（不等于）

不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln(122 != 12);document.writeln("<br>");document.writeln("abc" != "abc");</script>
</head><body></body></html>

结果：

注意：不相等也会对变量进行自动的类型转换，如果转换后相等它会返回false

（3）===（全等）

全等用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回false。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln("123" == 123);document.writeln("<br>");document.writeln("123" === 123);</script>
</head><body></body></html>

结果：

（4）！==（不全等）

不全等用来判断两个值是否不全等，它和不相等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回true。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.writeln("123" != 123);document.writeln("<br>");document.writeln("123" !== 123);</script>
</head><body></body></html>

结果：

2、条件运算符（即：三元运算符）

语法：条件表达式？语句1：语句2；

执行的流程：

条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回执行结果，如果该值为false，则执行语句2，并返回执行结果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>true ? alert("语句1") : alert("语句2");</script>
</head><body></body></html>

结果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>false ? alert("语句1") : alert("语句2");</script>
</head><body></body></html>

结果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a = 20;var b = 45;//获取a、b中的最大值var max = a > b ? a : b;document.writeln("max=" + max);</script>
</head><body></body></html>

结果；

注意：如果条件表达式的求值结果是一个非布尔值，会将其转换为布尔值然后再运算。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>"heello" ? alert("语句1") : alert("语句2");//"heello"转化为布尔值后为：true</script>
</head><body></body></html>

结果：