JS 筆記 | Array 操作篇

最近開始面試兼刷 leetcode，除了深感演算法與資料結構之重要，對於自己熟悉的程式語言的基本操作同樣也要熟稔於心，對，我就是在說你 JavaScript。

JavaScript 中使用的資料很常以陣列 (array) 或物件 (object) 或兩者一同出現的方式現身，所以陣列操作、物件操作就很重要。因為最近遇到比較多陣列的題目，所以來寫個陣列的操作筆記。

在一切開始前，先來創個陣列吧！

let numbers = [1, 2, 3, 4, 5, 6, 7, 8]

新增

1. push，往陣列後加元素：來把 9 和 10 加上去吧！

numbers.push(9, 10)
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2. unshift，往陣列前方加元素：來把 -1 和 0 加上去吧！

numbers.unshift(-1, 0)
console.log(numbers) // [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8]

3. []，直接指定元素添加或更改位置：來把 6 變成 six 吧！

numbers[5] = 'six'
console.log(numbers) // [1, 2, 3, 4, 5, 'six', 7, 8]

刪除

1. pop，刪除陣列後方一個元素並回傳刪掉的值：來把 8 刪掉吧！

const removeNum = numbers.pop()
console.log(removeNum)  // 8
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7]

2. shift，刪除陣列前方一個元素並回傳刪掉的值：來把 1 刪掉吧！

const removeNum = numbers.shift()
console.log(removeNum)  // 1
console.log(numbers) // [2, 3, 4, 5, 6, 7, 8]

3. delete，刪除陣列指定位置元素，但不影響陣列長度：來把 6 刪掉吧！

delete numbers[5]
console.log(numbers) // [1, 2, 3, 4, 5, <empty>, 7, 8]

裁切

1. splice(start, delete, insert)，對原陣列直接做裁切並傳回裁切的部分。接受三個參數，第一個是要刪除或插入的索引位置；第二個是刪除的元素數，0是不刪除只插入，不填是刪除索引位置後所有元素；第三個是要插入的值。
   來把 6 和 7 刪掉變成 six 和 seven 吧！

const spliceValue = numbers.splice(5, 2, 'six', 'seven')
console.log(spliceValue) //[6, 7]
console.log(numbers) // [1, 2, 3, 4, 5, 'six', 'seven', 8]

2. slice(start, end)，不修改原陣列，而是會回傳新陣列 (原陣列中的一部分)。接受兩個參數，第一個是開始的位置；第二個是結束的位置，不代入參數就會提取到最後一筆資料，代入負數表示提取到倒數第幾個資料；都不帶參數會複製一個完整陣列。
   我們來把 3, 4, 5 取出來吧！

const newNumbers = numbers.slice(2, 5)
console.log(newNumbers) // [3, 4, 5]

3. copyWithin(index, start, end)，會修改原陣列的操作方式。語法內容是把 start 到 end 位置中的內容複製下來，然後從 index 的位置貼上覆蓋原本的內容。
   我們來用 6, 7, 8 蓋掉 2, 3, 4 吧！

numbers.copyWithin(1, 5, 8)
console.log(newNumbers) // [1, 6, 7, 8, 5, 6, 7, 8]

排序

1. sort，顧名思義就是排序，會操作原陣列。參數可以接受自己寫的函式，也建議自己簡短寫一個函式，因為不帶參數的 sort 表現有點一言難盡...。

// 先創個混亂排序陣列
let newNumbers = [10, 5, 8, 2, 4, 1, 0]

// 單純用 sort() 不帶參數
newNumbers.sort()
console.log(newNumbers) //[0, 1, 10, 2, 4, 5, 8]

// 讓我們寫個函式代入參數
const Sorting = (a, b)=>{
  if(a > b){
    return 1
  }else if(a < b){
    return -1
  }else{
    return 0
  }
}
newNumbers.sort(Sorting)
console.log(newNumbers) //[0, 1, 2, 4, 5, 8, 10]

2. reverse，將陣列倒轉。

numbers.reverse()
console.log(numbers) // [8, 7, 6, 5, 4, 3, 2, 1]

