JS中陣列常用方法總結

1、把陣列轉化為字串

toString() 把陣列一逗號分開，轉為陣列值的字串
join() 將所有陣列值合併生成一個字串，也可以指定分隔符

2、push()和pop()

• 在末尾增加元素
  push()

但是返回值是返回新的組成陣列的長度

• 直接刪除末尾的值
  pop() 返回一個”最後的值“

• push()和pop() 都是利用的棧的結構，後進先出 ，只是改變原來的陣列

3、shift()和unshift()

shift() 刪除首個數組值，返回第一個陣列值, 序號依次向前移動一位
unshift() 在一個增加陣列值，返回長度值, 序號依次向後移動

4、copyWithin()

語法： copyWithin(target，start， end)
target 必須，從該位置開始替換
start 可選，從位置開始讀取資料，預設為0
end 可選，到該位置之前停止讀取資料，預設是陣列的長度

let arr = [1,2,3,4,5,6]
let a = arr.copyWithin(1,4)   //表示從第下標為1的位置開始替換，從下標為4的陣列值開始替換,這裡省略了第三個引數（預設就是陣列末）
console.log(a)   //[1, 5, 6, 4, 5, 6]

5、delete()

let arr = [1,2,3]
elete(arr[0])   //這裡刪除第一個，但是位置還是保留著
console.log(arr[0])   //undefined
 

6、splice()

該方法向陣列新增或者刪除元素，返回被刪除的專案，並同時改變原素組
splice(index,howmany,item1,...itemX)
index引數：必須，整數，規定新增或者刪除的位置，使用負數，從陣列尾部規定位置。
howmany引數：必須，要刪除的數量，如果為0，則不刪除專案。
tem1,...itemX引數：可選，向陣列新增的新專案。

返回值：一個新的陣列

//增加元素

let arr = ['a', 'b', 'c']
// 下標為1的位置開始替換，後面的一次向後移動
//第二個引數為0， 就不表示刪除元素，只是新增元素
let a = arr.splice(1, 0, 'james')
console.log(arr)    //["a", "james", "b", "c"]
console.log(a)   // []
 

//增加元素和刪除元素

let arr = ['a', 'b', 'c']
// 下標為1的位置開始替換，後面的一次向後移動
//第二個引數為0， 就不表示刪除元素，只是新增元素
let a = arr.splice(1, 1, 'james')
console.log(arr)    //["a", "james", "c"]
console.log(a)   // ['b']

//獨特的用法

let array = [1,2,3,4,5];
let array2 = array.splice(3);
// 從下標3的位置開始刪除
// array [1,2,3]  
// array2  [4,5]

7、concat()

concat() 方法通過合併（連線）現有陣列來建立一個新陣列
方法不會更改現有陣列。它總是返回一個新陣列。
方法可以使用任意數量的陣列引數

//傳遞一個引數
let a = [1,2,3]
let b = [4]
let c = a.concat(b)
console.log(c)  //[1,2,3,4]

//傳遞兩個引數
let a = [1,2,3]
let d = [5]
let b = [4]
let c = a.concat(b, d)
console.log(c)  //[1, 2, 3, 4, 5]

8、slice()

slice() 方法用陣列的某個片段切出新陣列。
特點：返回一個新的陣列，不會改變原來的陣列

let a = [1,2,3]
let b = a.slice(2)
console.log(a)  // [1,2,3]  原來的陣列
console.log(b)  //[3]   返回的新陣列

9、sort()

• sort()不傳遞引數時，會以預設方式進行排序，就是以字母順序進行排序，準確的講就是按照字元編碼的順序進行排序。

let a = [1000,3,76,12,79]
let b = a.sort()
console.log(b)  //[1000, 12, 3, 76, 79]

• 傳遞引數，使陣列中按照順序排列，就需要自己寫一個函數了

let a = [1000,3,76,12,79]
let b = a.sort(function (a, b) {
    return b - a;
})
console.log(b)  //[3, 12, 76, 79, 1000]

• 陣列亂序

