JavaScript經常使用數組操做方法

1.pop()刪除並返回數組的最後一個元素
pop() 方法返回「被彈出」的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              
// 從 fruits 刪除最後一個元素（"Mango"）
// 返回的值是 "Mango"

2.push() 方法（在數組結尾處）向數組添加一個新的元素：
push() 方法返回新數組的長度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       
//  向 fruits 添加一個新元素
// 返回的值是 5

3.shift() 方法會刪除首個數組元素，並把全部其餘元素「位移」到更低的索引。
shift() 方法返回被「位移出」的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            
// 從 fruits 刪除第一個元素 "Banana"
// 返回 "Banana"

4.unshift() 方法（在開頭）向數組添加新元素，並「反向位移」舊元素：
unshift() 方法返回新數組的長度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    
// 向 fruits 添加新元素 "Lemon"
// 返回 5

5.delete(),會在數組留下未定義的空洞。請使用 pop() 或 shift() 取而代之。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首個元素改成 undefined

6.splice() 方法可用於向數組添加新項：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

使用 splice() 來刪除元素
第一個參數（2）定義了應添加新元素的位置（拼接）。
第二個參數（0）定義應刪除多少元素。
其他參數（「Lemon」，「Kiwi」）定義要添加的新元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 刪除 fruits 中的第一個元素

7.裁剪數組slice()
slice() 方法建立新數組。它不會從源數組中刪除任何元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

slice() 可接受兩個參數，好比 (1, 3)。
該方法會從開始參數選取元素，直到結束參數（不包括）爲止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

8.concat() 方法不會更改現有數組。它老是返回一個新數組。
concat() 方法可使用任意數量的數組參數：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 將arr一、arr2 與 arr3 鏈接在一塊兒

9.reverse() 方法用於顛倒數組中元素的順序。
註釋：該方法會改變原來的數組，而不會建立新的數組。

10.數組排序sort()
sort()能夠針對數組的元素進行排序，裏頭包含了一個排序用的判斷函數，函數內必須包含兩個參數，這兩個參數分別表明數組裏的第n個和第n+1 個元素，經過比較第n和第n+1個元素的大小來進行排序。

let a = [1,3,8,4,5,7,6,2];
a.sort((x,y) => y - x);
console.log(a);
// [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y) => x - y);
console.log(a);
// [1, 2, 3, 4, 5, 6, 7, 8]

若是不使用判斷函數，默認會將元素轉換成字串，並採用unicode來判斷，這也會形成某些數字的排序錯誤，以下段示例：

let a = [1,3,8,4,5,7,6,2,9,10,11];
a.sort();
console.log(a); // [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]

11.求和

[1,2,3,1,3].reduce((prev,cur)=>{
        return prev+cur;
    },0)

12.indexOf()、lastIndexOf()

indexOf()會判斷數組中是否包含某個值，判斷的方式爲「由左而右」，若是有包含就返回這個值在數組中的索引值，若是沒有就返回-1，有兩個參數，第一個參數表示要判斷的值( 必填)，第二個參數表示從數組的哪一個位置開始判斷( 選填，預設爲0 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.indexOf(4)); // 3
console.log(a.indexOf(4,5));
// -1 ( 在6,7,8中搜索有沒有4 )

lastIndexOf()會判斷數組中是否包含某個值，判斷的方式爲「由右而左」，若是有包含就返回這個值在數組中的索引值，若是沒有就返回-1，這個方法有兩個參數，第一個參數表示要判斷的值( 必填)，第二個參數表示判斷從數組的哪一個位置開始從右往左查找( 選填，默認爲整個數組長度-1 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.lastIndexOf(3)); // 2
console.log(a.lastIndexOf(3,1));
// -1 ( 只在1,2中判斷，因此沒有 3 )

13.find()
find()會將數組中的「每個」元素帶入指定的函數內作判斷，並會返回第一個符合判斷條件的元素，若是沒有元素符合則會返回undefined。

let a = [1,2,3,4,5,6,7,8];
console.log(a.find(e => e > 3)); // 4
console.log(a.find(e => e < 0)); // undefined

14.findIndex()
findIndex()會將數組中的「每個」元素帶入指定的函數內作判斷，並會返回第一個符合判斷條件元素的位置索引，若是沒有元素符合則會返回-1。

let a = [1,2,3,4,5,6,7,8];
console.log(a.findIndex(e => e > 3)); // 3
console.log(a.findIndex(e => e < 0)); // -1

15.filter()
filter()會將數組中的「每個」元素帶入指定的函數內作判斷，若是元素符合判斷條件則會返回，組成一個新的數組。

let a = [1,2,3,4,5,6,7,8];
console.log(a.filter(e => e > 3));
// [4, 5, 6, 7, 8]
console.log(a.filter(e => e%2 == 0));
// [2, 4, 6, 8]

