最近開始面試兼刷 leetcode，除了深感演算法與資料結構之重要，對於自己熟悉的程式語言的基本操作同樣也要熟稔於心，對，我就是在說你 JavaScript。
JavaScript 中使用的資料很常以陣列 (array) 或物件 (object) 或兩者一同出現的方式現身，所以陣列操作、物件操作就很重要。因為最近遇到比較多陣列的題目，所以來寫個陣列的操作筆記。
在一切開始前，先來創個陣列吧！let numbers = [1, 2, 3, 4, 5, 6, 7, 8]
新增
push，往陣列後加元素：來把 9 和 10 加上去吧！
numbers.push(9, 10)
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
unshift，往陣列前方加元素：來把 -1 和 0 加上去吧！
numbers.unshift(-1, 0)
console.log(numbers) // [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8]
[]，直接指定元素添加或更改位置：來把 6 變成 six 吧！
numbers[5] = 'six'
console.log(numbers) // [1, 2, 3, 4, 5, 'six', 7, 8]
刪除
pop，刪除陣列後方一個元素並回傳刪掉的值：來把 8 刪掉吧！
const removeNum = numbers.pop()
console.log(removeNum) // 8
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7]
shift，刪除陣列前方一個元素並回傳刪掉的值：來把 1 刪掉吧！
const removeNum = numbers.shift()
console.log(removeNum) // 1
console.log(numbers) // [2, 3, 4, 5, 6, 7, 8]
delete，刪除陣列指定位置元素，但不影響陣列長度：來把 6 刪掉吧！
delete numbers[5]
console.log(numbers) // [1, 2, 3, 4, 5, <empty>, 7, 8]
裁切
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]
slice(start, end)，不修改原陣列，而是會回傳新陣列 (原陣列中的一部分)。接受兩個參數，第一個是開始的位置；第二個是結束的位置，不代入參數就會提取到最後一筆資料，代入負數表示提取到倒數第幾個資料；都不帶參數會複製一個完整陣列。
我們來把 3, 4, 5 取出來吧！
const newNumbers = numbers.slice(2, 5)
console.log(newNumbers) // [3, 4, 5]
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]
排序
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]
-
reverse，將陣列倒轉。
numbers.reverse()
console.log(numbers) // [8, 7, 6, 5, 4, 3, 2, 1]
篩選與搜尋
filter，會回傳一個符合條件的新陣列。接受一個 callback 函式做為參數，該函式又接受三個參數：item, index, array。
– item：正在被處理的元素
– index：當前元素的索引位置
– array：正在遍歷的陣列
現在，來把 >5的數字取出來吧！
const filterNum = numbers.filter((item)=>{
return item > 5
})
console.log(filterNum) // [6, 7, 8]
find，跟filter類似，但返回的是符合後方條件的第一個值。現在代入跟上面filter一樣的條件：
const findNum = numbers.find((item)=>{
return item > 5
})
console.log(findNum) // 6
-
indexOf，查詢某元素的陣列索引位置。帶兩個參數，第一個是查尋的元素，第二個是要開始查詢的位置。現在來找找 6 的索引位置吧！
const index = numbers.indexOf(6)
console.log(index) // 5
-
includes，查詢陣列中是否帶有某元素。所帶參數跟indexOf一樣。
console.log(numbers.includes(6)) // true
迭代
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]
map，跟forEach不一樣，它會回傳一個新陣列。上述的內容改成map會變這樣：
const doubleNumbers = numbers.map((number)=>{
return number * 2
})
console.log(doubleNumbers) // [2, 4, 6, 8, 10, 12, 14, 16]
reduce，是陣列計算的一大幫手。它接受兩個參數，一個是 callback function，一個是預設值。
– callback function：
– accumulator：目前計算後的值。
– currentValue：正在處理的元素。
– currentIndex：當前元素的索引位置。
– array：當前操作的陣列。
– initialValue：預設值，不提供會默認第一個元素的值為預設值。
現在我們來累加 numbers 吧！
const sum = numbers.reduce((x, y)=>{
return x + y
})
console.log(sum) // 36
-
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]
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]
-
set，快速解決重複的方法，因為對原陣列直接執行操作不產生新陣列，速度通常比filter快，推推！
numbers = [...new Set(numbers)]
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7, 8]
合併
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]
陣列轉字串
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
參考資源
- 實用 Array 陣列操作大全
- JS Array 刪除重複元素的三種方式
- JavaScript 大全 (第七版) / David Flanagan / 歐萊禮出版
