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

前言

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

課程介紹

《高雄》JavaScript 開發實戰:核心概念篇 (全新 ES6 改版)

首先先感謝公司付錢讓我去上保哥的「《高雄》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

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

陣列

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

1
var a = [];

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

1
2
3
4
5
6
7
8
var a = [1, 2, 3];

// 或者是使用 push

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

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

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

1
2
3
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,但是!

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

1
2
3
4
5
6
var a;
a; // undefined
a = 5;
typeof a; // number
var a;
typeof a; // ??

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

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

1
2
3
4
5
6
var a;
a; // undefined
a = 5;
typeof a; // number
var a = 'Ray';
typeof a; // string


JavaScript 本身就是指標概念

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
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); // ??

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

1
2
3
4
5
6
7
8
9
10
11
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 型別。

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

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

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

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

1
0.1 + 0.2; // 0.30000000000000004

undefined

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

結論

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

0%