1. 程式人生 > 實用技巧 >js陣列一些方法

js陣列一些方法

1. indexOf

  用於查詢陣列中某一個元素第一次出現的腳標,沒有則返回-1

var arr = [1, 3 , 5]
            
var arr_indexOf = arr.indexOf(2)  // -1

2. push

  往陣列尾部新增一個元素,返回陣列的長度

  會改變原陣列

var arr = [1, 3 , 5]
              
var arr_push = arr.push(7) // 4  arr為[1, 3, 5, 7]

3. pop

  刪除陣列最後一個元素,返回被刪除的元素

  會改變原陣列

var arr = [1, 3 , 5]
            
var arr_pop = arr.pop() // 5 arr為[1, 3]

4. shift

  刪除陣列第一個元素,返回被刪除的元素

  會改變原陣列

var arr = [1, 3 , 5]
            
var arr_shift = arr.shift()   // 1  arr為[3, 5]

5. unshift

  往陣列中開始的位置插入一個元素,返回陣列長度
  會改變原陣列

var arr = [1, 3 , 5]
            
var arr_unshift = arr.unshift(8)  // 4   arr為[8, 1, 3, 5]

6. concat

  連線一個數組,返回一個新的陣列

  不會改變原陣列

const arr = [1, 3 , 5]
            
var arr_concat = arr.concat([[2, 4], 6])  // [1, 3, 5, [2, 4], 6]

7. some

  傳入一個回撥函式,回撥函式引數為陣列中的元素,當至少有一個元素滿足要求時返回true,反之則為false

  不會改變原陣列

var arr = [1, 3 , 5]
            
var arr_some = arr.some(item => item > 3) // true

8. every

  傳入一個回撥函式,回撥函式引數為陣列中的元素,當所有元素滿足要求時返回true,反之則為false(和some類似與/或的邏輯)

  不會改變原陣列

var arr = [1, 3 , 5]
            
var arr_every = arr.every(item => item > 3)  // false

9. splice

  arr.splice(a, b, c, ...)

  刪除陣列中從腳標a位置開始到腳標a + b的元素(左閉右開),並將剩餘引數從刪除位置插入到陣列中

  會改變原陣列

var arr = [1, 3 , 5]

var arr_splice = arr.splice(1, 1, 7, 9)  // [1, 5, 7, 9]

10. forEach

  陣列的迭代器,無返回值

  不會改變原陣列

var arr = [1, 3 , 5]
            
arr.forEach(item => console.log(item))

11. map

  陣列的迭代器,返回一個新的陣列

  不會改變原陣列

var arr = [1, 3 , 5]
            
var arr_map = arr.map(item => item + 1)  // [2, 4, 6]

12. sort

  陣列排序,傳入一個回撥函式,回撥函式第一個引數為腳標是n的元素,第二個引數為n+1的元素,有返回值,如果返回值小於0則改兩個元素互相替換位置

  會改變原陣列

var arr = [1, 5, 3]
            
var arr_sort = arr.sort((prev, next)=> prev - next)  

13. flat

  將一個二維陣列平鋪成一維陣列

  不會改變原陣列

var arr = [[1], [3, [4]], 5]
            
var arr_flat = arr.flat() // [1, 3, [4], 5]

14. flatMap

  將一個二維陣列平鋪成一維陣列,同時進行map操作,返回新的陣列

  會改變原陣列

var arr = [[1], [3], 5]
            
var arr_flatMap = arr.flatMap(item => item + 1)  // [2, 4, 6]

15. join

  返回一個以傳入引數為間隔拼接陣列元素的字串

  不會改變原陣列

var arr = [1, 3, 5]
            
var arr_join = arr.join('-')  // '1-3-5'

16. includes

  判斷陣列是否存在某個元素,返回布林值

var arr = [1, 3 , 5]
            
var arr_includes = arr.includes(2) // true

17. lastIndexOf

  返回陣列中最後一個出現目標元素的腳標

var arr = [1, 3 , 5]
            
var arr_lastIndexOf = arr.lastIndexOf(5)  // 2

18. slice

  切割陣列,返回一個新的陣列,第一個引數為起始位置,第二個引數為結束位置(如果為負數表示陣列長度 + 第二個引數),左開右閉

  不會改變原陣列

var arr = [1, 3, 5]
            
var arr_slice = arr.slice(1, 8) // [3, 5]

19. reverse

  將陣列元素倒敘排列

  會改變原陣列

var arr = [1, 3 , 5]
            
var arr_reverse = arr.reverse()  // [5, 3, 1]

20. find

  查詢陣列中符合要求的元素,傳入一個回撥函式,回撥函式引數為陣列的元素,並且將符合的元素返回,如果查詢不到,返回undefined (如果是查詢undefined,認為是查詢到了還是沒有呢)

  不會改變原陣列

var arr = [1, 3 , 5]

var arr_find = arr.find(item => item === 3) // 3

21. findIndex

  查詢陣列中符合要求的元素的腳標,傳入一個回撥函式,回撥函式引數為陣列的元素,並且將符合元素的腳標返回,如果查詢不到,返回-1

  不會改變原陣列

var arr = [1, 3, 5]
            
var arr_findIndex = arr.findIndex(item => item === 5)  // 2

22. filter

  過濾出符合要求的元素

  不會改變原陣列

var arr = [1, 3 , 5]
            
var arr_filter = arr.filter(item => item > 3) // [5]

23. copyWithin

  複製陣列中的元素,第一個引數為複製的開始位置,第二個為選擇複製內容的起始位置,第三個為複製內容的結束位置

  會改變原陣列

var arr = [1, 3 , 5]

var arr_copyWithin= arr.copyWithin(2) // [1, 3, 1]

24. fill

  將陣列中所有元素對映為

  會改變原陣列

var arr = [1, 3 , 5]
            
var arr_fill = arr.fill(2) // [2, 2, 2]

25. reduce reduceRight

陣列的疊加器,reduce按正序遍歷,reduceRight按倒序遍歷,第一個引數為回撥函式,【回撥函式第一個引數為上次回撥函式返回的結果,第二個引數為當前元素,第三個引數為當前元素腳標】, 第二個引數為初始值,reduce可以用於遍歷,

對映,疊加,功能比較強大,有興趣可以去研究研究redux實現原理

var arr = [1, 3 , 5]
            
var arr_reduce = arr.reduce((main, curr) => main + curr, 0)  // 9

var arr = [1, 3 , 5]var arr_lastIndexOf = arr.lastIndexOf(5)