陣列的內建函式

12月 20 2021 JavaScript

常用的內建函式。

不改變原本陣列的方法

Array.some(function) 是否有一個元素符合函式的內容

1
2
3
const array = [2, 4, 5, 7, 10];
console.log(array.some(x => x > 5)) // true
console.log(array.some(x => x < 0)) // false

Array.every(function) 是否所有元素皆符合函式的內容

1
2
3
const array = [2, 4, 5, 7, 10];
console.log(array.every(x => x > 0)) // true
console.log(array.every(x => x % 2 === 0)) // false

Array.concat(array) 把兩個陣列合併起來後回傳。

1
2
3
4
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = arr1.concat(arr2)
console.log(arr3) // [1, 2, 3, 4, 5, 6]

Array.join(separator) 在每個元素之間插入 separator，結合成一個字串回傳。

1
2
3
4
5
const str = 'AbCdEFGhijkLMN'
const arr = str.split('')
let result = arr.join('，')
console.log(result)
// A，b，C，d，E，F，G，h，i，j，k，L，M，N

Array.slice(start, end) => 切出陣列的某個部分。根據指定的起始與終點索引值（不包含 end）。

小技巧：

  • 不指定 end 的話會自動算到最後一個元素
  • 輸入負數代表「從後面數來第 n 個字」
1
2
3
4
5
6
7
const arr = [1, 2, 3, 4, 5]
const result1 = arr.slice(0, 4)
const result2 = arr.slice(2)
const result3 = arr.slice(0, -3)
console.log(result1)  // [1, 2, 3, 4]
console.log(result2)  // [3, 4, 5]
console.log(result3)  // [1, 2]

Array.reduce(function, accumulator) 回傳陣列總和加上 accumulator 的值

補充：每一圈的 accumulator 值 = 上一圈的回傳值

1
2
3
4
5
const arr = [1, 2, 3]
const result = arr.reduce(function(acc, elem) {
  return acc + elem
}, 20)
console.log(result) // 6 + 20 = 26

小技巧：把 accumulator 的值設為 0（不設值也可以，但不建議這樣做），等於算出「陣列總和」

（沒有指定 accumulator 時，function 會把陣列的第一個元素當作累加器，並且忽略第一個元素，所以才會變成陣列總和）

1
2
3
4
5
const arr = [1, 2, 3]
const result = arr.reduce(function(acc, elem) {
  return acc + elem
})
console.log(result) // 6

乘法也是一樣的概念：

1
2
3
4
5
const arr = [1, 2, 3]
const result = arr.reduce(function(acc, elem) {
  return acc * elem
}, 10)
console.log(result) // 6 * 10 = 60

Array.find(function) 回傳第一個在 function 中回傳 true 的元素

1
2
3
4
5
const arr = [1, 2, 3, 5, 10, 7]
const result = arr.find(function (element) {
  return element > 3
})
console.log(result)  // 5

Array.some(function) 只要有一個元素通過 function 檢查就回傳 true，否則回傳 false

1
2
3
4
5
const arr = [1, 2, 3, 5, 10, 7]
const hasEven = arr.some(function (element) {
    return element % 2 === 0
})
console.log(hasEven)

Array.findIndex(function) 回傳第一個在 function 中回傳 true 的元素的索引值

1
2
3
4
5
const arr = [1, 2, 3, 5, 10, 7]
const result = arr.findIndex(function (element) {
  return element > 3
})
console.log(result)  // 3

Array.includes(value) 判斷 value 是否包含在 Array 裡面，是就回傳 true，不是就回傳 false

1
2
3
4
5
const arr = [1, 2, 3]
console.log(arr.includes(1)) // true
console.log(arr.includes(2)) // true
console.log(arr.includes(3)) // true
console.log(arr.includes(4)) // false

Array.forEach(function) 在 function 中對每個元素做一段處理。

注意：這個方法不會有回傳值，所以當成是 for 迴圈的語法糖就好了

1
2
3
4
5
6
const arr = [1, 2, 3]
const response = arr.forEach(elem => console.log(elem)) 
// output: 1 
// output: 2 
// output: 3
// output: undefined (response 的值)

Array.map(function) 在 function 中對每個元素做一段處理，再利用該 function 的回傳值來建立一個新陣列。

1
2
3
4
5
const arr = [1, 2, 3]
const result = arr.map(function (element) {
  return element * 2
})
console.log(result) // [2, 4, 6]

小技巧：轉換資料型態時很適合用 map

1
2
3
const arr =['1', '2', '3']
const result = arr.map(elem) => Number(elem))
console.log(result) // [1, 2, 3]

後來發現其實還有更簡單的做法：

1
2
3
const arr =['1', '2', '3']
const result = arr.map(Number)
console.log(result) // [1, 2, 3]

如果你想用「命名函式」來當作要傳入的 function 也可以： 

1
2
3
4
5
6
7
8
9
10
var arr = [1, 2, 3, 4]
var result = arr.map(handler)
console.log(result)  // [ 1, 32, 243, 1024 ]

function double(x, y) {
  return x ** y
}
function handler (element) {
  return double(element, 5)
}

Array.filter(function) => 在 function 中對每個元素做條件判斷，根據該 function 的回傳值來建立一個新陣列。

true 會留下，false 會被遺棄（只留下奇數）：

1
2
3
4
5
const arr = [1, 2, 3]
const result = arr.filter(function (element) {
  return element & 1
})
console.log(result) // [1, 3]

Array 方法串燒

如果回傳值是一個 Array，就可以一直使用 Array 的方法來串接下去。

