我要學會 JS(二):基本運算與結構

來到 JavaScript 系列的第二篇,介紹 JS 在資料型態、運算子和函式跟別人不一樣的地方。

資料型態

在 JS 裡面,基本的資料型態有:stringnumberboolean 等等。可以透過 typeof 運算子來檢查變數的型態:

const name = 'Noob';
console.log(typeof name); // 輸出 string

還有一個資料型態叫 Symbol,暫時用不到就是了。

另外有兩個比較特殊的資料型態叫 nullundefined。一般來說未指定的變數都是 undefined,例如:

const data = {
    zipName: '前鎮區',
    status: 4
};

console.log(data.name); // 因為 data 中沒有 name,所以會輸出 undefined

null 則是在明確指定為空值(例如 let b = null)時才會是 null

暫時不用去擔心 nullundefined 比較的問題,在 JavaScript 裡面這些有趣的東西可以額外寫一篇,包括什麼 []+[]NaN0.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-elseswitch 了,和 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 目錄