JavaScript 基礎入門

簡單介紹 JavaScript 的基礎及重要概念

Transcript

1. JavaScript ≠ Java 因為熱狗不是狗 JS Brian 2019/09/12
2. 型別  原始型別  number  string  boolean  null  undefined  物件型別  Number  String  Boolean 可以使用 typeof 判斷型別 JS var a = 1; console.log(typeof a); // var b = new Number(1); console.log(typeof b); //
3. undefined & null  undefined 是指已經宣告但沒有賦予任何值  null 是「沒有值」的值，須由開發者自行定義  undefined 不能使用在 JSON 資料格式中  兩個都是原始型別  undefined 的 typeof 是 undefined  null 的 typeof 是 object  這是 JS 一開始設計時的錯誤  參考: http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.3  兩個都是 falsy  Boolean(undefined) // false  Boolean(null) // false console.log(undefined == null); console.log(undefined === null); 猜猜看 JS
4. 傳值 or 傳址?  原始型別是傳值  物件型別是傳址 var a = 'Brian'; var b = 'Brian'; var c = 'Mike'; console.log( a === b ); // true console.log( a === c ); // false var obj1 = { value: 10 }; var obj2 = { value: 10 }; console.log(obj1 === obj2); //false JS
5. 傳值 or 傳址? Pass by sharing var coin1 = { value: 10 }; function changeValue(obj) { obj = { value: 123 }; } changeValue(coin1); console.log(coin1); // 此時 coin1 仍是 { value: 10 } JS var coin1 = { value: 10 }; function changeValue(obj) { // 僅更新 obj.value，並未重新賦值 obj.value = 123; } changeValue(coin1); console.log(coin1); // 此時 coin1 則會變成 { value: 123 }  「Pass by sharing」的特點在 於，當 function 的參數，如 function changeValue(obj){ ... } 中 的 obj 被重新賦值的時候，外 部變數的內容是不會被影響的  如果不是重新賦值的情況，則 又會回到大家所熟悉的狀況
6. Turthy & falsy == (negated: !=)
7. Turthy & falsy === (negated: !==)
8. Function function run() { console.log(arguments.length); console.log(arguments[0] + arguments[1]); } run (10, 20, 30); function run(a, b) { console.log(a + b ); } run (10, 20, 30); 也可以透過 arguments 傳入參數 JS
9. IIFE (立即執行函式) (function () { var a = 10, b = 20; console.log(a + b); })();  優點  減少全域變數  變數區域化 (function (window, document) { // code })(window, document); 可傳入全域變數到立即函式內 var a = 10, b = 20; (function () { console.log(a + b); })(); var a = 10, b = 20; (function (x, y) { console.log(x + y); })(a, b); VS.  用途  可立即執行，適合用只執行一次 的程式碼，例如初始化的動作 JS
10. Scope chain (範圍鏈)  每個變數都有其作用區域的範圍，若使用前沒有使用 var 宣告，就會自動變成全域變數  若變數是在 function 內宣告，則它只能在這個區域內使用  JavaScript 變數有效範圍的最小單位是以 function 做分界的 var a = 1; (function(){ console.log(a); // })(); var a = 1; (function(){ var a = 100; console.log(a); // })(); console.log(a); // var a = 1; (function(){ a = 100; console.log(a); // })(); console.log(a); // var a = 1; (function(a){ a = 100; console.log(a); // })(a); console.log(a); // JS
11. Hoisting (提升)  把變數提升到「所屬區域內」最頂端的行為 JS var x = 5; (function(){ console.log(x); var x = 10; })(); console.log(x); var x = 5; (function(){ var x; console.log(x); x = 10; })(); console.log(x); var a = 1; function hoisting(){ if(!a) { var a = 2; } console.log(a); }; hoisting(); var a = 1; function hoisting(){ var a; if(!a) { a = 2; } console.log(a); }; hoisting();
12. 減少全域變數的方式  IIFE (立即執行函式)  Closure (閉包)  宣告統一管理的變數容器 JS var me = {}; me.name = 'Brian'; me.gender = 'male';
13. finally JS function run(){ try { console.log('try'); } catch (error) { console.log('catch'); } finally { console.log('finally'); } } run(); function run(){ try { return 'try'; } catch (error) { console.log('catch'); } finally { console.log('finally'); } } console.log(run()); 會先執行 finally 再回傳 try
14. switch JS switch (1) { case 1: console.log(1); break; case 2: console.log(2); break; default: console.log('other'); break; } var a = 5; switch (true) { case a < 5: console.log('a < 5'); break; case a >= 5: console.log('a >= 5'); break; default: console.log('other'); break; } case 可以帶入變數  break 千萬不能少
15. 善用 Array methods  https://developer.mozilla.org/zh- TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map JS
16. Closure (閉包) JS function outer() { var msg = 'Message for inner function.'; function inner() { return msg; } return inner; } var a = outer(); a();  避免資訊揭露  減少全域變數
17. Closure (閉包)  閉包使用的經典範例: 計時器 for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 1000) } 你可能是這樣想，但是… JS for (var i = 0; i < 5; i++) { (function (i) { setTimeout(function () { console.log(i); }, 1000 * i) })(i); } 透過 IIFE + 閉包
18. 變數命名風格  myObject  一般變數 (駝峰式命名)  MyObject  類別 (巴斯卡命名)  MY_OBJECT  常數 (全大寫命名)  _myObject  私有變數 (底線開頭命名)  _myObject_  系統內部使用 (雙底線命名) JS
19. 浮點運算  JavaScript 遵循 IEEE754 的規範，數字是以二進位進行運算，再轉成十 進位顯示，所以有些小數轉成二進位會造成無限循環  解法:  toFixed  使用相關套件 math.js 、 Numera.js console.log((0.1 + 0.2) === 0.3); // JS console.log(parseFloat((0.1 + 0.2).toFixed(15)) === 0.3); //
20. i++ VS. ++i  i++ 是先顯示變數後再進行累加  ++i 是先累加後再顯示變數的值 var i = 5; console.log(i++); console.log(i); var i = 5; console.log(++i); console.log(i); JS
21. 類別物件 JS // 建構類別 function PERSON_OBJECT(name, gender, country){ this.name = name; this.gender = gender; this.country = country; this.run = function () { console.log(`Name: ${this.name}, Gender: ${this.gender}, Country: ${this.country}`); } } // 宣告類別物件 var person = new PERSON_OBJECT('Brian', 'Male', 'Taiwan'); // 跑起來! person.run();
22. 類別物件  使用 prototype 優化類別的 function，可減少記憶體占用 // 建構類別 function PERSON_OBJECT(name, gender, country){ this.name = name; this.gender = gender; this.country = country; } PERSON_OBJECT.prototype.run = function() { console.log(`Name: ${this.name}, Gender: ${this.gender}, Country: ${this.country}`); } // 宣告類別物件 var person = new PERSON_OBJECT('Brian', 'Male', 'Taiwan'); // 跑起來! person.run(); JS
23. 推薦資源  Udemy 免費課程  重新認識 JavaScript (2018 iT 邦幫忙鐵人賽系列文)  MDN web docs  JavaScript.tw on FB JS