篩選與搜尋

1. filter，會回傳一個符合條件的新陣列。接受一個 callback 函式做為參數，該函式又接受三個參數：item, index, array。
   – item：正在被處理的元素
   – index：當前元素的索引位置
   – array：正在遍歷的陣列
   現在，來把 >5的數字取出來吧！

const filterNum = numbers.filter((item)=>{
  return item > 5
})
console.log(filterNum) // [6, 7, 8]

2. find，跟filter類似，但返回的是符合後方條件的第一個值。現在代入跟上面filter一樣的條件：

const findNum = numbers.find((item)=>{
  return item > 5
})
console.log(findNum) // 6

3. indexOf，查詢某元素的陣列索引位置。帶兩個參數，第一個是查尋的元素，第二個是要開始查詢的位置。現在來找找 6 的索引位置吧！

const index = numbers.indexOf(6)
console.log(index)  // 5

4. includes，查詢陣列中是否帶有某元素。所帶參數跟indexOf一樣。

console.log(numbers.includes(6)) // true

迭代

1. forEach，可以看做是陣列的迴圈，不會修改原陣列也不會回傳任何值，就僅僅是依開發者想要對陣列中的元素做什麼操作。
   現在，來把數字都乘以 2 並放進新陣列中。

let doubleNumbers = []

numbers.forEach((number)=>{
  let newNum = number * 2
  return doubleNumbers.push(newNum)
})

console.log(doubleNumbers) // [2, 4, 6, 8, 10, 12, 14, 16]

2. map，跟forEach不一樣，它會回傳一個新陣列。上述的內容改成map會變這樣：

const doubleNumbers = numbers.map((number)=>{
  return number * 2
})

console.log(doubleNumbers) // [2, 4, 6, 8, 10, 12, 14, 16]

3. reduce，是陣列計算的一大幫手。它接受兩個參數，一個是 callback function，一個是預設值。
   – callback function：
   – accumulator：目前計算後的值。
   – currentValue：正在處理的元素。
   – currentIndex：當前元素的索引位置。
   – array：當前操作的陣列。
   – initialValue：預設值，不提供會默認第一個元素的值為預設值。
   現在我們來累加 numbers 吧！

const sum = numbers.reduce((x, y)=>{
  return x + y
})

console.log(sum) // 36

4. every，用來檢查陣列中的元素是否都滿足特定條件，如果只想要部分滿足可以改成some。我們來試試條件代入 >6 吧！

console.log(numbers.every(number => number > 6)) // false，不是每個數字都大於6
console.log(numbers.some(number => number > 6)) // true，有一些數字大於6

刪除重複

先來建立一個有重複數字的陣列吧！

let numbers = [1, 2, 3, 4, 4, 4, 5, 6, 7, 8, 8, 8]

1. filter，對，filter可以做到刪除重複，但因為filter是返回一個新陣列，在實務上運作會比下面的set方法慢。

const newNumbers = numbers.filter((item, index)=>{
  return numbers.indexOf(item) === index
})

console.log(newNumbers) // [1, 2, 3, 4, 5, 6, 7, 8]

2. set，快速解決重複的方法，因為對原陣列直接執行操作不產生新陣列，速度通常比filter快，推推！

numbers = [...new Set(numbers)]

console.log(numbers) // [1, 2, 3, 4, 5, 6, 7, 8]

合併

1. concat，用來合併複數陣列。

let secondNumbers = [9, 10, 11]

let newNumbers = numbers.concat(secondNumbers)

console.log(newNumbers) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

陣列轉字串

1. join，裡面帶分隔符，不指定會以逗號隔開。現在來試試吧！

let string = numbers.join()
console.log(string) // 1,2,3,4,5,6,7,8

let string = numbers.join('')
console.log(string) // 12345678

let string = numbers.join(' ') // 帶空格
console.log(string) // 1 2 3 4 5 6 7 8 

參考資源

1. 實用 Array 陣列操作大全
2. JS Array 刪除重複元素的三種方式
3. JavaScript 大全 (第七版) / David Flanagan / 歐萊禮出版