Array的常用方法使用

1.數組增加

push: 向數組的末尾添加新的元素（參數可以是多個），返回數組長度，改變原數組

var arr = []; var arrLength = arr.push('1'); console.log(arrLength); // 1 arrLength = arr.push('2','3','4'); console.log(arrLength); // 4 console.log(arr); // ['1','2','3','4']

unshift: 向數組的開頭添加新的元素（參數可以是多個），返回數組長度，改變原數組

var arr = []; var arrLength = arr.unshift('4'); console.log(arrLength); // 1 arrLength = arr.unshift('1','2','3'); console.log(arrLength); // 4 console.log(arr); // ['1','2','3','4']

concat：用于連接兩個或多個數組（參數可以是多個），返回新數組，不改變原數組

沒有傳遞參數的情況下，concat只是復制當前數組并返回副本

var arr = ['1', '2', '3']; var newArr = arr.concat(); console.log(arr); // ['1','2','3'] console.log(newArr); // ['1','2','3'] console.log(arr === newArr); // false

參數為一或多個數組，則將這些數組中的每一項都添加到副本數組中

var arr1 = ['1']; var arr2 = ['2']; var arr3 = ['3']; var newArr = arr1.concat(arr2, arr3); console.log(arr1); // ['1'] console.log(arr2); // ['2'] console.log(arr3); // ['3'] console.log(newArr); // ['1','2','3']

參數傳遞的值而不是數組，這些值會被添加到副本數組的末尾

var arr = ['1']; var newArr = arr.concat('2', '3'); console.log(arr); // ['1'] console.log(newArr); // ['1','2','3']

參數可以為值和數組（不建議這樣使用）

var arr = ['1']; var arr2 = ['3']; var newArr = arr.concat('2', arr2); console.log(arr); // ['1'] console.log(arr2); // ['3'] console.log(newArr); // ['1','2','3']

2.數組刪除

pop: 刪除數組的末尾元素，返回它刪除的元素的值，改變原數組

var arr = ['1','2','3']; var lastData = arr.pop(); console.log(arr); // ['1','2'] console.log(lastData); // '3'

shift: 刪除數組的第一個元素，返回它刪除的元素的值，改變原數組

var arr = ['1','2','3']; var firstData = arr.shift(); console.log(arr); // ['2','3'] console.log(firstData); // '1'

splice（index，howmany，item1，…，itemX）: 刪除從 index 處開始的零個或多個元素，返回被刪除的元素的數組，第二個以后的參數為在index處插入的元素，改變原數組

從指定位置刪除元素

var arr = ['1','2','3']; var deleteDataList = arr.splice(1,2); // 從下標1處刪除兩個元素 console.log(arr); // ['1'] console.log(deleteDataList); // ['2','3']

從指定位置插入多個元素

var arr = ['1','2','5']; var deleteDataList = arr.splice(2,0,'3','4'); // 從下標為2的位置上插入多個元素 console.log(arr); // ['1','2','3','4','5'] console.log(deleteDataList); // [] //第二個參數為0 不刪除元素

從指定位置刪除元素并插入多個元素

var arr = ['1','2','5']; var deleteDataList = arr.splice(2,1,'3','4'); // 從下標為2的位置上刪除一個元素后，再插入多個元素 console.log(arr); // ['1','2','3','4'] console.log(deleteDataList); // ['5']

3.數組截取

slice(start,end)：截取從 start 到 end （不包括該元素）中的元素，返回一個新的數組

無參數表示返回當前數組的一個副本，默認start為0，end為字符串長度length

var arr = ['1','2','3']; var newArr = arr.slice(); console.log(arr); // ['1','2','3'] console.log(newArr); // ['1','2','3'] console.log(newArr === arr); // false

只有一個參數,則該參數為start值，end默認為字符串長度length

var arr = ['1','2','3']; var newArr = arr.slice(1); console.log(arr); // ['1','2','3'] console.log(newArr); // ['2','3'] 兩個參數，從start到end（不包括end下標的元素） var arr = ['1','2','3','4','5']; var newArr = arr.slice(1,3); console.log(arr); // ['1','2','3','4','5'] console.log(newArr); // ['2','3']

參數為負數，則規(guī)定從數組尾部開始算起的位置。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推

var arr = ['1','2','3','4','5']; var newArr1 = arr.slice(-2); // 相當于arr.slice(arr.length + (-2)) -> arr.slice(3) var newArr2 = arr.slice(0, -2); // 相當于arr.slice(0, arr.length + (-2)) -> arr.slice(0,3) var newArr3 = arr.slice(-4,-2); // 相當于arr.slice(arr.length + (-4), arr.length + (-2)) -> arr.slice(1,3) console.log(arr); // ['1','2','3','4','5'] console.log(newArr1); // ['4','5'] console.log(newArr2); // ['1','2','3'] console.log(newArr3); // ['2','3']

