Javascript基礎鞏固系列——運算子+資料型別轉換
阿新 • • 發佈:2020-09-21
全手打原創,轉載請標明出處:https://www.cnblogs.com/dreamsqin/p/13704608.html, 多謝,=。=~(如果對你有幫助的話請幫我點個贊啦)
重新學習JavaScript是因為當年轉前端有點兒趕鴨子上架的意味,我一直在反思我的知識點總是很零散,不能在腦海中形成一個完整的體系,所以這次想通過再次學習將知識點都串聯起來,結合日常開發的專案,達到溫故而知新的效果。與此同時,總結一下我認為很重要但又被我遺漏的知識點~
運算子
加法運算子(+
)
- 可以進行數值相加運算或非數值連線運算,運運算元的不同,導致了不同的語法行為,即“過載”(overload)。
- 如果運運算元是物件,會先轉成原始型別的值(先執行
valueOf()
toString()
,這兩個方法支援自定義),然後再相加。
var obj = { p: 1 };
obj + 2 // "[object Object]2"
- 如果運運算元為
Date
物件的例項,會先執行toString()
。
var obj = new Date();
obj.valueOf = function () { return 1 };
obj.toString = function () { return 'hello' };
obj + 2 // "hello2"
餘數運算子(%
)
- 運算結果的正負號由第一個運運算元的正負號決定。
-1 % 2 // -1 1 % -2 // 1
數值運算子(+
)
- 為一元運算子(加法是二元運算子),可以將任何值轉為數值,與
Number
函式作用相同 ,會返回一個新的值,不會改變原始變數的值。
+true // 1
+[] // 0
+{} // NaN
指數運算子(**
)
- 完成指數運算,前一個運運算元是底數,後一個運運算元是指數,多個指數運算子連用時,先進行最右邊的計算。
2 ** 4 // 16
// 相當於 2 ** (3 ** 2)
2 ** 3 ** 2
// 512
非相等運算子(<
、<=
、>
、>=
)
- 兩個運運算元均為字串時就按照字典順序比較(實際上是比較 Unicode 碼點),任何值(包括
NaN
本身)與NaN
使用非相等運算子進行比較,返回的都是false
1 > NaN // false
1 <= NaN // false
'1' > NaN // false
'1' <= NaN // false
NaN > NaN // false
NaN <= NaN // false
相等運算子(==
、===
)
==
比較兩個值是否相等,如果兩個運運算元非同一型別,會先轉換成同一型別(原始型別的值會轉換成數值,複合型別會先轉換為原始型別,undefined
和null
只有與自身比較,或者互相比較時,才會返回true
,與其他型別的值比較時,結果都為false
)再進行嚴格比較。
'true' == true // false
// 等同於 Number('true') === Number(true)
// 等同於 NaN === 1
[1, 2] == '1,2' // true
undefined == null // true
false == null // false
0 == undefined // false
===
比較兩個值是否為“同一個值”,如果兩個運運算元非同一型別,直接返回false
,NaN
與任何值都不嚴格相等(包括自身),複合型別(物件、陣列、函式)比較它們是否指向同一個地址。
NaN === NaN // false
+0 === -0 // true
{} === {} // false
[] === [] // false
(function () {} === function () {}) // false
取反運算子(!
)
- 對於非布林值,取反運算子會將其轉為布林值。
undefined
、null
、false
、0
、NaN
、空字串''
六個值取反後為true,其他值都為false,兩次取反就是將一個值轉為布林值的簡便寫法。
!54 // false
!'hello' // false
![] // false
!{} // false
!!x
// 等同於
Boolean(x)
且運算子(&&
)
- 如果第一個運運算元的布林值為
true
,則返回第二個運運算元的值(注意是值,不是布林值);如果第一個運運算元的布林值為false
,則直接返回第一個運運算元的值,且不再對第二個運運算元求值(很多人喜歡用這種“短路”替代if
語句,但不利於排錯也看不出目的,應慎用)。
't' && 'f' // "f"
't' && (1 + 2) // 3
var x = 1;
(1 - 1) && ( x += 1) // 0
x // 1
或運算子(||
)
- 如果第一個運運算元的布林值為
true
,則返回第一個運運算元的值,且不再對第二個運運算元求值;如果第一個運運算元的布林值為false
,則返回第二個運運算元的值(常用於為一個變數設定預設值)。
't' || 'f' // "t"
'' || 'f' // "f"
function saveText(text) {
text = text || '';
// ...
}
void運算子(void
)
- 執行一個表示式,然後不返回任何值,或者說返回
undefined
,主要用途是瀏覽器的書籤工具(Bookmarklet),以及在超級連結中插入程式碼防止網頁跳轉。
<!-- 點選連結後會先執行f()但不會跳轉頁面 -->
<a href="javascript: void(f())">文字</a>
<!-- 使用者點選連結提交表單,但是不產生頁面跳轉 -->
<a href="javascript: void(document.form.submit())">
提交
</a>
左結合與右結合
- 在運算子優先順序相同時,JavaScript 語言的大多數運算子是“左結合”,少數運算子是“右結合”,有賦值運算子、三元運算子、指數運算子。
// 相當於w = (x = (y = z));
w = x = y = z;
// 相當於q = a ? b : (c ? d : (e ? f : g));
q = a ? b : c ? d : e ? f : g;
// 相當於2 ** (3 ** 2)
2 ** 3 ** 2
資料型別轉換
Number()
強制轉換
- 將任意型別的值轉化成數值,需要與
parseInt()
區分,Number
函式比parseInt
函式嚴格很多,只要有一個字元無法轉成數值,整個字串就會被轉為NaN,但都會自動過濾字串前後的空格。
parseInt('42 cats') // 42
Number('42 cats') // NaN
parseInt('\t\v\r12.34\n') // 12
Number('\t\v\r12.34\n') // 12.34
- 引數是物件時,將返回
NaN
,除非是包含單個數值的陣列,走的是先呼叫valueOf()
再呼叫toString()
的那套邏輯。
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5
String()
強制轉換
- 可以將任意型別的值轉化成字串,引數如果是物件,返回一個型別字串,如果是陣列,返回該陣列的字串形式,走的是先呼叫
toString()
再呼叫valueOf()
的邏輯。
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"
Boolean()
強制轉換
- 與取反運算子邏輯相同,除了
undefined
、null
、0
、NaN
、空字串''
這五個值的轉換結果為false
,其他的均為true。
Boolean(new Boolean(false)) // true
參考資料
JavaScript 語言入門教程 :https://wangdoc.com/javascript/index.html