剛寫 javascript 的時候,永遠只會用 forEach 一招打到底,某天看了線上課程,才發現有 some、findIndex、every 這些陌生面孔,能夠縮短不少程式碼(懶人福音),因此想要寫一篇關於陣列的操作方法筆記。
includes 以前要判斷陣列裡面是否含有某個特定元素,習慣用 indexOf 來處理,現在用 includes 就直覺方便了,有包含的話就會 return true!
1 2 3 4 5 6 7 8 9 10 11 let array = ["one" , "two" , "three" ];let target = "two" ;if (array.indexOf (target) > -1 ) { } if (array.includes (target)) { }
indexOf(value) 尋找目標對象在陣列中的索引值,如果找不到的話就會回傳-1
1 memberList.indexOf ("Jack" );
lastIndexOf(value) 取指定對象最後一個出現的索引值,如果找不到的話就會回傳-1
1 2 3 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];let lastPosition = student.lastIndexOf ("Tom" );console .log (lastPosition);
slice
begin : 起始的 index ,若為-1 則代表從倒數第一個開始算
end: 結束的 index ,若不填則代表選取到陣列最後一個元素
1 2 3 4 5 6 7 8 let list = ["green" , "olive" , "steelblue" , "yellow" ];let target = list.slice (0 , 2 );console .log (target);let all = list.slice (0 );console .log (all);
splice 1 splice (begin, deleteCount, addItem);
begin: 起始 index 若為-1,則代表從倒數第一個開始算
deleteCount: 要刪除的個數
addItem: 要添加的元素
當陣列經過 splice 的處理之後,原陣列也會跟著改變。
1 2 3 4 5 6 7 8 let list = ["green" , "olive" , "steelblue" , "yellow" ];let newArr = list.splice (0 , 2 , "lightPink" );console .log (newArr);let target = list.slice (1 , 2 );console .log (target);
forEach 大家最熟悉的 forEach,遍歷的好朋友,年輕不懂事的時候在裡面寫 return 結果美丁美當,那個…要 return 值的話請用 map
1 2 3 4 5 6 7 8 9 10 11 12 13 let list = ["green" , "olive" , "steelblue" ];let arr = [];list.forEach ((item ) => { arr.push (item); }); console .log (data);let data = list.forEach ((vo ) => { return vo; }); console .log (data);
map 1 2 3 4 5 6 7 8 9 10 工廠的概念,陣列的元素會被逐一加工,最後返回一個全新的陣列。 let student = ['Tom' ,Marry ',' Waston ',' Petter '] let result = student.map(item =>{ return `**${item}**` }) console.log(result) //output :[' **Tom **', ' **Marry **', ' **Waston **', ' **Petter **']
filter 過濾符合條件想要篩選出來的對象,若沒有則回傳空陣列
1 2 3 4 5 6 7 8 let family = ["Tom" , "Marry" , "Waston" , "Petter" ];let res = family.filter ((item ) => { return item.includes ("o" ); }); console .log (res);
find 一開始我以為他跟 filter 差不多,但實際上 filter 可以回傳一個陣列包含多個符合條件的對象,find 則是只能回傳第一個符合條件的項目,沒有的話則 return undefined
1 2 3 4 5 6 7 let family = ["Tom" , "Marry" , "Waston" , "Petter" ];let = family.find ((item ) => { return item.endsWith ("n" ); }); console .log (res);
toString 其實我一直不知道 array 有這個方法…都是習慣用 join()
1 2 3 4 let family = ["Tom" , "Marry" , "Waston" , "Petter" ];let str = family.toString ();console .log (str);
join 將陣列裡的項目組成字串,可指定間隔字串
1 2 3 4 let family = ["Tom" , "Marry" , "Waston" , "Petter" ];let str = family.join ("!" );console .log (str);
isArray 判斷是否為陣列
1 2 3 4 let list = ["tea" , "soda" , "water" ];var res = Array .isArray (list);console .log (res);
some 是否部份符合條件,只要有一個對象符合 就 return true
1 2 3 4 5 6 let list = ["tea" , "soda" , "water" ];let res = list.some ((item ) => { return item.length >= 5 ; }); console .log (res);
every 陣列的每一個項目是否符合條件,只要有一個對象不符合,就 return false
1 2 3 4 5 6 let list = ["tea" , "soda" , "water" ];let res = list.every ((item ) => { return item.length == 3 ; }); console .log (res);
findIndex 尋找目標對象的 index
1 2 3 4 5 6 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];let res = student.findIndex ((item ) => { return item == "Marry" ; }); conole.log (res);
lastIndexOf 取指定對象最後一個出現的位置的 index ,好比是隊伍中排了三隻小火龍,我們取最後一隻出現的 index。
1 2 3 4 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];let lastPosition = student.lastIndexOf ("Tom" );console .log (lastPosition);
sort 將陣列由小到大排序,字母的話按照 a-z,如果沒有帶入 function,就會將陣列每個項目轉換成字串來比對,不過這裡就會發現一個問題,為甚麼 300 會排在 55 的前面?因為以比對字串來說,300 的「3」小於 55 的「5」,因此才會出現 300 比 55 還小的這種詭異情形。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 let family = ["Tom" , "Marry" , "Waston" , "Petter" ];let list = family.sort ();console .log (list);let num = [12 , 25 , 55 , 300 ];let order = num.sort ();console .log (order);num.sort ((prev, next ) => next - prev); console .log (num);num.sort ((prev, next ) => prev - next); console .log (num);
reverse 反轉陣列的順序
1 2 3 4 let member = ["Tom" , "Marry" , "Waston" , "Petter" ];let res = member.reverse ();console .log (res);
concat 將多個陣列串聯成同一個陣列
1 2 3 4 5 6 let teamA = ["Tom" , "Marry" , "Waston" , "Petter" ];let teamB = ["Kevin" , "Joe" , "Vicky" , "Roy" ];let teamAll = teamA.concat (teamB);console .log (teamAll);
keys 獲得一個陣列的所有 key,也就是 index
1 2 3 4 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];let num = keys (student);console .log (num);
valueOf 可以複製一個新陣列,但這邊實際測試如果修改 newArr 的值,其實 student 也會改變
1 2 3 4 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];let newArr = student.valueOf ();console .log (newArr);
fill 填滿的概念,把大家通通變成指定的形狀(?),會改變原本的陣列
1 2 3 4 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];var res = student.fill ("shane" );console .log (res);
reduce 將陣列的元素傳入 callback 處理,最後陣列會化作單一值,這邊引用了 MDN 的說明。
1 2 3 4 array.reduce ( callback (accumulator, currentValue, currentIndex, arr), initialValue );
用來累積回呼函式回傳值的累加器(accumulator)或 initialValue
。累加器是上一次呼叫後,所回傳的累加數值。
原陣列目前所迭代處理中的元素。
原陣列目前所迭代處理中的元素之索引。若有傳入 initialValue
,則由索引 0 之元素開始,若無則自索引 1 之元素開始。
呼叫 reduce()
方法的陣列。
於第一次呼叫 callback
時要傳入的累加器初始值。若沒有提供初始值,則原陣列的第一個元素將會被當作初始的累加器。假如於一個空陣列呼叫 reduce()
方法且沒有提供累加器初始值,將會發生錯誤
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 let array = [1 , 2 , 3 , 4 ];let reducer = (accumulator, currentValue ) => accumulator + currentValue;console .log (array.reduce (reducer));console .log (array.reduce (reducer, 5 ));因此用 reduce 來找陣列裡面最大或是最小的數字也是很方便的 let array = [1 , 2 , 3 , 4 ];let res = array.reduce ((accumulator, currentValue )=> { return Math .max (accumulator, currentValue) }) console .log (res)
reduceRight 跟 reduce 差不多,不過順序變成由右至左,如果是做數字加總那結果是一樣的,如果是組字串那就可以看得出差異。
1 2 3 4 5 6 7 8 9 10 let array = ["a" , "b" , "c" , "d" , "e" ];let left = array.reduce ((prev, cur ) => { return prev + cur; }); let right = array.reduceRight ((prev, cur ) => { return prev + cur; }); console .log (left); console .log (right);
entries 回傳陣列中每組(key, value)迭代器(Iterator)
1 2 3 4 5 6 7 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];let res = student.entries ();console .log (res)[ (0 , "Tom" ) ][(1 , "Marry" )][(2 , "Waston" )][(3 , "Tom" )];
from 可以將類陣列轉換成陣列 Ex(map),這邊引用了 MDN 的說明
1 from (arrayLike, mapFn, this );
類陣列(array-like)物件(物件具有 length
屬性以及索引化(indexed)的元素)或
mapFn(非必填) 可以傳入 map function 來做進一步的處理
this(非必填) mapFn
函式執行時的 this
對象。
假如今天我想要建立一個數字 1–99 的陣列可以怎麼做?一個一個慢慢寫當然是可以,只是寫完可能就天黑了,使用 Array from 搭配 map 一行輕鬆搞定
1 Array .from ({ length : 99 }, (v, i ) => i + 1 );
copyWithin 1 copyWithin (target, start, end);
target ( 必填 ):先指定好要塞的位置
start: ( 非必填,預設 0 )然後決定要塞進的對象(從哪裡開始複製
end:( 非必填,預設等於陣列長度 )複製到哪個元素的前一個位置為止
1 2 3 4 5 6 7 8 9 let student = ["Tom" , "Marry" , "Waston" , "Tom" ];let res = student.copyWithin (0 , 2 , 3 );console .log (res);let result = student.copyWithin (-2 , 1 );console .log (result);
flat 函數以遞迴方式將特定深度的子陣列重新串接成為一新的陣列,會傳入參數來指定巢狀陣列展開的深度 沒有傳的話預設是 1。這邊引用了 MDN 的說明
1 2 3 4 5 6 7 8 9 10 11 let arr1 = [1 , 2 , [3 , 4 ]];arr1.flat (); let arr2 = [1 , 2 , [3 , 4 , [5 , 6 ]]];arr2.flat (); let arr3 = [1 , 2 , [3 , 4 , [5 , 6 ]]];arr3.flat (2 );
of 將傳入的參數 彙整成陣列
1 2 3 4 5 Array .of ("kappa" );Array .of (1 , 2 , 3 );
這次在整理的過程中,意外發現有這麼多方法可以用,當然有些是比較新的語法,還是要注意舊款瀏覽器是否支援的問題,不過有了這些方法,真的方便不少啊~