start參數大于等于數組長度，不管是否有end參數，結果返回空數組

var arr = ['1','2','3','4','5']; var newArr1 = arr.slice(5); // arr長度為5，start === arr.length var newArr2 = arr.slice(6); // arr長度為5 start > arr.length var newArr3 = arr.slice(5,1); // arr長度為5 start === arr.length console.log(arr); // ['1','2','3','4','5'] console.log(newArr1); // [] console.log(newArr2); // [] console.log(newArr3); // []

start參數大于等于end參數，結果返回空數組

var arr = ['1','2','3','4','5']; var newArr1 = arr.slice(3,2); // arr長度為5 start參數大于end參數 var newArr2 = arr.slice(3,3); // arr長度為5 start參數等于end參數 console.log(arr); // ['1','2','3','4','5'] console.log(newArr1); // [] console.log(newArr2); // []

4.數組查找

indexOf： 返回數組中第一個滿足條件的索引(從0開始), 不滿足返回-1

只有一個參數的情況，參數表示要查找的元素

var arr = ['1','2','3']; var checkElement1 = arr.indexOf('2'); var checkElement2 = arr.indexOf('4'); console.log(checkElement1); // 1 console.log(checkElement2); // -1

兩個參數的情況，第一個參數表示要查找的元素，第二個參數表示開始查找的下標位置

var arr = ['1','2','3']; var checkElement1 = arr.indexOf('2', 1); // 從下標為0的位置開始查找元素‘2’ var checkElement2 = arr.indexOf('2', 2); // 從下標為2的位置開始查找元素‘2’ console.log(checkElement1); // 1 console.log(checkElement2); // -1

find（）：傳參是一個函數，返回數組中第一個滿足條件的數據，不滿足返回undefined；使用find方法后，要對查詢到的數據進行undefined的判斷，才能正常使用數據

數組為非空數組

var arr = ['1','2','3']; var findData1 = arr.find(val => val === '2'); // 查找元素值為‘2’的數據 var findData2 = arr.find(val => val === '4'); // 查找元素值為‘4’的數據 console.log(findData1); // '2' console.log(findData2); // undefined

數組為空數組，查詢結果返回undefined

var arr = []; var findData1 = arr.find(val => val === '2'); // 查找元素值為‘2’的數據 var findData2 = arr.find(val => val === '4'); // 查找元素值為‘4’的數據 console.log(findData1); // undefined console.log(findData2); // undefined

includes（）：判斷數組是否包含某值，返回 true 或 false

var arr = ['1','2','3']; var includeData1 = arr.includes('2'); // 查找數組是否存在元素值為‘2’的數據 var includeData2 = arr.includes('4'); // 查找數組是否存在元素值為‘4’的數據 console.log(includeData1); // true console.log(includeData2); // fasle

5.數組遍歷

forEach（）：傳參為一個函數，數組里的元素個數有幾個，該函數就會執(zhí)行幾次，不會生成新數組

數組中的元素是基本數據類型，或者對象直接被賦值，不會改變原數組的數據

var arr = ['1', 2, true, undefined, Symbol(1), null, {}]; // 數組元素為基本類型 var newArr = arr.forEach(function (val, index, array) {val = 'change'; }); console.log(arr); // ['1', 2, true, undefined, Symbol(1), null, {}] console.log(newArr); // undefined （forEach方法無返回值）

數組中的元素是對象，遍歷更改對象屬性值，會改變原數組對象屬性的數據

var arr = [{ a: 1 }, { a: 2}]; // 數組元素為對象 arr.forEach(function (val, index, array) {val.a = val.a * 2; }); console.log(arr); // [{ a: 2 }, { a: 4}]

循環(huán)過程中，回調方法中使用return不會報錯，但是無效，不能跳出循環(huán)

