前言

今天來繼續認識一些陣列常用的語法(部分陣列語法會帶有函式哦!)

toString()

可以將陣列轉換成字串：

const number = [0, 1, 2, 3, 4, 5]
console.log(number.toString()) // "0,1,2,3,4,5"

想特別分享toString()一個很方便的使用方法，當我們有數字需要進行2進位、10進位或16進位轉換時，即可以運用toString()來幫我們快速取得想要的結果：

const number = 255
console.log(number.toString(2)) // 11111111 <-- 取得2進位轉換結果
console.log(number.toString(16)) // ff <-- 取得16進位轉換結果

find()

對陣列中每個元素都進行自訂函式之測試，並回傳第一個滿足函式條件的元素，如沒有符合的元素會回傳undefined：

const number = [0, 1, 2, 3, 4, 5]
console.log(number.find(num => num < 4)) // 0 <-- 由於第一個元素就小於4所以會回傳第一個元素0
console.log(number.find(num => num > 10)) // undefined

filter()

filter()和find()有點類似，同樣會對陣列每個元素都進行自訂函式的測式，不同的地方在於只要元素符合條件就會回傳，並且可以新增出一個陣列：

const number = [0, 1, 2, 3, 4, 5]
console.log(number.find(num => num < 4)) // [ 0, 1, 2, 3 ] <-- 與find()不同，會將所有小於4的元素都取出

sort()

針對陣列內的元素進行排序，需要搭配排序用的函式，函式必須包含兩個參數(陣列中兩個元素)，經由比較兩個參數的大小來進行陣列的排序：

number = [5, 3, 2, 1, 4, 0]
console.log(number.sort(function(x, y) {
  if(x > y){
    return 1; 
  } else {
    return -1 
  }
}))
// [ 0, 1, 2, 3, 4, 5 ] 由小到大排序
// 其實輸出方法還可以再進行簡化，但還是要先理解裡面的涵義才行
// 簡化: console.log(number.sort((x, y) => x - y))

數字兩兩相互比較，假如回傳值是1，後面的數字將移到前面，若回傳值是-1則前面的數字移到前面，如此比較到最後形成由小到大排序(二分搜尋法)。

另外，當使用sort()而選擇不加入參數其實也會排序，只是排序方式將預設採unicode進行判斷，如此可能導致排序結果不如預期(如部份數字發生排序錯誤)。

number = [5, 3, 9, 10, 4, 7]
console.log(number.sort()) // [ 10, 3, 4, 5, 7, 9 ]

map()

將陣列中的每個元素經過自訂函式運算後進行回傳並且成為一個新的陣列：

const number = [0, 1, 2, 3, 4, 5]
const newNumber = number.map(num => num * 2)
console.log(newNumber) //[ 0, 2, 4, 6, 8, 10 ] <-- 原陣列每個元素都乘2

reduce()

這個語法很有意思，有點像生成一個累加器，將函式內進行完運算的陣列元素都加進累加器(在下面例子中的sum即是指累加器)後，回傳最終累加器的值：

const number = [0, 1, 2, 3, 4, 5]
const newNumber = number.reduce((sum, num) => sum + num, 0)
console.log(newNumber) // 15 <-- 0 + 1 + 2 + 3 + 4 + 5 

可以看到在函式逗號後面多了個0，這是指累加器的初始值，如果沒有寫的話會將陣列的第一個元素當作初始值，此外初始值並沒有限定一定要是數字，例如在操作上也可以使用空陣列或空物件來處理更複雜的陣列：

const number = [[0, 1], [2, 3], [4,5]].reduce((acc, num) => acc.concat(num), [])
console.log(number) // [0, 1, 2, 3, 4, 5]