JavaScript:需要知道的部分


Posted by V. K. on 2020-06-30

太多太多的選擇:switch case

當選擇太多時,可以用 switch case 來呈現,特別要注意每個 case 後面要加上 break,否則會繼續往下執行。

var week = 1
switch(week){
   case 1:
      console.log("星期一")
      brake
   case 2:
      console.log("星期二")
      brake
   defaule:
      console.log("請輸入正確範圍")  
}
var week = 1
switch(week){
   case 1:
   case 2:
      console.log("星期一")
      brake
   defaule:
      console.log("請輸入正確範圍")  
}

case 可以接著寫,多條件指向同答案。

如圖所示,亦可採用陣列做表示。


一、二、三:三元運算子(Ternary)

if、else 判斷式中,可以簡化成三元運算子的形式。

score >= 60 ? "pass":"fail" => 判斷條件 ? truefalse

判斷問號前的條件是否成立,如為 true 則回傳 : 前面的答案,如為 false 則回傳 : 後面的答案。


do...while... 迴圈

一般常用模式

亦可將終止條件加在裡面,外面設定為無限迴圈。
break 會終止整個迴圈。

continue 可以直接進入下一圈,會跳過後面的指令,如圖所示,如為奇數則會直接進行下一迴圈,不會印出i++ i


while 迴圈

do...while... 很類似,但反過來,先檢查終止條件,後進行後續動作,大部分情況更常使用 while 迴圈
do...while...while 迴圈 的差異:在條件不成立的情況下,do...while... 還是會跑第一圈。


for loop 迴圈

幾種迴圈中最常被使用到的


關於 return



函式中使用 return 來「回傳」結果,如未於函式中加上 return,在呼叫函式後將不會得到結果,且會預設為 undefined
如上附圖,函式後如接物件時,必須將 { 接在 return 後。若隔行放置 {,因 return 後為空,將會回傳 undefined


引數(Arguments)與參數(Parameter)

JavaScript 的內建物件,很類似陣列,用到機率很少,知道即可。

function add (a + b){
   return a + b
}
console.log(add(3 + 4))

參考以上程式碼,參數是函式中 a 及 b的部分,而引數則為呼叫時實際帶入的 3 及 4。
在 JavaScript 函式中 log arguments,可列出相對應的引數。即便未於函式中填入參數,也能直接帶入引數做運算。


Number 類型的內建函式

parseFloat() 將值轉為數字型態,並保留小數點。

var a = 3.45623

parseFloat(a) =>3.45623
parseFloat(a.toFixed(2)) =>3.45
parseFloat(a.toFixed()) =>3

使用 toFixed() 可以設定要到小數點後第幾位(四捨五入),如未填入值則會取整數。

Math.cell() 無條件進位

Math.floor() 無條件捨去

Math.round() 四捨五入

Math.sqrt() 開根號

Math.pow(x,y) 次方,x 的 y 次方。

Math.random() 產生隨機數,產生的值為 0 ~ 1(包含 0、不包含 1)。

toString() 數字轉字串

var a = 5

方法一:a.toString() => "5"
方法二:a + " " => "5"  把數字加上空字串會變成字串

延伸閱讀:
Number
Math


String 類型的內建函式

toUpperCase() 變大寫

toLowerCase() 變小寫

charCodeAt(0) 將位置 0 的 ASCII code 找出。

String.fromeCharCode(65) 將 ASCII code 為 65 的值轉為字串。

indexOf() 尋找關鍵字的位置

var str = "this is a book"

str.indexOf("is") => 5

可搜尋指定關鍵字所在的第一個位置(5 為 i 的位置)
如欲搜尋的關鍵字不存在於範圍內,會回傳「-1」。

replace() 取代字串

var str = "this is a book"

str.replace("book","notebook") => str = "this is a notebook"

把前面的字串「book」用後面的「notebook」替代
如範圍中有多個相同值,只會替換掉第一個。
var str = "this is a book, and I vary like this book."

str.replace("/book/g","notebook") => str = "this is a notebook, and I vary like this notebook."

如要將字串中的兩個「book」都替換掉,可使用正規表達式來處理。

split() 將字串切開變成陣列

var str = "this is a book"

str.split(" ") => str = ["this", "is", "a", "book"]

將原本的字串用空格切開,亦可使用其他條件分割。
像是標點符號、文字,或使用""會將每一個字分別切割。

trim() 去掉前後空格

length 計算有幾個字

延伸閱讀:
String
ASCII


Array 類型的內建函式

join() 將陣列用某個元素組合成「字串」

var arr = [1, 2, 3]

arr.join("&") => arr = 1&2&3

使用「&」加在原陣列的值與值之間
如未指定替換的元素,結果會是空白 => 123

map() 可將陣列中的元素都帶入 map() 中的函式進行運算

var arr = [1, 2, 3]

arr.map(double) => arr = [2, 4, 6]

預設有一個 double 的函式,會將值乘以 2。
使用 map 指令會將整個陣列的值都帶入 double 函式運算

filter() 篩選

var arr = [1, 2, 3]

arr.filter(function(x)){
   return x > 1
}

=> [2, 3]

篩選條件設為 > 1 時產生的結果

slice() 取某段的值
會回傳一個新的陣列,不會改動到原本陣列的值。

var arr = [1, 2, 3, 4 ,5, 6]

arr.slice(3) => arr = [4 ,5, 6]
arr.slice(3, 4) => arr = [4]

只傳一個值代表由該值起到最後的部分都要保留
起始值包含自己,但終止值不含自己,故範圍到 4 為止,不含 4。

splice() 替換陣列的值
此指令會改動原本的陣列

var arr = ["a", "b", "c", "d"]

arr.splice(2, 0, "A") => arr = ["a", "b", "A", "c", "d"]
arr.splice(2, 1) => arr = ["a", "b", "d"]
arr.splice(2, 1, "A") => arr = ["a", "b", "A", "d"]

arr.splice(目標位置, 刪除幾個值, 插入/替換的值)

sort() 排序
此指令會改動原本的陣列

var arr = [1, 30, 4, 21]

arr.sort() => arr = [1, 21, 30, 4]

數字的排序會以首字作為基準,並非由小排到大。

排序可參考此圖解法

延伸閱讀:Array


2020.6.30

  • 依舊花了很長篇幅,但還是沒全數整理完,留下一小部分再來看是更新在這篇還是另開新篇。但終於是告一個段落了,可以快點往後進行其他課程很開心,進度告急一直蠻焦慮的...

#javascript







Related Posts

Slack DM badge 製作

Slack DM badge 製作

網路的本質其實沒有你想的那麼難

網路的本質其實沒有你想的那麼難

用 Python 自學資料科學與機器學習入門實戰:入門導論

用 Python 自學資料科學與機器學習入門實戰:入門導論


Comments