Array Cardio

今天是單純的js練習，以及題目截圖

以及個人codepen

技巧點

以下為基礎的陣列方法操作運用

1. filter()

const food = ["rice", "banana", "apple", "hotDog"];
// 建立一個資料陣列

function isRice(food, index, foodArr) {
    return food === "rice";
}
// 建立一個callBack函式

const onlyRice = food.filter(isRice);
// 將陣列篩選後，回傳條件符合rice的陣列 ["rice"]

• food.filter(callBack函式)，callBack函式中，會調用三個參數，第一個參數food 則是陣列中的每一個元素；第二個參數index，是每一個元素在food陣列中的索引位置；第三個參數foodArr，為你所傳入的陣列，也就是food陣列．
• 會把陣列中的每一個元素拿出來做判斷，根據你所寫的條件，如果判斷出來為true，會將此元素回傳；反之，若判斷為false的話，就不回傳．
  這邊我的條件是food === "rice"
• filter方法不會改變原始陣列，而是得到一個新陣列．

const food = ["rice", "banana", "apple", "hotDog"];

food.filter((food, index, foodArr) => {
  return food === "cola";
});
// 預期會是一個空陣列 []

• 由於沒有任何一個食物符合條件cola，因此會回傳一個空陣列．

2. map()

const numbers = [1, 2, 3];
// 創建一個數字陣列

const doubles = numbers.map(function (num, index, currentArray) {
  return num * 2;
});
// [2, 4, 6];
將此陣列進行map運算，將每一個數字都乘於2之後，回傳新的數字陣列

• 跟filter一樣，會把陣列中的每一個元素拿出來，並且可以帶入三個參數．分別為：num陣列中每一個的元素，index每一個元素在陣列中的索引值，currentArray這個要進行map的陣列（也就是numbers）．

const numbers = [1, 2, 3];
const nothing = numbers.map(function (num, index, currentArray) {
  return;
});
console.log(nothing); // [undefined, undefined, undefined]

• map方法有個特別之處，當你沒有進行任何運算處理，最後會得到一個
  跟原本陣列一樣數量的undefined陣列

3. sort()

const array1 = [1, 30, 4, 21, 100000];
array1.sort(); 
結果為 [1, 100000, 21, 30, 4]

• sort當你在()內沒有帶入你要比較的函式，他就會將每個元素轉為字串後的每一個字元之 Unicode 編碼位置值進行排序。就發生非預期的應該由小到大排列．原因在於第一個字元的部分，有1的編碼位置排序在前面．
• 若想要得到由小到大、由大到小的話，則必須在（）內放入比較函式．如下：

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function (a, b) {
  console.log("a:",a, "b:", b)
  return a - b;
});
// 以下為console.log打印出每次a和b的結果
a: 2 b: 4
a: 5 b: 2
a: 5 b: 4
a: 1 b: 4
a: 1 b: 2
a: 3 b: 4
a: 3 b: 2

console.log(numbers); // [1, 2, 3, 4, 5]

numbers.sort(function (a, b) {
  return b - a;
});
console.log(numbers); // [5, 4, 3, 2, 1]

• 傳入你要比較的函式，根據a和b比較後的回傳值，a-b如果是小於0，a放在b的前面；a-b如果是大於0，則b放在a的前面；如果等於0，位置則不作調整．
• 簡單快速來說a - b 的情況，可以得到一個由小到大排列的數字陣列．b - a則會由大到小排列．

const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
];
const result5 = inventors.sort((a, b) => (a.passed - a.year) - (b.passed - b.year));

• 也可以根據物件中的其中一個屬性來做排序，上面就是以每一個人的壽命，去做小到大排序．

4. localeCompare()

回傳一個數字，用來表示其與被比較的字串的先後順序。
用來搭配sort就可以輕鬆的將字串做排序．

const abcd = ["c", "a", "d", "b"];
const sortArr = abcd.sort(); // ['a', 'b', 'c', 'd'] 
const sortArr = abcd.sort((a, b) => {
    return a.localeCompare(b, "en");
})
console.log(sortArr); // ['a', 'b', 'c', 'd']

• 英文的排序可以直接用sort()，就會把每一個元素的第一個字元開始做比較．
• localeCompare本身也是利用兩個值去比較，回傳值是負數、正數、或0去更動位置．
• localeCompare中可以帶上你要指定去排序比較的語言參數，上面的en位置，則是語言參數，可以選擇性要不要帶入．想要讓結果是依照特定語言去排序的話，帶上語言參數才會得到符合預期的結果．

const num = ["9", "3", "6", "2", "1"];
const sortNum = num.sort((a, b) => {
  return a.localeCompare(b, undefined, {numeric: true});
})
console.log(sortNum); // ["1","2","3","6","9"]

• 如果是字串的數字，也可以用此方法排序，後面只要帶入{numeric: true}就可以了．

5. reduce()

使用上很難操作一個方法，至今用還是會卡卡哈哈，腦袋總是轉不過來

const num = [1, 2, 3, 4, 5];
const total = num.reduce((acc, cur) => acc + cur, 0); // 15

• acc的位置是累積下來的數值，cur會是num陣列每一次遞迴的元素值，cur逗號後面還擺放了0，這個0代表著初始值．當你有傳入的時候，第一次開始的acc 就會是 0，第一次的cur就會是num陣列的 1．

const num = [1, 2, 3, 4, 5];
const total = num.reduce((acc, cur) => acc + cur); // 15

• 那如果不擺放初始值的話，第一次的acc就會是陣列中的第一個元素 1，第一次的cur就會是陣列中的第二個元素 2．第一次執行完後結果會是 1 + 2 等於 3．第二次的acc就會是第一次執行完的結果 3．第二次的cur就會是 4．一直重複相同行為直到陣列的最後一個值．

var flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
];
flattened.reduce((acc, cur) => {
    return [...acc, ...cur];
}); // [0, 1, 2, 3, 4, 5]

• reduce的用法多樣且方便，上面是一種將陣列攤平的處理方式．利用到展開運算子，將每一次的元素攤平，放入到陣列中．

flattened.flatMap((el) => el); // [0, 1, 2, 3, 4, 5]

• 上面也是一種攤平陣列的方法，感覺更簡單，直接將每一個元素，展開一層然後回傳．

心得

js的基礎用法博大精深，有些用法也是看過別人的寫法後，才驚覺原來這個方法可以這樣用啊！！！突然新世界打開哈哈．

語法很多，只能有空看到什麼學什麼了，學了忘了就去查MDN文件吧ＸＤ