JavaScript 開發實戰：核心概念篇 (全新 ES6 改版) - 高雄場 - 課程筆記與分享

前言

這一篇主要稍微紀錄一下高雄場的保哥 JavaScript 一些滿有趣的課程筆記。

課程介紹

首先先感謝公司付錢讓我去上保哥的「《高雄》JavaScript 開發實戰：核心概念篇 (全新 ES6 改版)」XD

本次保哥主要的課程大綱是以下

• JavaScript 核心部分
  • 物件、變數與型別詳解
  • 理解 var, let, const 的觀念差異
  • 詳細介紹 JS 原始型別與物件型別
  • 資料型別轉換陷阱與技巧
• JavaScript 物件概念
  • JavaScript 物件資料結構
  • 根物件的觀念 (全域變數與區域變數)
  • 徹底了解函式物件與使用技巧
  • 箭頭函式 (Arrow Functions) 與 this
  • 預設參數 (Default Parameters) 的應用技巧
  • 了解 閉包 (Closure) 與 範圍鏈 (Scope chain) 的關係
  • 常見 JavaScript 設計模式
• 更多 ES2015 全新語言特性
  • Templates Literals
  • Spread Operator
  • Destructuring
  • Classes
  • Getters/Setters
  • Modules

那由於課程簡報是不能公開分享的，所以這邊就直接寫心得，並且部分我不會解釋得很清楚，主要是因為我很推薦你直接去上保哥的實體課程。

陣列

首先先來講講陣列，以往我們一個正常的陣列是這樣寫

var a = [];

當我們想新增陣列進去可能就直接使用 push() 或者是乾脆直接寫進去

var a = [1, 2, 3];

// 或者是使用 push

var a = [];
a.push(1);
a.push(2);
a.push(3);

那以上這比較基本的陣列新增以及陣列撰寫方式，那取值呢？取值我們除了可以使用點運算子之外，也可以使用中括號，那這邊有一件事情就滿好玩的，假使來講有一個空的陣列，但若我要取得第 99 個陣列位置並賦予值呢？這時候會發生什麼事情？

這邊請注意是一個空的陣列。

var a = [];
a[99] = 1;
console.log(a);

點我看解答(請認真思考後再看解答)

結果會是 [empty × 99, 1]

原因是因為 JavaScript 會為了讓你在長度 99 可以填入值，因此就會預先塞入一推空白。

混淆工具

接下來滿有趣的東西是 JavaScript 的混淆工具，關於混淆工具網路上就滿多的，但是其實還是一個 JavaScript，舉例來講，你可以到 jsfuck.com這個網站去試著輸入 alert('Hello') 看看底下的東西會是什麼 XD

但這個東西實際開發上並不會用，只是可以說明 JS 是真的很詭異，連這種東西都可以運作。

var

關於 var 其實也有一些滿好玩的地方，JavaScript 在宣告一個變數之後，若沒有賦予值是會預設給予 undefined，但是！

如果你賦予值之後又重新宣告會發生什麼事情？

var a;
a; // undefined
a = 5;
typeof a; // number
var a;
typeof a; // ??

點我看解答(請認真思考後再看解答)

結果會是 number 並不會是 undefined，其主要原因是因為 JavaScript 並不會因為你的重新宣告而覆蓋原有的值，除非你宣告時同時重新賦予值

var a;
a; // undefined
a = 5;
typeof a; // number
var a = 'Ray';
typeof a; // string

JavaScript 本身就是指標概念

這一個其實我會傾向直接去上保哥的課，所以我就不爆雷惹~

原始型別是無法擴充或擁有屬性

原始型別本身是無法自由擴充屬性，因此它不允許擁有屬性

但這邊因為原始型別因為是包裹物件的關係，因此會繼承原有的包裹物件方法

儘管透過包裹物件，也無法修改原始型別的屬性

var a = 1;
typeof a;
a.name = 'Ray';
console.log(a.name); // ??

Number.prototype.name = 'Ray';
console.log(a.name); // ??


delete a.name; // return true;
console.log(a.name); // ??

點我看解答(請認真思考後再看解答)

var a = 1;
typeof a;
a.name = 'Ray';
console.log(a.name); // undefined

Number.prototype.name = 'Ray';
console.log(a.name); // Ray;


delete a.name; // true;
console.log(a.name); // Ray

小心 Number

Number 是一個非常邪惡又恐怖的東西，基本上你只要寫 Number('100a') 你就會發現變成了 NaN，但是如果你用 typeof 卻又會是一個 number 型別。

Number('100a'); // NaN
typeof Number('100a'); // is number ??????

那如果使用 parseInt 呢？parseInt 其實也有一些雷，例如你傳入的值，如果不能被轉換為數字，那麼就會直接被忽略

parseInt('100,000'); // 100，因為逗號是一個字串。

此外 JavaScript 計算時。千萬不要使用小數點做計算，因為 JavaScript 是採用浮點數系統，因此在計算若是計算小數點，那麼就會有很大的誤差，例如

0.1 + 0.2; // 0.30000000000000004

undefined

最後講一下 undefined，undefined 中文名稱上是一個未定義的意思，但是它是是一個原始型別也是物件，同時也是一個變數，因此 var undefined = undefined 是可以的，更不用說在 IE8 時，是可以重新指派成其他物件。

結論

上面只是大概列出一些滿好玩的地方，實際還是會推薦去上課，可是我絕對不會說我一度一直想睡覺，而且保哥在上課時，是真的每一個人都會去點名回答甚至上台畫圖，透過各種方式讓你去解釋其觀念，當你如果可以解釋得出來，保哥接下來會再出其他考題考你(疑?!)，主要是確保你真的觀念吸收也真的會解釋，所以我個人是覺得這是一堂很值得的課程，但缺點就是上完之後頭很痛 XD。