js陣列應用筆記

有感於一陣子沒碰js就會忘記陣列操作方法,這裡再次筆記複習一下

找陣列中的元素

indexOf,lastIndexOf,和find,findIndex以及includes都可以找元素,不同點在於找元素的方法與回傳的值不同

indexOf是給予元素值,回傳第一個吻合的元素所在位置,若-1就是找不到吻合的元素

selectedIds.indexOf(obj.id) === -1

lastIndexOf就是反過來找而已。

這裡要注意的就是indexOf和lastIndexOf是用===來判斷是否吻合元素，所以如果你是要判斷物件就需要用到find.findIndex

find是給予一個函數,用來找第一個吻合的元素本身;若null就是找不到吻合的元素

const selected = steps.find((s) => id === s.id);

findIndex跟find參數一樣,只是回傳吻合元素的所在位置

includes是給予元素值,用來確認元素是否在陣列中

selectedIds.includes(s.id)

新增元素

增加元素到陣列後方

有push和concat兩種選擇, 前者是加入原本的陣列,後者是產生新的陣列

selectedIds.concat(obj.id)

然後我也滿常偷懶像下面這樣做

[].concat(obj.id)

[obj.id]

以前寫C習慣則是都會寫下面這樣

let array = null;

if (null === array) array = [];

array.concat(obj.id);

關於哪些陣列方法是回傳新陣列,哪些是修改舊有的可以看由tsuifei所整理的"JS 從陣列 Array 尾端新增元素的 push()"中的圖片一覽無遺。

更新元素

可以用forEach,map,reduce去遍歷元素

forEach是對原本的陣列處理

map是更新元素並產生新陣列

const updated = origin.map((o) => o.setOffset(x, y));

reduce則是可以在遍歷時增加/減少元素,簡單來說就是forEach,map都可以用reduce去寫,有if-elese或想減少都是用reduce。你用map回傳undefined或null只會讓陣列元素裡頭有null跟undefined

取元素

取出陣列最後一個元素與其他元素

if (steps.length > 0) {

const lastOfSteps = steps[steps.length - 1];

const restOfSteps = steps.slice(0, steps.length - 1);

}

取出陣列第一個元素與其他元素

if (redoSteps.length > 0) {

const fisrtOfRedoSteps = redoSteps[0];

const restOfRedoSteps = redoSteps.slice(1, redoSteps.length);

}

過濾元素範例:

以id作為識別,只保留最後一個出現的元素

steps.reverse()

.filter((obj, pos, arr) => {

const id = obj.id;

// 如果是同id的第一個就保留

const idx = arr.findIndex((e) => e.id === id);

return idx === pos;

});