JavaScript 30 Challenge day 4 — Array Cardio 1心得

Array Cardio

第四天的練習是有關於怎麼去處理陣列問題,在過去我處理陣列都是用迴圈的方式,但是JavaScript其實提供很多方法讓你很更有效率地去處理陣列。

Filter

設定條件取得你想要的內容,如果條件為true就會將該值保留如果為false就會將該值刪除最後回傳成一個新的陣列。

const data = [12,5,7,130,44];
const filtered = data.filter( (value) => (value) >= 10);
//filtered  = [12, 140, 44]

上面範例將條件設為≥10,這樣就只會抓取這個條件下的值,回傳成一個新陣列,所以5,8就都被篩選掉了。

map

會對陣列中的每個元素執行callback function,並將執行完的結果回傳成一個新的陣列。

const num = [2,4,6]
coust double = num.map((num) => (num * 2))
// double = [4,8,12]

sort

對陣列元素重新進行排列且這個方法會改變原本的陣列內容,sort這個方法預設的比較方式是以ASCII碼下去比較,並不是會照著數字大小或是字母順序幫你排序。

const number= [4, 11, 2, 10, 3, 1];
const sorted = number.sort();
//輸出結果為
sorted = [1,10,11,2,3,4]
且原來的number陣列也會受到改變。

如果想照數字的大小下去做排序,你必須要另外寫一個function
並且回傳一個值,可以參考sort()

  • 如果所傳遞的第一個引數小於第二個引數,則傳回一個負值。
  • 如果兩個引數相等,則傳回零。
  • 如果第一個引數大於第二個引數,則傳回一個正值。
const number= [4, 11, 2, 10, 3, 1];
const sorted = number.sort( (first,second) => (first > second? 1 : -1));
//輸出結果為
sorted = [1,2,3,4,10,11]

reduce

會對陣列中的每筆元素執行callback function每筆元素所執行出來的結果會作為執行下一次callback function的參數,適合拿來做對陣列的全部元素做一些累加的運算

const number =[2,4,5]
const reduced = number.reduce( (total,num) => {
    total = total + num
},0)
後面這個0是給第一個參數的初始值,假設你把0改成10那結果就會變成21

結果
reduced = 11

學了這些會發現其實JavaScript提供很多方法來處理陣列,不然在之前遇到這些問題的話,基本上我都會全部使用迴圈來處理。

Show your support

Clapping shows how much you appreciated Kai’s story.