var arr = [{ a: 1 }, { a: 2}]; arr.forEach(function (val, index, array) {val.a = val.a * 2;if (index === 0) { // 想要在符合條件時之后退出 該return并不會跳出循環(huán)return;} }); console.log(arr); // [{ a: 2 }, { a: 4}]

使用break和continue跳出整個循環(huán)或當前循環(huán)的，會報錯

var arr = [{ a: 1 }, { a: 2}]; arr.forEach(function (val, index, array) {val.a = val.a * 2;if (index === 0) {break;} });

map（）：傳參為一個函數，函數必須有return，數組里的元素個數有幾個，該函數就會執(zhí)行幾次，會返回一個新數組，不改變原數組的值

var arr = [1, 2, 3]; var newArr = arr.map(function (val) {return val * 2 }); console.log(arr); // [1, 2, 3] console.log(newArr); // [2, 4, 6]

filter（）：傳參為一個函數，函數return 一個可以轉化為boolean類型的值，遍歷數組，過濾出符合條件的元素并返回一個新數組，不改變原數組的值

回調函數return一個boolean值

var arr = [1, 2, 3]; var newArr = arr.filter(function (val) {return val === 2 }); console.log(arr); // [1, 2, 3] console.log(newArr); // [2]

回調函數return一個非boolean類型值，會總動轉換為true或false

// 0、''、null、undefined 轉化為boolean為false var arr = [0, 1, 2, 3, '', null, undefined, {}, []]; var newArr = arr.filter(function (val) {return val; }); console.log(arr); // [0, 1, 2, 3, '', null, undefined, {}, []]; console.log(newArr); // [1, 2, 3, {}, []];

若沒有符合條件的元素，則filter會返回一個空數組

var arr = [1, 2, 3]; var newArr = arr.filter(function (val) {return val === 4; }); console.log(arr); // [1, 2, 3] console.log(newArr); // []

some（）：傳參為一個函數，函數return 一個可以轉化為boolean類型的值，some返回值為一個boolean值，遍歷數組，只要有一個元素滿足條件就返回 true，否則返回 false；不改變原數組的值

var arr = [1, 2, 3]; var newArr = arr.some(function (val) {return val === 2; }); console.log(arr); // [1, 2, 3]; console.log(newArr); // true;

當空數組調用some方法時，返回false；

var arr = []; var newArr = arr.some(function (val) {return val === 2; }); console.log(arr); // []; console.log(newArr); // false;

every（）：傳參為一個函數，函數return 一個可以轉化為boolean類型的值，方法返回結果為一個boolean值，遍歷數組，每一個元素都滿足條件 則返回 true，否則返回 false；不改變原數組的值

// 只有數組的所有元素滿足要求時，結果才為true var arr = [1, 2, 3]; var newArr = arr.every(function (val) {return val <= 3; }); console.log(arr); // [1, 2, 3]; console.log(newArr); // true;// 只要有一個元素不滿足要求，則結果就為false var arr = [1, 2, 3, 4]; var newArr = arr.every(function (val) {return val <= 3; }); console.log(arr); // [1, 2, 3, 4]; console.log(newArr); // false;

reduce（）：可以將回調參數的結果作為下一個參數使用。

W3語法

array.reduce(function(prev, cur, index, arr), initialValue); /*prev: 必需。初始值, 或者計算結束后的返回值。cur： 必需。當前元素。index： 可選。當前元素的索引； arr： 可選。當前元素所屬的數組對象。initialValue: 可選。傳遞給函數的初始值，相當于total的初始值。 */

如果傳入了初始值0，則第一次遍歷時prev的值為0，cur的值為數組第一項1

var arr = [1, 2, 3]; // 因為傳入了初始值0，所以第一次遍歷時prev的值為0 var totle = arr.reduce(function (prev, cur, index) {console.log('prev', prev); // 0->1->3return prev + cur; },0); console.log(arr); // [1, 2, 3]; console.log(totle); // 6;

沒有傳入了初始值，則第一次遍歷時prev的值為數組第一項數據1，cur的值為數組第二項數據2

var arr = [1, 2, 3]; // 沒有傳入了初始值，則第一次遍歷時prev的值為數組第一項數據1，cur的值為數組第二項數據2 var totle = arr.reduce(function (prev, cur, index) {console.log('prev', prev); // 1->3console.log('cur', cur); // 2->3console.log('index', index); // 1->2return prev + cur; }); console.log(arr); // [1, 2, 3]; console.log(totle); // 6;

如果數組為空，并且沒有傳入了初始值，則reduce方法會報錯

var arr = []; // 數組為空，并且沒有傳入了初始值，reduce方法會報錯 var totle = arr.reduce(function (prev, cur, index) {console.log('prev', prev); // 未執(zhí)行console.log('cur', cur); // 未執(zhí)行console.log('index', index); // 未執(zhí)行return prev + cur; }); console.log(arr); // 未執(zhí)行 console.log(totle); // 未執(zhí)行

如果數組為空，傳入了初始值，則reduce方法不會報錯，所以一般來說我們提供初始值通常更安全

var arr = []; // 數組為空，并且沒有傳入了初始值，reduce方法會報錯 var totle = arr.reduce(function (prev, cur, index) {console.log('prev', prev); // 未執(zhí)行console.log('cur', cur); // 未執(zhí)行console.log('index', index); // 未執(zhí)行return prev + cur; },0); console.log(arr); // [] console.log(totle); // 0

總結

以上是生活随笔為你收集整理的Array常用方法（数组增加、数组删除、数组截取、数组查找、数组遍历）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。