讀書筆記(06) - 語法基礎 - JavaScript高級程序設計

寫在開頭

本篇是小紅書筆記的第六篇，也許你會奇怪第六篇筆記才寫語法基礎，筆者是不是穿越了。

答案當然是沒有，筆者在此分享自己的閱讀心得，不少人翻書都是從頭開始，結果永遠就只在前幾章。
對此，筆者換了隨機閱讀的方式，哪章感興趣了或者想補知識點，再去翻閱對應的章節。當然目錄還是要翻的。

工作生活節奏太快，知識太多，時間與知識的增長成反比，求全不如求專，也許不能看完全書，但至少掌握所需知識點。

---

思維導圖是個好東西，一圖流。

語法

標識符

1. 由字母，下劃線_，美元符號$，數字組成
2. 第一個字符不能是數字
3. 注意不要使用關鍵字作標識符
4. 對象屬性[]號寫法可不遵循標識符規則 obj[123] = 123

數據類型

數據類型共有10個，ES5有7個，3個爲ES6新增

number/boolean/string/undefined/object/null/function/symbol/set/map

1. 判斷類型可用typeof
2. 判斷對象爲何種引用類型可用instanceof

undefined與null

1. undefined (使用var聲明但未初始化)
2. null (空對象指針)

undefined == null // true

NaN

NaN表示本來應返回一個數值，結果未正確返回

1. NaN不等於任何值，且不等於自身
2. 用isNaN()可判斷是否爲NaN

數值轉換

Number() 轉型函數

參數值	結果
true	1
false	0
null	0
undefined	NaN
''	0
'168'	168
'168hello'	NaN
'hello'	NaN

TIPS：參數值爲一個對象，則先調用valueOf(), 沒有再調用toString(), 然後遵循上述規則

parseInt()

1. 第一個參數爲轉換的值
2. 第二個參數爲轉換的進制
3. 會嘗試解析字符串前面的數字（不同於Number())

parseInt('168hello') -> 168

parseFloat()

1. 第一個小數點有效，忽略後面小數點的解析
2. 會嘗試解析字符串前面的數字
3. 忽略前導0，只支持10進制，沒有第二個參數 (不同於parseInt())

parseFloat('520.13.14') -> 520.14

字符串轉換

toString() 方法

1. 大多數數據類型擁有toString()方法，可在參數中指定轉換進制
2. null/undefined 沒有toString()方法

String() 轉型函數

1. 如果參數值有toString()方法，則調用toString()方法
2. null 轉爲 "null"
3. undefined 轉爲 "undefined"

函數 function

1. 不支持重載
2. 後定義的函數會覆蓋之前
3. 參數數組對象：arguments

語句

1. if...else...
2. do...while... 後測試循環，不同於while/for前測試循環
3. while
4. for
5. for...in... 遍歷對象屬性
6. label 與 break/continue 合用
7. switch...case... case 全等判斷
8. with 將代碼作用域設置到特定的對象中

switch...case

1. case 判斷時是全等判斷，不會進行類型轉換
2. case 值不一定是常量，可以是變量，甚至是表達式

case 'hello' + 'word';
case num < 10;

label

label語句允許在代碼中添加標籤，label與break/continue聯合使用，可返回代碼指定位置

var num = 0;

outermost:
for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
        if ( i== 5 && j == 5) {
            break outermost;    
            // 退出循環（因爲outermost定義的位置在最外層)
            // 普通的break只能跳出一層循環
        }
    }
}

with

with語句的作用是將代碼的作用域設置到一個特定的對象

// window.location 對象爲例子
with(location) {
    var url = href; // location.href
}

操作符

1. 一元操作符
2. 布爾運算符
3. 算數運算符
4. 關係運算符
5. 條件運算符
6. 賦值預算符
7. 逗號運算符

一元操作

一元操作符指的是隻能操作一個值的操作符

1. 遞增++
2. 遞減--
3. 後置：語句被求值後執行自身賦值

var a = 2;
var b = 20;
var c = a-- + 20;   // 後置運算 c: 22, a: 1

布爾運算符

邏輯非!

!! 功能等於 Boolean() 轉型函數

邏輯與 &&

1. 第一參數是對象，返回第二個參數
2. 第一個參數爲null/NaN/undefined, 則直接返回第一個參數

邏輯或 ||

規則與邏輯與相同，不同的是隻要第一個參數成立則不會進行後續運算

TIPS：邏輯與或都屬於短路運算，並不一定返回true/false，參數未聲明可能會報錯或賦值不成功

算數運算符

+, -, *, /, % 

關係運算符

<, >, <=, >=, ==, ===, !=, !===

1. 兩個參數都是數值，進行值比較
2. 兩個參數都是字符串，進行字符編碼比較（大寫字母的字符編碼小於小寫字母)
3. 一個參數是數值，則轉爲數值比較
4. 一個參數是對象，則先調用其valueOf()，沒有valueOf()再調用toString()
5. === 全等會進行值與類型的比較
6. null == undefined // true

條件運算符

三元表達式

var score = 90;
var achie = score > 90 ? '優秀' : '再接再厲';

逗號操作符

逗號操作符可以在一條語句執行多個操作，常用於變量初始化

TIPS: 用於賦值時，逗號操作符會返回表達式最後一項的值

var name = 'KenTsang', age = 28, job = 'Developer';

---

詳解逗號表達式，可移步筆者的文章:《一道JS面試題引發的血案》。

if-else/switch-case/?:/&&/||可移步筆者的文章: 《JS中 if/ if...else替換方式》

---

參考文檔

• 《JavaScript高級程序設計》

作者：以樂之名
本文原創，有不當的地方歡迎指出。轉載請指明出處。