JS 基礎知識，解說使用變數在操作時，不同型別的行為差異（純值與物件 / 傳值與傳參考），以及 ’this‘ 的變化、 Class 宣告方式...等。 A brief description of JavaScript ，introducing basic usage like for loop / class / different this in global function or object function.

2. 1. Es5 / Es6 歷史沿⾰革
2. 原始型別與物件型別
3. 記憶體位置，蛤？
4. 傳值呼叫 (Call By Value)
5. 傳參參考呼叫 (Call By Reference)
6. Function 函式
OUTLINE
7. Class 類別
8. 判斷式
9. 迴圈
10.字串串操作
11.陣列列操作

3. 隨著這幾年年 Javascript 使⽤用率跟社群越來來越⼤大，
這個語⾔言本⾝身也處於快速發展的狀狀態，幾乎每年年都會有新版本出現，
不過從 ES5 -> ES6 算是 JS 圈裡比較⼤大的改變，
⽽而且⽬目前 ES6 在各⼤大瀏覽器⽀支援度已經很⾼高，且改善了了許多舊版本缺陷，
也讓寫法更更精簡，因此常常被拿來來做比較。
後⾯面講到 ES6 語法時，會⽤用 : 來來做表⽰示，否則則為ES5前的寫法。
想查詢 ES6 在各個瀏覽器的⽀支援度可以看這邊：
http://kangax.github.io/compat-table/es6/
ES5 / ES6
ES6

4. 物件 ( Object )
A collection of values that give a name.
let user = {
name : “John”,
age: 10
}
創造物件最常⾒見見的⽅方式： 存取物件的⽅方式
user.name // “John”
user[“age”] // 10
物件 與 原始型別
}:⼜又稱物件的屬性（property）
JS 裡⾯面的物件代表⼀一連串串名稱與數值的組合（ key-value pairs ）
{ key1 : value1
Key2 : value2
:

5. 原始型別⼜又稱為純值 ( Primitive Type ) ，
純值⽤用來來表⽰示只代表單⼀一值的⼀一種資料型別，
如12只代表12，沒有其他意思了了。
物件 與 原始型別
原始型別
JS 裡的原始型別
null 、 undefined 、 number ( 0 ) 、
string ( “string”) 、boolean ( true ) 、symbol (⽬目前少⽤用)

6. 最早電腦使⽤用的打孔卡：
變數 與 記憶體位置

7. 變數 與 記憶體位置
⾼高階語⾔言的出現（現代語⾔言如Java / C++ / Python / Ruby … )，
讓開發者可以擺脫複雜不易易閱讀的資料（01101），
進⽽而使⽤用⼈人類看得懂的符號（⾃自然語⾔言）來來操作資料。

8. 變數 與 記憶體位置
變數宣告⽅方式
let message =
const = 3.14159Pi
“hello” ES6
ES6
const 宣告的變數，不能被重新賦值 （ assign ) ，非常嚴謹，依照需求使⽤用。
使⽤用在變數可能被重新指定的情況下，其block scope ( 以⼤大括弧 {} 為宣告範圍 ) 的特性，
能夠確保變數只存活在宣告位置的區塊中，⽽而不會意外覆蓋掉其他場域的同名變數值。
ES6 後普遍被推薦使⽤用。
var =message “hello”
使⽤用在變數可能被重新指定的情況下，JS 最早的宣告⽅方式，宣告範圍為函式的範圍，
較不嚴謹，也常常因此產⽣生變數外洩（意外覆蓋）的奇怪 Bug。
（ 如：for 迴圈 內變數若若⽤用var 宣告，很有可能覆蓋掉回圈外的同名變數。）

9. var a = 12
Primitive
Value
Primitive
Value
var b = a
0x001
0x002
Copy of
變數 與 記憶體位置
複製新的值：CALL BY VALUE

10. 變數 與 記憶體位置
var a = { a : 12, b : ”jack” }
var b = a
Object
0x0010x001
所有物件都是傳參參考呼叫
存入記憶體位置作為參參考：CALL BY REFENERCE

