一篇文章帶你了解JavaScript布爾值
一個JavaScript Boolean類型代表一個值:true或false。
一、Boolean 值
很多時候,在編程中,需要一個只能有兩個值的數據類型,像:YES / NO 或者 ON / OFF 或者 TRUE / FALSE。
為此,JavaScript有布爾數據類型。它只能取值為真或假。
二、Boolean() 函數
能使用 Boolean() 函數來查找表達式(或變量)是否為真:
Boolean(10 > 9) // returns true
或者更容易的:
(10 > 9) // also returns true
10 > 9 // also returns true
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p>顯示布爾值:(10 >9):</p>
<button onclick="myFunction()">試試</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Boolean(10 > 9);
}
</script>
</body>
</html>
三、比較和條件
JS比較全面的比較運算符 ,JS比較全面的條件語句。
操作符 | 描述 | 實例 |
== | 等于 | if (day == "Monday") |
> | 大于 | if (salary > 9000) |
< | 小于 | if (age < 18) |
一個表達式的布爾值為JavaScript比較條件的基礎。
1. 有“真實”價值的一切都是真的。
<script>
var b1 = Boolean(100);
var b2 = Boolean(3.14);
var b3 = Boolean(-15);
var b4 = Boolean("Hello");
var b5 = Boolean('false');
var b6 = Boolean(1 + 7 + 3.14);
document.getElementById("demo").innerHTML =
"100 is " + b1 + "<br>" +
"3.14 is " + b2 + "<br>" +
"-15 is " + b3 + "<br>" +
"任意(非空)字符串是 " + b4 + "<br>" +
"'false' 字符串是 " + b5 + "<br>" +
"任意表達式 (非零)是 " + b6;
</script>
2. 沒有“真實”的一切都是假的。
布爾值 0 是 false。
var x = 0;
Boolean(x); // returns false
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p>顯示0的布爾值:</p>
<button onclick="myFunction()">試試</button>
<p id="demo"></p>
/*下面案例,替換相對于的js,實現不同的效果展示*/
<script>
function myFunction() {
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
布爾值 -0 是 false。
<script>
function myFunction() {
var x = -0;
document.getElementById("demo").innerHTML = Boolean(x); // returns false
}
</script>
空字符串""是 false。
<script>
function myFunction() {
var x;
document.getElementById("demo").innerHTML = Boolean(x);// returns false
}
</script>
null的布爾值是 false。
<script>
function myFunction() {
var x = null;
document.getElementById("demo").innerHTML = Boolean(x);// returns false
}
</script>
false 的布爾值是false。
<script>
function myFunction() {
var x = false;
document.getElementById("demo").innerHTML = Boolean(x);// returns false
}
</script>
NaN 的布爾值是 false。
<script>
function myFunction() {
var x = 10 / "H";
document.getElementById("demo").innerHTML = Boolean(x);// returns false
}
</script>
四、布爾值可以是對象
通常JavaScript使用布爾的字面量創建: var x = false。
布爾值,也可以使用new關鍵字創建新對象: var y = new Boolean(false)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p>不要創建一個布爾對象.</p>
<p>布爾值和對象不能被安全的比較.</p>
<p id="demo"></p>
<script>
var x = false; // x is a boolean
var y = new Boolean(false); // y is an object
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>
不要創建布爾對象。它減慢執行速度。new關鍵字使代碼復雜化。這會產生一些意想不到的結果。
當使用= =運算符,相等的布爾值是相等的:
var x = false;
var y = new Boolean(false);
// (x == y) is true because x and y have equal values
當使用===運算符,相等的布爾值不相等,因為===運算符將比較類型和值。
var x = false;
var y = new Boolean(false);
// (x === y) is false because x and y have different types
甚至更糟。對象不能比較。
var x = new Boolean(false);
var y = new Boolean(false);
// (x == y) is false because objects cannot be compared
運行結果:
比較兩個JavaScript對象將始終返回false。
五、總結
本文基于JavaScript ,介紹了布爾函數在實際應用中需要注意的點,對Boolean運算符的比較和條件 進行了分點的講解。布爾值也可以是對象。
希望讀者能夠根據本文的案例,自己去嘗試實際操作一下,有時候看到別人實現起來很簡單,但是到自己動手實現的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,才可以理解的更加深刻。
文章希望能夠幫助你更好的理解 和學習。