健忘的 Sean 常常需要查看的陣列處理方法小抄。
What will this method return
- 單純遞迴執行：
forEach - 回傳一個新的陣列：
map、filter、concat - 回傳一個布林值：
some、every、includes - 回傳該元素：
find - 回傳該索引：
findIndex、indexOf - 回傳一個整數值：
reduce、unshift
forEach
將陣列裡的每個元素傳入，並「執行」給定的函式一次。
const array1 = ['a', 'b', 'c']
array1.forEach(element => console.log(element))
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
map
原陣列的每一個元素經過指定的函式「運算」後，回傳新的結果陣列。
const array1 = [1, 2, 3, 4]
// Pass a function to map
const result = array1.map(x => x * 2)
console.log(result)
// Expected output: Array [2, 4, 6, 8]
filter
原陣列經過指定的函式「過濾」後，回傳新的結果陣列。
const words = ['Sean', 'Damao', 'Paul', 'Iris', 'Julia']
const result = words.filter(word => word.length > 4)
console.log(result)
// Expected output: Array ["Damao", "Julia"]
concat
合併兩個或多個陣列，回傳一個新的陣列。
const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e', 'f', 'g']
const array3 = array1.concat(array2)
console.log(array3)
// Expected output: Array ["a", "b", "c", "d", "e", "f", "g"]
some
測試陣列中，是否有「至少一個」元素符合指定的條件函式，是的話會回傳 true 否則回傳 false。
const array1 = [1, 2, 3, 5, 7]
// Checks whether an element is even
const isEven = element => element % 2 === 0
console.log(array1.some(isEven))
// Expected output: true
every
回傳是否陣列中的「所有」元素都符合條件。
const array1 = [2, 4, 6, 8, 10]
// Checks whether all elements are even
const areEven = element => element % 2 === 0
console.log(array1.every(areEven))
// Expected output: true
includes
回傳陣列是否「包含」指定的元素。
const pets = ['cat', 'dog']
console.log(pets.includes('cat'))
// Expected output: true
console.log(pets.includes('pig'))
// Expected output: false
find
回傳「第一個」滿足條件的元素，如果通通不符合則回傳 undefined。
const array1 = [5, 6, 8, 100, 44]
const found = array1.find(element => element > 10)
console.log(found)
// Expected output: 100
findIndex
回傳「第一個」滿足條件的元素之「索引」，如果找不到則回傳 -1。
const array1 = [5, 6, 8, 100, 44]
const isLargeNumber = element => element > 8
console.log(array1.findIndex(isLargeNumber))
// Expected output: 3
indexOf
回傳「指定的元素」在陣列中「第一個」被找到的「索引」，如果找不到則回傳 -1。
const beasts = ['squirrel', 'seal', 'cat', 'duck', 'rabbit']
console.log(beasts.indexOf('squirrel'))
// Expected output: 0
// Start from index 2
console.log(beasts.indexOf('seal', 2))
// Expected output: 4
console.log(beasts.indexOf('pig'))
// Expected output: -1
reduce
將陣列中的每一項元素「由左至右」傳入「累加器」，最後回傳一個值。
const array1 = [1, 2, 3, 4]
// 0 + 1 + 2 + 3 + 4
const initialValue = 0
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue
)
console.log(sumWithInitial)
// Expected output: 10
unshift
unshift() 會增加一個或多個元素到陣列的開頭，並且回傳陣列的新長度。
const array1 = [1, 2, 3]
console.log(array1.unshift(4, 5))
// Expected output: 5
console.log(array1)
// Expected output: Array [4, 5, 1, 2, 3]