11. FUNCTION
function hello (name) {
return “hello, ”+name
}
let hello = function (){
return ”hello”+name
}
let hello = ( ) => {
return “hello”+name
} ES6
函式是指⼀一連串串程式碼的集合，在開發上有許多好處，
如把不同地⽅方重複的程式碼包裝起來來，把可能會改變的部分⽤用函
式的參參數表⽰示，以此來來減少重複造輪輪⼦子（重⼯工）的次數。
幾種宣告函式的⽅方式：
函式 ( Function )

12. FUNCTION
當⼀一個函式被呼叫時，JavaScript 會隨之產⽣生⼀一個 this 關鍵字，這個
關鍵字會根據不同呼叫⽅方式指向不同物件（ this 的概念念離不開物件），
最常遇到的兩兩種情況如下：
this 關鍵字
WHAT’S THIS
D
function getName (name) {
console.log( this )
}
直接呼叫 : 指向 Window 物件
getName() // this is window
D
以物件呼叫 : 指向該function對應之物件
user.getName() // this is user
let user = {
name: “john”,
getName: function(){
console.log(this)
}
}

13. ⽤用new Class產⽣生物件（傳統）
CLASS 是物件的藍藍圖，當你把屬性設計好時，就可以便便利利的使⽤用同⼀一份
架構產⽣生許多新的物件（⽽而不是參參考）。
D
function User (name,age,state) {
this.name = name;
this.age = age;
this.unmarried = state
}
let jerry = new User(‘Jerry’ , 18 , false )
let stan = new User(‘Stan’ , 28 , false )
console.log(jerry.name;) // ‘Jerry’
Javascript 早期是⽤用 function 當作建構⼦子
（new 物件時的進入點）所以為了了避免跟
⼀一般 function 混淆，建議使⽤用⼤大寫開頭來來
作為類別名稱。
new Class 時 ，JS會做以下幾個特殊動作：
1. 會產⽣生⼀一個全新的空物件
2. 將該建構函式的 this 指向該物件（重要）
3. 執⾏行行建構式內容，並將該新物件回傳
所以記得⼀一定要加上new 關鍵字，否則該函式
會以⼀一般function 呼叫⽅方式執⾏行行，產⽣生錯誤。
CLASS

14. ECMAScript 6 中引入了了類別 (class) 作為 JavaScript 物件導向的語法
糖，提供⼀一個更更簡潔的語法來來建立物件。
⽤用new Class產⽣生物件（現代）
D
class User {
constructor (name,age,state){
this.name = name;
this.age = age;
this.married = state;
}
}
let jerry = new User(‘Jerry’ , 18 , false )
let stan = new User(‘Stan’ , 28 , false )
console.log(stan.married;) // false
與傳統 function 建構⼦子函式的內容相同
CLASS
ES6

15. 判斷式
If 與 switch
If ( a == true ) {
// do something
} else if ( b == true ){
// do something
} else {
// do something
}
常⾒見見的兩兩種判斷式寫法 let user = “Jerry”
switch (user){
case “Jerry” :
// do something
break;
case “Stan” :
// do something
break;
default :
// do something if none
of the above case match.
}
不會⾃自動跳脫，
必須以 break
結束條件區塊

16. 判斷式
比較運算⼦子（ Comparison Operator )
比較運算⼦子可以比較其兩兩端的值，並將結果以布林林值回傳（ true / false )
這邊介紹幾個比較常⽤用到或較讓⼈人匪夷所思的運算⼦子：
a == b
等於，如果 a 和 b 的值相等則為 true，
兩兩變數型別若若不⼀一樣，會被 JS ⾃自動轉型。
JavaScript 是⼀一個弱型別的語⾔言（宣告時沒有嚴格規定變數型別），因此
在接收變數時，如果變數型別跟預期的不同，會試圖把變數轉型。
⾃自動轉型
if ( “what?” )
等於，如果 a 和 b 的值相等則為 true，
兩兩變數型別若若不⼀一樣，會被 JS ⾃自動轉型。
轉型為 true

17. 判斷式
JavaScript 在將數值轉為布林林值時，有幾種結果與 false 值等價，這些值
被稱為 Falsy 值：
Truthy ? Falsy ?
false null undefined 0 NaN ‘’ (空字串串)
什什麼是 Truthy ? 簡單來來說，不是 Falsy 的值，就是 Truthy。
true {} [] 42 “0" new Date() -42 3.14

