Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

JavaScript 快速跳坑指南

Chargement dans…3
×

Consultez-les par la suite

1 sur 24
1 sur 24

JavaScript 快速跳坑指南

Télécharger pour lire hors ligne

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

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

Plus De Contenu Connexe

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Livres audio associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

JavaScript 快速跳坑指南

  1. 1. 1. Es5 / Es6 歷史沿⾰革 2. 原始型別與物件型別 3. 記憶體位置,蛤? 4. 傳值呼叫 (Call By Value) 5. 傳參參考呼叫 (Call By Reference) 6. Function 函式 OUTLINE 7. Class 類別 8. 判斷式 9. 迴圈 10.字串串操作 11.陣列列操作
  2. 2. 隨著這幾年年 Javascript 使⽤用率跟社群越來來越⼤大, 這個語⾔言本⾝身也處於快速發展的狀狀態,幾乎每年年都會有新版本出現, 不過從 ES5 -> ES6 算是 JS 圈裡比較⼤大的改變, ⽽而且⽬目前 ES6 在各⼤大瀏覽器⽀支援度已經很⾼高,且改善了了許多舊版本缺陷, 也讓寫法更更精簡,因此常常被拿來來做比較。 後⾯面講到 ES6 語法時,會⽤用 : 來來做表⽰示,否則則為ES5前的寫法。 想查詢 ES6 在各個瀏覽器的⽀支援度可以看這邊: http://kangax.github.io/compat-table/es6/ ES5 / ES6 ES6
  3. 3. 物件 ( 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 :
  4. 4. 原始型別⼜又稱為純值 ( Primitive Type ) , 純值⽤用來來表⽰示只代表單⼀一值的⼀一種資料型別, 如12只代表12,沒有其他意思了了。 物件 與 原始型別 原始型別 JS 裡的原始型別 null 、 undefined 、 number ( 0 ) 、 string ( “string”) 、boolean ( true ) 、symbol (⽬目前少⽤用)
  5. 5. 最早電腦使⽤用的打孔卡: 變數 與 記憶體位置
  6. 6. 變數 與 記憶體位置 ⾼高階語⾔言的出現(現代語⾔言如Java / C++ / Python / Ruby … ), 讓開發者可以擺脫複雜不易易閱讀的資料(01101), 進⽽而使⽤用⼈人類看得懂的符號(⾃自然語⾔言)來來操作資料。
  7. 7. 變數 與 記憶體位置 變數宣告⽅方式 let message = const = 3.14159Pi “hello” ES6 ES6 const 宣告的變數,不能被重新賦值 ( assign ) ,非常嚴謹,依照需求使⽤用。 使⽤用在變數可能被重新指定的情況下,其block scope ( 以⼤大括弧 {} 為宣告範圍 ) 的特性, 能夠確保變數只存活在宣告位置的區塊中,⽽而不會意外覆蓋掉其他場域的同名變數值。 ES6 後普遍被推薦使⽤用。 var =message “hello” 使⽤用在變數可能被重新指定的情況下,JS 最早的宣告⽅方式,宣告範圍為函式的範圍, 較不嚴謹,也常常因此產⽣生變數外洩(意外覆蓋)的奇怪 Bug。 ( 如:for 迴圈 內變數若若⽤用var 宣告,很有可能覆蓋掉回圈外的同名變數。)
  8. 8. var a = 12 Primitive Value Primitive Value var b = a 0x001 0x002 Copy of 變數 與 記憶體位置 複製新的值:CALL BY VALUE
  9. 9. 變數 與 記憶體位置 var a = { a : 12, b : ”jack” } var b = a Object 0x0010x001 所有物件都是傳參參考呼叫 存入記憶體位置作為參參考:CALL BY REFENERCE
  10. 10. FUNCTION function hello (name) { return “hello, ”+name
 } let hello = function (){ return ”hello”+name
 } let hello = ( ) => { return “hello”+name
 } ES6 函式是指⼀一連串串程式碼的集合,在開發上有許多好處, 如把不同地⽅方重複的程式碼包裝起來來,把可能會改變的部分⽤用函 式的參參數表⽰示,以此來來減少重複造輪輪⼦子(重⼯工)的次數。 幾種宣告函式的⽅方式: 函式 ( Function )
  11. 11. 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) } }
  12. 12. ⽤用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
  13. 13. 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
  14. 14. 判斷式 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 結束條件區塊
  15. 15. 判斷式 比較運算⼦子( Comparison Operator ) 比較運算⼦子可以比較其兩兩端的值,並將結果以布林林值回傳( true / false ) 這邊介紹幾個比較常⽤用到或較讓⼈人匪夷所思的運算⼦子: a == b 等於,如果 a 和 b 的值相等則為 true, 兩兩變數型別若若不⼀一樣,會被 JS ⾃自動轉型。 JavaScript 是⼀一個弱型別的語⾔言(宣告時沒有嚴格規定變數型別),因此 在接收變數時,如果變數型別跟預期的不同,會試圖把變數轉型。 ⾃自動轉型 if ( “what?” ) 等於,如果 a 和 b 的值相等則為 true, 兩兩變數型別若若不⼀一樣,會被 JS ⾃自動轉型。 轉型為 true
  16. 16. 判斷式 JavaScript 在將數值轉為布林林值時,有幾種結果與 false 值等價,這些值 被稱為 Falsy 值: Truthy ? Falsy ? false null undefined 0 NaN ‘’ (空字串串) 什什麼是 Truthy ? 簡單來來說,不是 Falsy 的值,就是 Truthy。 true {} [] 42 “0" new Date() -42 3.14
  17. 17. 判斷式 全等於 (推薦使⽤用) a === b 全等於,兩兩端變數的值與型別必須完全ㄧ樣, 否則回傳 false 其他常⽤用的比較運算⼦子 >= <= != !== || && 從最左邊開始看,若若其中⼀一值為 true 則結果為 ture 從最左邊開始看,若若其中⼀一值為 false 則結果為 false
  18. 18. 迴圈 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 開始計算。 常⽤用的兩兩種迴圈
  19. 19. 字串串操作 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)
  20. 20. 陣列列操作 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()
  21. 21. 陣列列操作 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]
  22. 22. 陣列列操作 給狂熱學習者 (以防你聽完後愛上陣列列): —-> 紅⾊色⽅方法會回傳全新陣列列,不會改變原來來的陣列列 來來⾃自直播主:偷米騎巴哥 ,影片在此
  23. 23. 參參考資料 Class 類別 比較運算⼦子( Comparison Operator ) ⾃自動轉型 Javascript 的 四種 This (較深) 運算⼦子優先順序

×