用 map() 來做串燒：

1
2
3
4
5
6
7
8
9
10
var arr = [1, 2, 3]
var result = 
    arr
    .map(function(element) {
      return element * 2
    })
    .map(function(element) {
      return element + 'yo'
    })
console.log(result) // [ '2yo', '4yo', '6yo' ]

你要混搭 map()，filter() 也可以，但請務必確認前一個的回傳值是 Array。

會改變原本陣列的方法

再次強調，以下方法都會改變原本的陣列！

Array.reverse() 反轉陣列

要注意回傳值也是一個反轉後的陣列：

1
2
3
4
const array1 = [1, 2, 3]
const array2 = array1.reverse()
console.log(array1) // [3, 2, 1]
console.log(array2) // [3, 2, 1]

Array.fill(value, start, end) 以某個值填滿陣列

要注意回傳值也是一個填滿後的陣列：

1
2
3
4
5
const array1 = [1, 2, 3, 4]
const array2 = array1.fill('A')

console.log(array1) // ['A', 'A', 'A', 'A']
console.log(array2) // ['A', 'A', 'A', 'A']

小技巧：

  • 不指定 end 的話會自動算到最後一個元素
  • 輸入負數代表「從後面數來第 n 個字」
1
2
3
4
5
6
const array1 = [1, 2, 3, 4]
const array2 = [1, 2, 3, 4]
const array3 = array1.fill('A', 1)
const array4 = array2.fill('A', 0, -2)
console.log(array3)  // [1, 'A', 'A', 'A']
console.log(array4)  // ['A', 'A', 3, 4]

Array.splice(start, delete, add) 插入或刪除元素

1
2
3
const arr = [1, 2, 3, 4, 5]
arr.splice(1, 1, 'Yo', 'DJ')
console.log(arr) // [1, 'Yo', 'DJ', 3, 4, 5]

意思是：「從第 1 個索引位置，刪除一個元素，新增 Yo、DJ 這兩個元素」

Array.sort(a, b) 對元素做排序

預設的排序方式

預設是根據「Unicode」的號碼來做排序（由小排到大），但我覺得這樣記也蠻方便的：

  • 按照第一個「英文」字母排序（小寫的 Unicode 比大寫大）
  • 按照第一個「數字」排序
1
2
3
const arr = ['gGsdkfi', 'COKAOS', 'aAdjaod', 'Dkapd', 'Bkoad']
arr.sort()
console.log(arr) // [ 'Bkoad', 'COKAOS', 'Dkapd', 'aAdjaod', 'gGsdkfi' ]
1
2
3
const arr = [24, 13, 66, 45, 86, 27, 55]
arr.sort()
console.log(arr) // [13, 24, 27, 45, 55, 66, 86]

自定義排序方式

根據 return 值來決定排序方式，詳細規則可以參考 MDN，這裡只寫比較方便的記法：

假設初始的排序是 a => b

  • return 正數 代表 a b 交換位置
  • return 負數 代表 a b 不交換位置

所以如果要由小排到大：

1
2
3
4
5
6
const arr = [24, 13, 66, 45, 86, 27, 55]
arr.sort(function(a, b) {
  if(a > b) return 1
  if(a < b) return -1
})
console.log(arr) // [13, 24, 27, 45, 55, 66, 86]

如果要由大排到小：

1
2
3
4
5
6
const arr = [24, 13, 66, 45, 86, 27, 55]
arr.sort(function(a, b) {
  if(a > b) return -1
  if(a < b) return 1
})
console.log(arr) // [86, 66, 55, 45, 27, 24, 13]

更簡潔的寫法：

1
2
3
4
5
const arr = [24, 13, 66, 45, 86, 27, 55]
arr.sort(function(a, b) {
  return a - b
})
console.log(arr) // [13, 24, 27, 45, 55, 66, 86]

解釋一下，如果 a-b 得到 正數，代表 a 比 b 大 的時候交換位置。可以想成是「碰到大的就交換位置」，所以小的都會被排到後面，最後得到「由小到大」的排序。

1
2
3
4
5
const arr = [24, 13, 66, 45, 86, 27, 55]
arr.sort(function(a, b) {
  return b - a
})
console.log(arr) // [86, 66, 55, 45, 27, 24, 13]

解釋一下，如果 b-a 得到 正數，代表 a 比 b 小 的時候交換位置。可以想成是「碰到小的就交換位置」，所以大的都會被排到後面，最後得到「由小到大」的排序。

Array.push(element1, [element2, [element3, ...]]) 新增元素到陣列結尾

補充：回傳值為新的陣列長度

1
2
3
const arr = [1, 2]
console.log(arr.push(3, 4)) // 4
console.log(arr)  // [1, 2, 3, 4]

Array.pop() 移除陣列的最後一個元素

補充：回傳值為被移除的元素

1
2
3
const arr = [1, 2, 3, 4]
console.log(arr.pop()) // 4
console.log(arr)  // [1, 2, 3]

Array.unshift(element1, [element2, [element3, ...]]) 新增元素到陣列開頭

補充：回傳值為新的陣列長度

1
2
3
const arr = [3, 4]
console.log(arr.unshift(1, 2)) // 4
console.log(arr)  // [1, 2, 3, 4]

Array.shift() 移除陣列的第一個元素

補充：回傳值為被移除的元素

1
2
3
const arr = [1, 2, 3, 4]
console.log(arr.shift()) // 1
console.log(arr)  // [2, 3, 4]
實作陣列內建函式 字元是可以比大小的
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×