Zi 字媒體

來到 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 那些事兒 待續...