我要學會 JS(二):基本運算與結構
來到 JavaScript 系列的第二篇,介紹 JS 在資料型態、運算子和函式跟別人不一樣的地方。
資料型態
在 JS 裡面,基本的資料型態有:string
、number
、boolean
等等。可以透過 typeof
運算子來檢查變數的型態:
const name = 'Noob';
console.log(typeof name); // 輸出 string
還有一個資料型態叫
Symbol
,暫時用不到就是了。
另外有兩個比較特殊的資料型態叫 null
跟 undefined
。一般來說未指定的變數都是 undefined
,例如:
const data = {
zipName: '前鎮區',
status: 4
};
console.log(data.name); // 因為 data 中沒有 name,所以會輸出 undefined
而 null
則是在明確指定為空值(例如 let b = null
)時才會是 null
。
暫時不用去擔心
null
和undefined
比較的問題,在 JavaScript 裡面這些有趣的東西可以額外寫一篇,包括什麼[]+[]
、NaN
、0.1+0.2
的。
如果你真的很有興趣,可以看看這部小短片:wat。
運算子
+
、-
、*
、/
、%
、++
、+=
這些基本運算子就不特別講了,不太熟悉的可以看看 我要學會 C 語言(三):加加減減乘除的變數運算。但這裡要特別講 =
這東西。
首先是跟 C 語言一樣,但可能沒有人特別講過的東西:
let a, b;
a = b = 3;
console.log(a); // 輸出 3
console.log(b); // 輸出 3
可以把 a = b = 3
看作 a = (b = 3)
。雖然不太鼓勵寫這種程式碼,但偶爾看一些別人的開源程式還是會看到這種東西。
再來是比較。在 JS 中有 ==
的比較和 ===
的比較:
const a = '3';
const b = 3;
console.log(a == b); // 輸出 true
console.log(a === b); // 輸出 false,因為不同型態
==
只會比值,而 ===
則會比值和型態。
到這邊你應該就知道怎麼寫 if-else
和 switch
了,和 C 語言都大同小異。
函式(function)
基本函式宣告可以是這樣:
function add(a, b){ // 宣告一個全域的 add 方法
return a + b;
}
console.log(add(3, 5)); // 輸出 8
你也可以這樣寫:
const add = function(a, b){ // 宣告 add 為一個匿名方法
return a + b;
};
console.log(add(3, 5)); // 輸出 8
這邊要特別注意的是 JS function 有個特性叫 hoisting(提升),你可以把 function 放在任何地方,例如下面這段程式碼和上面是相同的:
console.log(add(3, 5));
function add(a, b){
return a + b;
}
然而這段程式碼就會出錯:
console.log(add(3, 5)); // 輸出 ReferenceError: add is not defined
const add = function(a, b){
return a + b;
};
這是因為 JS 會在執行前先幫 function 分配好一個記憶體空間,等實際要執行時再載入。
這時你就會開始思考:說好的直譯式語言由上往下一行一行執行呢 🤔
實際上我們也不鼓勵用 hoisting 的方法,宣告 function 的時候還是照順序寫比較好理解,只是要讓你知道有這種概念。
箭頭函式(fat arrow function)
如果你宣告的是匿名函式,就可以用 =>
來簡寫函式:
const add = (a, b) => {
return a + b;
};
console.log(add(3, 5)); // 輸出 8
要是你的 function 裡面只有一個 return 而沒有其他敘述的話,更可以把 return 和大括號省略掉:
const add = (a, b) => a + b;
console.log(add(3, 5)); // 輸出 8
如果你的 function 只有一個傳入值,可以省略小括號:
const addOne = x => x + 1;
console.log(addOne(3)); // 輸出 4
然而,如果你在 function 裡面沒有用到 this
的話,我倒是鼓勵你多用 arrow function。熟悉這方法,後面寫一些東西會方便許多。
我要學會 JS 目錄
- 我要學會 JS(一):JavaScript 簡介
- 我要學會 JS(二):基本運算與結構
- 我要學會 JS(三):callback、Promise 和 async/await 那些事兒
- 待續...