Javascript-中常用運(yùn)算符

這篇具有很好參考價(jià)值的文章主要介紹了Javascript-中常用運(yùn)算符。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

數(shù)據(jù)類型

常見運(yùn)算

算術(shù)運(yùn)算符

比較運(yùn)算符

邏輯運(yùn)算符

賦值運(yùn)算符

自增/減運(yùn)算符

三目運(yùn)算符

位運(yùn)算符

數(shù)據(jù)類型

在 JS 中有以下兩大類：

基本數(shù)據(jù)類型

數(shù)值類型（Number）

整數(shù) (int)

浮點(diǎn)數(shù)（float）

布爾類型（Boolean），有兩個(gè)值：true 和 false

字符串（String），它可以是單引號(hào)包裹的數(shù)據(jù)，也可以是雙引號(hào)包裹的數(shù)據(jù)。在 JS 推薦使用單號(hào)

空（null），表示不存在

未定義（undefined），表示變量定義了，但是沒(méi)有給它賦值就使用這個(gè)變量。

不是數(shù)字（NaN - Not a Number），判斷是否為數(shù)字，如果不是返回 true，如果是返回 false

引用數(shù)據(jù)類型

數(shù)組（Array），它是用于存儲(chǔ)一組相同類型的數(shù)據(jù)

對(duì)象（Object），在 JS 萬(wàn)物皆對(duì)象

判斷數(shù)據(jù)類型我們?cè)?JS 中是通過(guò)typeof 運(yùn)行符來(lái)實(shí)現(xiàn)的。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>數(shù)據(jù)類型</title>
</head>
<body>
<script>
 ? ?// 1. 定義一個(gè)整數(shù)類型的變量
 ? ?let num = 10
 ? ?console.log(num, typeof num); // 在控制臺(tái)中輸出變量的值以及變量的類型
?
 ? ?// 2. 定義一個(gè)浮點(diǎn)類型的變量
 ? ?let money = 10000.5
 ? ?console.log(money, typeof money);
?
 ? ?// 3. 定義一個(gè)布爾類型的變量
 ? ?let bool = false
 ? ?console.log(bool, typeof bool);
?
 ? ?// 4. 定義一個(gè)字符串類型的變量
 ? ?let str1 = "hello"
 ? ?console.log(str1, typeof str1);
 ? ?let str2 = 'world'
 ? ?console.log(str2, typeof str2);
?
 ? ?// 5. 空值類型，它只有一個(gè)值 null
 ? ?let nullVal = null
 ? ?console.log(nullVal, typeof nullVal);
?
 ? ?// 6. 未定義
 ? ?let age
 ? ?console.log(age, typeof age)
?
 ? ?// 7. 判斷是否為數(shù)字
 ? ?let n = 'a'
 ? ?console.log(isNaN(n), typeof isNaN(n))
</script>
</body>
</html>

常見運(yùn)算

算術(shù)運(yùn)算符

在 JS 算術(shù)運(yùn)算符包含加、減、乘、除、取模等。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>算術(shù)運(yùn)算數(shù)</title>
</head>
<body>
<script>
 ? ?// 數(shù)值類型的算術(shù)運(yùn)算
 ? ?let a = 10
 ? ?let b = 2
 ? ?// 加法運(yùn)算
 ? ?let r = a + b
 ? ?console.log(r);
 ? ?// 減法運(yùn)算
 ? ?r = a - b
 ? ?console.log(r);
 ? ?// 乘法
 ? ?r = a * b
 ? ?console.log(r);
 ? ?// 除法
 ? ?r = a / b
 ? ?console.log(r);
 ? ?// 取模，得到除法的余數(shù)
 ? ?r = a % b
 ? ?console.log(r);
 ? ?// 冪運(yùn)算
 ? ?r = a ** b
 ? ?console.log(r)
?
 ? ?console.log('-----------------------------')
?
 ? ?// 布爾類型的算術(shù)運(yùn)算
 ? ?let b1 = true
 ? ?let b2 = true
 ? ?r = b1 + b2
 ? ?console.log(r) ?// 當(dāng)兩個(gè)布爾值進(jìn)行加法運(yùn)算時(shí)，會(huì)把 true 變?yōu)?1，false 變?yōu)?0 后再作運(yùn)算
 ? ?r = b1 - b2
 ? ?console.log(r)
 ? ?r = b1 / b2
 ? ?console.log(r)
 ? ?r = b1 * b2
 ? ?console.log(r)