16.forEach()

forEach()會將數組中每一個元素套用到指定的函數裏進行運算，函數有三個參數，第一個參數表示每一個元素的值( 必填)，第二個參數爲該元素的索引值( 選填)，第三個參數則表示本來的數組( 選填)。

let a = [1,2,3,4,5];
let b = 0;
a.forEach(item => {
    b = b + item;
});
console.log(b); // 15 ( 1+2+3+4+5 )

若是結合第二和第三個參數進行搭配使用，就能作到改變本來數組的效果。

let a = [1,2,3,4,5];
a.forEach((item, index, arr) => {
    arr[index] = item * 10;
});
console.log(a); // [10,20,30,40,50]

17.map()
map()會處理數組中每一個元素，最後返回一個新的數組，裏頭有一個函數( 必填) 和一個返回函數裏的this參數( 選填)，函數內又包含三個參數，第一個是每一個元素的值( 必填)，第二個是當前元素的索引值( 選填)，第三個是當前的數組( 選填)。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(e => {
    return e + 10;
});
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

使用第二個和第三個參數的示例:

let a = [1,2,3,4,5,6,7,8];
let b = a.map((e,i,arr) => {
    return `${e}${i}${arr.find(e => e%5 == 1)}`;
// 組合成「元素 + 索引值 + 除以五餘數爲1的第一個元素」
});
console.log(b);
// ['101', '211', '321', '431', '541', '651', '761', '871']

若是要使用回調函數裏this的參數，則「不能使用」箭頭函數，由於箭頭函數的this指向和函數的this指向不一樣，因此要用通常的函數處理。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(function(e){
    return e + this; // 此處的 this爲10
}, 10);
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

18.flat()
flat()能夠將一個多維數組的深度轉成一維(扁平化或稱做降維)，它有一個選填的參數，表明要轉換的深度數字，預設爲1（只展開一層放到一維數組裏，若是是2，只展開2層放到一維數組裏），若是深度有不少層，可以使用Infinity來所有展開成一維數組。

let a = [1,2,[3],[4,[5,[6]]]];
let b = a.flat();
let c = a.flat(2);
let d = a.flat(Infinity);
console.log(b); // [1, 2, 3, 4, [5, [6]]]
console.log(c); // [1, 2, 3, 4, 5, [6]]
console.log(d); // [1, 2, 3, 4, 5, 6]

19.Array.isArray()

Array.isArray()能判斷一個元素是否爲數組，若是是就返回true，否則就返回false。

let a = [1,2,3,4,5,6,7,8];
let b = 123;
let c = 'hello';
let d = {d1:1,d2:2};
console.log(Array.isArray(a)); // true
console.log(Array.isArray(b)); // false
console.log(Array.isArray(c)); // false
console.log(Array.isArray(d)); // false

20.Array.from()

Array.from()會將「類數組」或是「可迭代的對象」轉換成數組，Array.from()有兩個參數，第一個參數爲「類數組對象」或「可迭代的對象」(必填)，第二個參數則是改變轉換成數組元素的函數(選填)。

類數組對象具備length 屬性以及索引化index 的元素，可迭代對象表示具備能夠利用迭代的方式取得它本身自己的元素，例如Map 和Set...等。( 參考MDN 說法 )

let a = 'abcde';
let b = Array.from(a);
console.log(b); // ['a','b','c','d','e']
let c = Array.from(a, e => e + e);
console.log(c); // ['aa','bb','cc','dd','ee']

類數組對象寫法必須包含length 屬性，且對象的key須爲0開始的數字，對應轉換後的元素索引。

let a = {
    '0': 14,
    '2': 13,
    '1': 7,
    '3': 9,
    '4': 6,
    length: 5
};
let b = Array.from(a);
console.log(b); // [14,7,13,9,6]

21.Array.of()

Array.of()能夠快速將數字、字串等內容，轉換成數組。

let a = Array.of(1,'a',2,'b',3);
console.log(a);
// [1, "a", 2, "b", 3]

22.toString()

toString()會把整個數組轉換成字符串。

let a = [1,2,3,4,5,6,7,8];
let b = a.toString();
console.log(b);
// 1,2,3,4,5,6,7,8

23.every()

every()會將數組中的「每個」元素帶入指定的函數內作判斷，只要有任何一個元素不符合判斷條件，會回返回false，若是所有符合，就會回傳true。

let a = [1,2,3,4,5,6];
console.log(a.every(e => e > 3));
// fasle ( 由於一、2 小於 3，3 等於 3 )
console.log(a.every(e => e > 0));
// true

本文部分參考自微信公衆號 - 前端達人（frontend84），做者：前端達人
如下附上參考連接，若有侵權，請聯繫本人刪除。
https://cloud.tencent.com/developer/article/1485922歡迎你們參閱，一塊兒分享。