JS對陣列的處理(包含ES6)
JS有很多處理陣列的方法,這些方法都是Array內建物件的方法。該文章是對這些方法的用途的總結,方便翻閱,並不提供具體使用示例。
眾所周知,陣列是引用型別,所以我把這些方法分為兩類,一類是直接對原陣列操作,會改變原陣列的方法,另一類是返回一個副本,對這個副本的操作不會改變原陣列的方法。另外,我把ES6新增方法放在後面列出來。
一、會改變原陣列的方法
1.splice(index,num,addItem),第一個引數表示從哪裡開始刪除,第二個引數表示刪除的個數,第三個引數表示新增的新內容,前兩個引數是必須的,第三個引數可選。返回值為從原始陣列中刪除的項。不傳引數時,會返回空陣列。但是在vue中,有一個新用法,example1.items.splice(newLength),這個程式碼可以修改陣列長度。
2.push()方法向陣列末端新增元素,並返回修改後的陣列長度。
3.pop()方法從陣列末尾移除一項,並返回被移除的項。
4.shift()方法移除陣列第一項,並返回該項。
5. unshift()方法向陣列前端新增一項,並返回新陣列的長度。
6.sort()方法,預設呼叫每個陣列項的toString()方法,然後比較得到的字串,無論什麼型別的陣列項,比較的都是字串。
還可以接收一個比較函式作為sort方法的引數,用來對陣列元素進行排序。高階教程93頁
二、不會改變原陣列的方法
1.slice(start,end),第一個引數表示從哪裡開始擷取陣列,第二個引數表示從哪裡結束,返回陣列為原陣列從start到end-1的項。當start和end為負數時,表示從末尾計算的索引值,-1表示最後一個,以此類推。不傳引數時,會返回原陣列。藉助 var otherArr = oneArr.slice();可以獲得oneArr的一個副本,修改otherArr,不會改變oneArr。
2. concat(),陣列的合併。
3.reverse(),陣列成員的順序反轉,不會改變原陣列,字串不能“借用”這個方法(大部分陣列方法,字串可以通過call來借用,包括map、join)
4. indexOf,這本身是一個字串方法,從ES5開始,陣列支援該方法
5.五個迭代方法,forEach沒有返回值;every和some查詢陣列中的項是否滿足某個條件,返回布林值;filter對原陣列過濾;map返回對應於原陣列的新陣列。
①every(),對陣列的每一項執行函式,對每一項都返回true時,該方法返回true,如果陣列有空位,會忽略
②filter(),對陣列的每一項執行函式,該方法返回結果為true的項(原陣列中的項)組成的新陣列。如果陣列有空位,會忽略
③forEach(),對陣列每一項執行函式,沒有返回值。如果陣列有空位,會忽略
④map(),對陣列的每一項執行函式,返回值為執行函式的結果(不是原陣列的項)組成的新陣列。如果陣列有空位,會忽略,但保留這個空位
⑤some(),對陣列的每一項執行函式,對任意一項返回true,則該方法返回true。如果陣列有空位,會忽略
6. reduce()和reduceRight()方法,這兩個方法的區別只是從陣列的哪一頭開始遍歷陣列,其餘一樣。高階教程98頁
7.join(),以傳入的字元為間隔,連線陣列每一項,返回為字串,若有空位,視作undefined(undefined和null又會被當做空字串)
ES6新增方法
1.Array.from(arrayLike,operateFun),該方法用來把類陣列物件轉換為陣列,返回值為這個新陣列,後續對新陣列的操作不會改變原來的類陣列物件
該方法可以把任何具有length屬性的物件轉化為陣列,也就是說,arrayLike引數甚至可以接受字串作為引數。
operate引數規定轉換規則,類似於map方法的函式引數
2.Array.of(),該方法將一組值轉換為陣列,基本上可以替代陣列的建構函式:new Array()或者 Array(),因為之前的陣列建構函式,根據引數的個數不同,行為也不相同,在不同瀏覽器上表現出來的也有差異。Array.of()則直接返回引數值組成的陣列。
3.find(fn,bindThis),findIndex(fn,bindThis),找出第一個符合條件的成員、成員位置
4.fill(value,start,end),將陣列指定位置的元素填充為value,不傳start,end,則全部填充,
5.copyWithin(target,start,end),將start到end的成員複製到target位置
console.log([1,2,3,4,5].copyWithin(3,2));//1,2,3,3,4