?
 ? ?// 字符串的算術(shù)運(yùn)算
 ? ?let s1 = '30'
 ? ?let s2 = '20'
 ? ?r = s1 + s2
 ? ?console.log(r) ? // 字符串作加法操作其實(shí)就是進(jìn)行字符串拼接操作
 ? ?r = s1 - s2
 ? ?console.log(r, typeof r) ?// 當(dāng)字符串作減法操作時(shí)，它會(huì)看這個(gè)字符串能不能轉(zhuǎn)換為數(shù)字，如果能則轉(zhuǎn)換后再計(jì)算，如果不能則輸出 NaN
 ? ?r = s1 * s2
 ? ?console.log(r, typeof r) // 當(dāng)字符串作乘法時(shí)，也會(huì)先看這個(gè)字符串能不能轉(zhuǎn)換為數(shù)字，如果能則按數(shù)值進(jìn)行計(jì)算，否則輸出 NaN
?
 ? ?console.log('-----------------------------')
?
 ? ?// 空值
 ? ?let n1 = null
 ? ?let n2 = null
 ? ?r = n1 + n2
 ? ?console.log(r, typeof r)
?
 ? ?let n3 = 5
 ? ?r = n1 + n3
 ? ?console.log(r, typeof r) ?// 當(dāng)空值進(jìn)行算術(shù)運(yùn)算時(shí)，它會(huì)轉(zhuǎn)換為數(shù)值 0，然后再作計(jì)算
?
 ? ?// 未定義
 ? ?let un1 = undefined
 ? ?let un2 = undefined
 ? ?r = un1 + un2
 ? ?console.log(r) ? // 未定義類型不能進(jìn)行算術(shù)運(yùn)算
</script>
</body>
</html>

比較運(yùn)算符

比較運(yùn)算也中關(guān)系運(yùn)算。它是用于比較兩個(gè)數(shù)之間的大小，結(jié)果為一個(gè)布爾類型的值。比較運(yùn)算符包含：大于（>）、小于（<）、等于（==）、大于等于（>=）、小于等于（<=）、不等于（!=）、全等于（===）。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>比較運(yùn)算符</title>
</head>
<body>
<script>
 ? ?let n1 = 10
 ? ?let n2 = 20
 ? ?r = n1 > n2
 ? ?console.log(r, typeof r)
 ? ?r = n1 < n2
 ? ?console.log(r, typeof r)
 ? ?r = n1 >= n2
 ? ?console.log(r, typeof r)
 ? ?r = n1 <= n2
 ? ?console.log(r, typeof r)
 ? ?r = n1 == n2
 ? ?console.log(r, typeof r)
 ? ?r = n1 != n2
 ? ?console.log(r, typeof r)
 ? ?console.log('-------------------------------')
 ? ?let n3 = 5
 ? ?let n4 = 5
 ? ?let n5 = '5'
 ? ?r = n3 == n4
 ? ?console.log(r)
 ? ?r = n3 === n4
 ? ?console.log(r)
?
 ? ?r = n3 == n5 ?// 使用 == 等號(hào)的方式來(lái)進(jìn)行比較時(shí)，是比較的兩個(gè)變量轉(zhuǎn)換為數(shù)值類型后的值的大小。
 ? ?console.log(r)
 ? ?r = n3 === n5 // 使用 === 等號(hào)的方式進(jìn)行比較時(shí)，比較的是值的大小以及它的類型是否相同。只兩者都相同才為 true，否則為 false
 ? ?console.log(r)
?
 ? ?console.log('-----------------------------')
?
 ? ?//----------布爾類型的比較運(yùn)算---------------------
 ? ?let b1 = true
 ? ?let b2 = false
 ? ?r = b1 === b2
 ? ?console.log(r) ? ?// 使用布爾值來(lái)做比較運(yùn)算是沒(méi)有意義的，因?yàn)楸容^運(yùn)算的結(jié)果本身就是布爾類型的值。
?
 ? ?console.log('-----------------------------')
