Javascript陣列常用方法你都知道嗎

2022-02-21 19:00:09

我用這些方法主要從五個方面去學習。

1.方法是幹什麼的。

2.誰能用 (當然是陣列啦)。

3.有沒有返回值，返回值是什麼。

4.修不修改原來的物件。

5.如何使用。

接下來就是乾貨了。

1.push 向陣列內新增一個或多個元素，新增到陣列的最後面，方法返回值是新陣列的長度。

arr.push(200)
arr.push(200,2,32)

2.pop 刪除陣列末尾的一個元素，不需要傳參，方法返回值是被刪除的元素。

arr.pop()

3.unshift 向陣列中新增一個或多個元素，新增到最前面，返回值是新陣列的長度。

arr.unshift(1)arr.unshift(1,2)arr.unshift(1)
arr.unshift(1,2)

4.shift 刪除陣列最前面的一個元素返回值是被刪除的元素。

arr.shift()

5. concat 拼接兩個陣列，返回拼接後的陣列，原陣列不變。

let arr1 = [1,2]
let arr2 = [2,3]
arr1.concat(arr2)
console.log(arr1); // [1,2]
console.log(arr1.concat(arr2)); // [1,2,2,3]

6. reverse 陣列顛倒，返回顛倒後的陣列，原陣列改變。

arr.reverse()

7.slice 陣列的擷取，包括開頭，不包括結尾，返回擷取後的陣列，原陣列不變。

let arr = [1,2,3,4,5,6]
// 填兩個引數 a,b 從a擷取到b 不包括b
// 填一個引數 a 從a擷取到末尾
// 不填引數 從0擷取到最後
//擷取arr 裡面的 3-5 也就是陣列下標2-4 但是第二個引數不包括 所以就是 2-5
arr.slice(2,5)

8.splice 陣列的新增或者刪除，返回被刪除的元素組成的陣列，原陣列改變。

//用法 splice(a,b,c)
//a 表示新增或者刪除的開始的下標
//b 表示刪除的個數 不想刪除只想新增 b寫成0
//c 表示新增的元素 新增的元素可以是多個 c,d,e 不新增就不用寫c
var arr = [1,2,3,4,5,6]
// 把4刪除 換成10
arr.splice(3,1,10)

9.join 將陣列內的所有元素以某個值進行字串拼接，預設是以 , 拼接。返回值是拼接的字串，原陣列不變。

let arr = [1,2,3,4,5,6]
arr.join()
arr.join('-')

10.indexOf 檢測陣列中是否存在某個元素，存在的話返回第一次找到的下標，不存在返回 -1，原陣列不變。

let arr = [1,2,3,4,5,6]  
let ind = arr.indexOf(5)

11.lastIndexOf 和 indexOf用法一樣，從陣列後面開始找。

12.includes 檢測陣列中是否存在某個元素存在返回 true 不出在返回false 用法和indexOf一樣。

13.sort 對陣列進行排序，返回排序後的陣列，原陣列改變。

// 漢字看筆畫 英文字母看因為字母順序
// 預設排序是按照首字元的順序開始排序的
let arr = [2,3,5,4,9,6]
arr.sort()
//sort可以寫函數
// a,b 代表的就是陣列中相鄰的兩個數
// 從小到大排
arr.sort(function(a,b){
    return a - b
})

14.every 檢測陣列內的所有元素是否滿足某個條件，有一個必須引數，返回值是布林值。

let arr = [100,15,50,110]
let myarr = arr.every(function(el){
    return el>14
})
console.log(myarr) //true

15.some 檢測陣列內是否有元素滿足某個條件，有一個必須引數，返回值是布林值。

var arr = [100,15,50,110]
var myarr1 = arr.some(function(el){
      return el>100
})
console.log(myarr1) //true

16.find 返回陣列中匹配的第一個元素的值，沒有返回 undefined，有一個必須引數。

var arr = [100,15,50,110]
var myarr2 = arr.find(function(el){
      return el > 10
})
console.log(myarr2) // 100

17.findIndex 方法同find 返回值是對應的索引值。

18.filter 返回符合條件的元素形成一個新陣列，返回值是一個陣列

var arr = [100,15,8,50,110]
var myarr3 = arr.filter(function(el){
      return el<18
})
console.log(myarr3) //[15,8]

19.map 建立一個陣列，該陣列中每個元素是呼叫過函數之後返回的值。

var arr = [100,15,8,50,110]
var arr5 = arr.map(function(el){
    return el*1+5   
})
console.log(arr5); //[105, 20, 13, 55, 115]

20.reduce 用這個方法可以實現以上的所有方法比如陣列內數累加，返回值是單個數

// reduce(函數,最終結果的初始值)
// 每次遍歷的函數，有四個參，每次查詢陣列的元素時執行的函數
// function(res,ele,index,array)
// res 結果變數
// ele 陣列內元素
// index 對應的索引
// array 原陣列
// 必須設定返回值，上一次返回的值是res的值，最後返回值是最終結果，也是reduce函數的返回值。
let arr = [100,15,8,50,110]
// res 是自己創的累加器 ele是當前值
let total = arr.reduce(function(res,ele){
    return res + ele
},0)

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容!

Javascript陣列常用方法你都知道嗎

總結

熱門文章