a.sort(function(a,b){
	return Math.random() - 0.5;
}

10、reverse()

反轉陣列

11、Math.max()和Math.min()

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

//Math.max.apply([1,2,3]) 等價於 Math.max(1,2,3)

12 、map()

引數：專案值（item, 必須）、專案索引（index, 可選）、陣列本身（arr, 可選）

map() 方法通過對每個陣列元素執行函式來建立新陣列。

map() 方法不會對沒有值的陣列元素執行函式。

map() 方法不會更改原始陣列。

let a = [1,2,3,4,5]
let b = a.map( x => x * 2)
console.log(a)   //[1, 2, 3, 4, 5]   原陣列
console.log(b)   //[2, 4, 6, 8, 10]  新陣列

13、forEach()

引數：專案值（item, 必須）、專案索引（index, 可選）、陣列本身（arr, 可選）

forEach會遍歷陣列, 沒有返回值, 不允許在迴圈體內寫return, 不會改變原來陣列的內容

forEach()也可以迴圈物件。

let a = [1,2,3,4,5]
a.forEach( x => console.log(x) )

14、filter()

filter 會過濾掉陣列中不滿足條件的元素, 把滿足條件的元素放到一個新陣列中, 不改變原陣列

引數：專案值（item, 必須）、專案索引（index, 可選）、陣列本身（arr, 可選）

結果：返回一個新的陣列

let a = [1,2,3,4,5]
let b= a.filter(function (x) {
    return x > 3
})
console.log(b)  //[4,5]

15、reduce()

reduce() 方法在每個陣列元素上執行函式，以生成（減少它）單個值。

reduce() 方法在陣列中從左到右工作。

reduce() 方法不會改變原始陣列。

引數：總數（初始值/先前返回的值）、專案值（item, 必須）、專案索引（index, 可選）、陣列本 身（arr, 可選）

et array = [1, 2, 3, 4];
let temp = array.reduce((x, y) => {
	return x + y;
});
console.log(temp);　　// 10
console.log(array);　　// [1, 2, 3, 4]

//x 是上一次計算過的值, 第一次迴圈的時候是陣列中的第1個元素
//y 是陣列中的每個元素, 第一次迴圈的時候是陣列的第2個元素

16、every()

引數：專案值（item, 必須）、專案索引（index, 可選）、陣列本身（arr, 可選）

every遍歷陣列, 每一項都是true, 則返回true, 只要有一個是false, 就返回false

let array = [1, 2, 3, 4];
let res = array.every((item, index, array) => {
　　return item > 2;
});
console.log(res);   //false

17、some()

引數：專案值（item, 必須）、專案索引（index, 可選）、陣列本身（arr, 可選）

some遍歷陣列, 只要有一個是true, 就返回true

let array = [1, 2, 3, 4];
let res = array.every((item, index, array) => {
　　return item > 2;
});
console.log(res);   //true

以上6種方法注意

以上均不改變原陣列。
some、every返回true、false。
map、filter返回一個新陣列。
reduce讓陣列的前後兩項進行某種計算，返回最終操作的結果。
forEach 無返回值。

18、indexOf() 和 lastindexOf()

indexOf(n) 檢查n第一次出現的下標位置

lastIndexOf(n) 檢查最後一次出現的下標位置

 let a = [1,2,3,2,3]
 console.log(a.indexOf(1))   //0
console.log(a.lastIndexOf(3)) //2

19、includes()

用法：includes()方法用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false。 （ES6新增的）

20、find()

find()方法，用於找出第一個符合條件的陣列成員。它的引數是一個回撥函式，所有陣列成員依次執行該回調函式，直到找出第一個返回值為true的成員，然後返回該成員。如果沒有符合條件的成員，則返回undefined。

引數：專案值（item, 必須）、專案索引（index, 可選）、陣列本身（arr, 可選）

 let a = [1,2,3,4,5]
 let c = a.find(function (x) {
     return x > 2
 })
 console.log(c) //3

21、findIndex()

findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的陣列成員的位置，如果所有成員都不符合條件，則返回-1。

let a = [1,2,3,4,5]
let c = a.findIndex(function (x) {
    return x > 6
})
console.log(c)

22、fill()

ES6為Array增加了fill()函式，使用制定的元素填充陣列，其實就是用預設內容初始化陣列。

引數：

​ arr.fill(value, start, end)

​ value：填充的值

​ start： 開始的下標值

​ end：結束的下標值

//傳遞三個引數

let a = [1,2,3,4,5]
let b = a.fill(6,1,4)
console.log(b)   //[1, 6, 6, 6, 5]

//傳遞兩個引數，那麼最後一個值就是到陣列的末尾

let a = [1,2,3,4,5]
let b = a.fill(6,1)
console.log(b)   //[1, 6, 6, 6, 6]

//傳遞一個引數

let a = [1,2,3,4,5]
let b = a.fill(6)
console.log(b)   //[6, 6, 6, 6, 6]