『新手日記』Day-9 JavaScript 部分Array Methods 介紹

無知並不可怕，畢竟這世間有太多的東西我們沒有辦法全部都知道，可怕的是不知道自己無知。

相信這句話大家都聽過而且都想避免的，但我今天卻犯了。原本今天要記錄的是迴圈，主要是想複習一下forEach(因為昨天突然練習突然打不出來)，就在迴圈筆記完成80%要進入forEach時，在google時才發現他是屬於Array Methods 並不是 Loop。當下傻眼，還好還沒發出去，只是上一篇就不能用並且要去暸解一下Array Methods了

記得在前幾篇介紹Array的文章裡有一個地方我偷懶直接貼MDN的連結

真棒！馬上就要來補坑了><”

什麼是Array Methods

它定義了更加「語義化」的函式名稱。這些array methods讓我們不用自己去設定就可以完成我們想要完成的結果。

簡單來說又是工程師的福利啊，但至於是不是福利就要看有沒有學會。像我就不覺得是福利，因為我今天看到這幾個Methods時卻無法直接說出他的功能，真的是典型的學習完了就還給老師。

大家就委屈一點陪我複習一下吧

Array.filter

可以幫你過濾元素，並回傳一個新的 Array。(會保留原陣列)

1
2

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];const result = words.filter(word => word.length > 6);console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Array.map()

會回傳一個值，他會透過函式內所回傳的值組合成一個陣列。

如果不回傳則是 undefined
回傳數量等於原始陣列的長度

1
2
3

const array1 = [1, 4, 9, 16];// pass a function to map
const map1 = array1.map(x => x * 2);console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.forEach

不會額外回傳值，只單純執行每個陣列內的物件或值。類似於for迴圈

1	const array1 = ['a', 'b', 'c'];array1.forEach(element => console.log(element));

Array.find()

find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一次為 true 的值。

1	const array1 = [5, 12, 8, 130, 44];const found = array1.find(element => element > 10);console.log(found);// expected output: 12

Array.join()

會將 Array 中所有的元素連接、合併成一個字串，並回傳此字串。

const elements = ['Fire', 'Air', 'Water'];console.log(elements.join());
// expected output: "Fire,Air,Water"console.log(elements.join(''));
// expected output: "FireAirWater"console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

Array.every()

檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。

1 2	const isBelowThreshold = (currentValue) => currentValue < 40;const array1 = [1, 30, 39, 29, 10, 13];console.log(array1.every(isBelowThreshold)); // expected output: true

Array.some()

在執行過程有一個 true 就會回傳 true。判斷某個符合條件的 object 是否有存在在 array 中

1
2
3

const array = [1, 2, 3, 4, 5];// checks whether an element is even
const even = (element) => element % 2 === 0;console.log(array.some(even));
// expected output: true

Array.reduce()

將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。

const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);console.log(sumWithInitial);
// expected output: 10

previousValue（上一個值），currentValue（當前值）

雖然這不是我進度裡會去複習的地方，但還真的是因禍得福，不然我根本不知道我漏掉的是多麽重要的一塊。上面的內容全部都是ＡＣ有教過的但我卻幾乎都忘光了。哎～真的要多練習打code，才切一個月的版而已都快要把JavaScript忘光了。

參考資料：
medium.com
www.casper.tw
developer.mozilla.org