18. 判斷式
全等於 （推薦使⽤用）
a === b
全等於，兩兩端變數的值與型別必須完全ㄧ樣，
否則回傳 false
其他常⽤用的比較運算⼦子
>= <= != !== || &&
從最左邊開始看，若若其中⼀一值為 true 則結果為 ture
從最左邊開始看，若若其中⼀一值為 false 則結果為 false

19. 迴圈
for ( let i = 0 ; i < 100 ; i = i +1) {
console.log(i)
// do something.
}
初始值
條件判斷
每次回圈會執⾏行行的動作
let i = 0
while ( i <= 10 ) {
console.log( i )
i = i+1
}
條件符合時執⾏行行
迴圈的概念念就是⼀一段程式碼會重複好幾次，次數則是由開發者所寫的邏
輯⽽而定，通常⽤用來來計算次數的變數會由 0 開始計算。
常⽤用的兩兩種迴圈

20. 字串串操作
let str = ‘Hello world !!’
str.length // 14
介紹常⽤用到的字串串⽅方法，基本上要⽤用到在查就好，不⽤用特別背。
字串串長度 str.length
let hello = ‘hello’
字串串串串接 strA.concat( strB )
let world = ‘ world’
hello.concat( world ) // ‘hello world’
let hi = ‘hello’
字串串分解 str.split( ‘’ )
hello.split( ‘’ ) // ‘[‘h’ , ’e’ , ’l’ , ’l’ , ’o’ ]’
let eng = ‘abcdefg’
eng.substr( 0,3 ) //abc
截取字串串 str.substr(start , stop)

21. 陣列列操作
let array = [ ‘a’ , ’b’ , ’c’ ]
array.length // 3
陣列列值的取⽤用⽅方法有點像物件，只是屬性名稱變為有序的數字（0 , 1, 2 , 3 ...），
所以只能⽤用中括號來來存取，使⽤用這些內建⽅方法操作陣列列或字串串時，要注意會不會
改變到原來來的陣列列值。
陣列列長度 array.length
let array = [ ‘h’ , ‘e’ , ‘l’ , ‘l’ , ‘o’ ]
陣列列反轉 array.reverse
let hi = [‘h’ , ’e’ , ’l’ , ’l’ , ’o’ ]
陣列列連接 array.join(‘’)
hello.join( ‘’ ) // join
let hi = [‘h’ , ’e’ , ’l’ , ’l’ ]
hello.push( ‘o’ ) // ‘[‘h’ , ’e’ , ’l’ , ’l’ , ’o’ ]’
新增陣列列元素 array.push
let newArray = array.reverse()

22. 陣列列操作
let array = [ ‘h’ , ‘e’ , ‘l’ , ‘l’ , ‘o’ ]
for ( let i=0 ; i<array.length ; i++ ) {
array[i]
}
有⼀一些⽅方法可以對陣列列做巡訪，有點像使⽤用 for 迴圈來來取得每個陣列列元素，常⾒見見
的幾個有 forEach / map / filter ;
For 迴圈巡訪陣列列
let array = [ ‘h’ , ‘e’ , ‘l’ , ‘l’ , ‘o’ ]
使⽤用 forEach 來來巡訪
let newArray =
array.forEach( function( item, index){
item // each item in array
})
let array = [ 0 , 1 , 2 ]
使⽤用 map 來來巡訪
let newArray =
array.map( function( item, index){
return item*2
}) // newArray equals to [0,2,4]
let array = [ 0 , 1 , 2 ]
使⽤用 filter 來來巡訪
let newArray =
array.filter( function( item, index){
return item > 0 // filter false element
}) // newArray equals to [1,2]

23. 陣列列操作
給狂熱學習者 (以防你聽完後愛上陣列列)：
—-> 紅⾊色⽅方法會回傳全新陣列列，不會改變原來來的陣列列
來來⾃自直播主：偷米騎巴哥 ，影片在此

24. 參參考資料
Class 類別
比較運算⼦子（ Comparison Operator )
⾃自動轉型
Javascript 的 四種 This （較深）
運算⼦子優先順序