?
 ? ?let s1 = 'hello'
 ? ?let s2 = 'hallo'
 ? ?s1 = '100'
 ? ?s2 = '10'
 ? ?s1 = 'World'
 ? ?s2 = 'world'
 ? ?r = s1 === s2
 ? ?r = s1 > s2
 ? ?console.log(r)
</script>
</body>
</html>

邏輯運(yùn)算符

邏輯運(yùn)算符主要是指多個(gè)條件之間的關(guān)聯(lián)關(guān)系，邏輯運(yùn)算符有：與（&&）、或（||）以及非（!）這三種

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>邏輯運(yùn)算符</title>
</head>
<body>
<script>
 ? ?let n1 = 5
 ? ?let n2 = 6
 ? ?let b1 = true
 ? ?let b2 = false
?
 ? ?let r = n1 && n2 && b1
 ? ?console.log(r, typeof r) // 使用與運(yùn)算時(shí)，只有全部都是 true ，結(jié)果才是 true，否則結(jié)果為 false
?
 ? ?r = n1 > n2 || b1 || b2
 ? ?console.log(r) ? // 使用或運(yùn)算時(shí)，只有全部為 false，結(jié)果才是 false，否則結(jié)果為 true
?
 ? ?r = !b1
 ? ?console.log(r)
 ? ?r = !b2
 ? ?console.log(r) ?// 使用非運(yùn)算時(shí)，如果本身為 true 則結(jié)果為 false，如果本身為 false 則結(jié)果為 true，即取反
?
 ? ?r = n1 < n2 & b2
 ? ?console.log(r)
 ? ?r = b1 & b2
 ? ?console.log(r)
 ? ?r = b1 | b2
 ? ?console.log(r)
</script>
</body>
</html>

在邏輯運(yùn)算符中，也可以使用 & 號(hào)來(lái)表示與運(yùn)算，使用 | 符號(hào)來(lái)表示或運(yùn)算。它們與 && 以及 || 是有區(qū)別的。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>邏輯運(yùn)算符的區(qū)別</title>
</head>
<body>
<script>
 ? ?let a = 5
 ? ?let b = 0
 ? ?let bool = false
 ? ?//r = bool && a / b
 ? ?r = bool || a / b
 ? ?console.log(r) ? // && 是具有短路效果的。|| 也是具有短路效果的
</script>
</body>
</html>

賦值運(yùn)算符

在 JS 中賦值運(yùn)算符有以下幾種：

=：將它這符號(hào)右邊的值賦給這個(gè)符號(hào)左邊的變量
+=：把符號(hào)右邊的值與這個(gè)變量之前的值相加后再賦給這個(gè)變量
-=：把符號(hào)右邊的值與這個(gè)變量之前的值相減后再賦給這個(gè)變量
*=：把符號(hào)右邊的值與這個(gè)變量之前的值相乘后再賦給這個(gè)變量
/=：把符號(hào)右邊的值與這個(gè)變量之前的值相除后再賦給這個(gè)變量
%=：把符號(hào)右邊的值與這個(gè)變量之前的值取模后再賦給這個(gè)變量
**=：把符號(hào)右邊的值與這個(gè)變量之前的值冪運(yùn)算后再賦給這個(gè)變量

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>賦值運(yùn)算符</title>
</head>
<body>
<pre>
 =：將它這符號(hào)右邊的值賦給這個(gè)符號(hào)左邊的變量
 +=：把符號(hào)右邊的值與這個(gè)變量之前的值相加后再賦給這個(gè)變量
 -=：把符號(hào)右邊的值與這個(gè)變量之前的值相減后再賦給這個(gè)變量
 *=：把符號(hào)右邊的值與這個(gè)變量之前的值相乘后再賦給這個(gè)變量
 /=：把符號(hào)右邊的值與這個(gè)變量之前的值相除后再賦給這個(gè)變量
 %=：把符號(hào)右邊的值與這個(gè)變量之前的值取模后再賦給這個(gè)變量
 **=：把符號(hào)右邊的值與這個(gè)變量之前的值冪運(yùn)算后再賦給這個(gè)變量
 ?</pre>
?
<script>
 ? ?let a = 10 ? // 使用 = 進(jìn)行賦值運(yùn)算，它是將等號(hào)右邊的值賦給等號(hào)左邊的變量
 ? ?console.log(a)
?
 ? ?a += 10 ?// 它等價(jià)于 a = a + 10
 ? ?console.log(a)
?
 ? ?a -= 10 ? // 它等價(jià)于 a = a - 10
 ? ?console.log(a)
?
 ? ?a *= 10 ? // 它等價(jià)于 a = a * 10
 ? ?console.log(a)
?
 ? ?a /= 10 ? // 它等價(jià)于 a = a / 10
 ? ?console.log(a)
?
 ? ?a %= 10 ?// 它等價(jià)于 a = a % 10
 ? ?console.log(a)
?
 ? ?a **= 10 ?// 它等價(jià)于 a = a ** 10 即 0 的 10 次方
 ? ?console.log(a)
</script>
</body>
</html>

自增/減運(yùn)算符

嚴(yán)格來(lái)說(shuō)，它是屬于算術(shù)運(yùn)算符中，我們?cè)谶@里把單獨(dú)拿出來(lái)進(jìn)行講。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>自增自減運(yùn)算符</title>
</head>
<body>
<script>
 ? ?let a = 20
 ? ?console.log(a)
 ? ?//a = a + 1
 ? ?//a += 1
 ? ?//a++ ? ? ? ? ? ? // 這就是自增，它是在原來(lái)值的基礎(chǔ)上加 1
 ? ?++a
 ? ?console.log(a)
?
 ? ?//a -= 1
 ? ?//a-- ? ? ? ? // 這就是自減，它是在原來(lái)值的基礎(chǔ)上減 1
 ? ?--a
 ? ?console.log(a)
</script>
</body>
</html>

問(wèn)題：a++ 和 ++a 有什么區(qū)別？

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>自增兩種寫法的區(qū)別</title>
</head>
<body>
<script>
 ? ?let a = 10
 ? ?let b = a++ + ++a + a++ + ++a
 ? ?console.log(b, a) ? // 50  48
</script>
</body>
</html>

根據(jù)上面的代碼運(yùn)行的結(jié)果以及分析的過(guò)程，我們發(fā)現(xiàn)：++ 后是先使用它的值，然后自己再加 1，而 ++ 在前是先自己加 1 后，再把結(jié)果進(jìn)行相加。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>自增兩種寫法的區(qū)別</title>
</head>
<body>
<script>
 ? ?let a = 10
 ? ?//let b = a++ + ++a + a++ + ++a
 ? ?//console.log(b, a) ? // 48  14
?
 ? ?let b = ++a - a-- + --a + a++ - a--
 ? ?//  b = 11  - 11  + 9 ? + 9  - 10
 ? ?// ? ? a=11  a=10 ? a=9  a=10  a=9
 ? ?console.log(b, a) ? // 8 9
</script>
</body>
</html>

總結(jié)：++在前是先自增再運(yùn)算，++在后是先運(yùn)算再自增。

三目運(yùn)算符

三目運(yùn)算符出現(xiàn)的目的是為了簡(jiǎn)化 if 語(yǔ)句。它的語(yǔ)法格式為：變量 = 表達(dá)式 ? 值1 : 值2。當(dāng)表達(dá)為 true 時(shí)，取值1，否則取值2。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>三目運(yùn)算符</title>
</head>
<body>
<script>
 ?let a = 100
 ?let b = 15
 ?let c ?= a > b ? 'a大于b' : 'a小于b'
 ?console.log(c)
</script>
</body>
</html>

位運(yùn)算符

位運(yùn)算符會(huì)涉及到二進(jìn)制的計(jì)算，會(huì)有補(bǔ)碼、原碼、反碼。位運(yùn)算符有 & 、| 、^ 、<< 、>> 以及 >>>文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-820998.html

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>位運(yùn)算符</title>
</head>
<body>
<script>
 ? ?let a = 5
 ? ?let b = 6
?
 ? ?//let c = a & b  // 4
 ? ?//let c = a | b  // 7
 ? ?//let c = a ^ b ? // 3
 ? ?//let c = a << 2 ? // 20
 ? ?let c = a >> 2 ? // 1
 ? ?console.log(c)
</script>
</body>
</html>

到了這里，關(guān)于Javascript-中常用運(yùn)算符的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！