Array的常用方法使用

1.數(shù)組增加

push: 向數(shù)組的末尾添加新的元素（參數(shù)可以是多個(gè)），返回?cái)?shù)組長(zhǎng)度，改變?cè)瓟?shù)組

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: 向數(shù)組的開頭添加新的元素（參數(shù)可以是多個(gè)），返回?cái)?shù)組長(zhǎng)度，改變?cè)瓟?shù)組

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：用于連接兩個(gè)或多個(gè)數(shù)組（參數(shù)可以是多個(gè)），返回新數(shù)組，不改變?cè)瓟?shù)組

沒有傳遞參數(shù)的情況下，concat只是復(fù)制當(dāng)前數(shù)組并返回副本

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

參數(shù)為一或多個(gè)數(shù)組，則將這些數(shù)組中的每一項(xiàng)都添加到副本數(shù)組中

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']

參數(shù)傳遞的值而不是數(shù)組，這些值會(huì)被添加到副本數(shù)組的末尾

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

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

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.數(shù)組刪除

pop: 刪除數(shù)組的末尾元素，返回它刪除的元素的值，改變?cè)瓟?shù)組

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

shift: 刪除數(shù)組的第一個(gè)元素，返回它刪除的元素的值，改變?cè)瓟?shù)組

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

splice（index，howmany，item1，…，itemX）: 刪除從 index 處開始的零個(gè)或多個(gè)元素，返回被刪除的元素的數(shù)組，第二個(gè)以后的參數(shù)為在index處插入的元素，改變?cè)瓟?shù)組

從指定位置刪除元素

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

從指定位置插入多個(gè)元素

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

從指定位置刪除元素并插入多個(gè)元素

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

3.數(shù)組截取

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

無參數(shù)表示返回當(dāng)前數(shù)組的一個(gè)副本，默認(rèn)start為0，end為字符串長(zhǎng)度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

只有一個(gè)參數(shù),則該參數(shù)為start值，end默認(rèn)為字符串長(zhǎng)度length

var arr = ['1','2','3']; var newArr = arr.slice(1); console.log(arr); // ['1','2','3'] console.log(newArr); // ['2','3'] 兩個(gè)參數(shù)，從start到end（不包括end下標(biāo)的元素） 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']

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

var arr = ['1','2','3','4','5']; var newArr1 = arr.slice(-2); // 相當(dāng)于arr.slice(arr.length + (-2)) -> arr.slice(3) var newArr2 = arr.slice(0, -2); // 相當(dāng)于arr.slice(0, arr.length + (-2)) -> arr.slice(0,3) var newArr3 = arr.slice(-4,-2); // 相當(dāng)于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參數(shù)大于等于數(shù)組長(zhǎng)度，不管是否有end參數(shù)，結(jié)果返回空數(shù)組

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

start參數(shù)大于等于end參數(shù)，結(jié)果返回空數(shù)組

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

4.數(shù)組查找

indexOf： 返回?cái)?shù)組中第一個(gè)滿足條件的索引(從0開始), 不滿足返回-1

只有一個(gè)參數(shù)的情況，參數(shù)表示要查找的元素

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

兩個(gè)參數(shù)的情況，第一個(gè)參數(shù)表示要查找的元素，第二個(gè)參數(shù)表示開始查找的下標(biāo)位置

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

find（）：傳參是一個(gè)函數(shù)，返回?cái)?shù)組中第一個(gè)滿足條件的數(shù)據(jù)，不滿足返回undefined；使用find方法后，要對(duì)查詢到的數(shù)據(jù)進(jìn)行undefined的判斷，才能正常使用數(shù)據(jù)

數(shù)組為非空數(shù)組

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

數(shù)組為空數(shù)組，查詢結(jié)果返回undefined

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

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

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

5.數(shù)組遍歷

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

數(shù)組中的元素是基本數(shù)據(jù)類型，或者對(duì)象直接被賦值，不會(huì)改變?cè)瓟?shù)組的數(shù)據(jù)

var arr = ['1', 2, true, undefined, Symbol(1), null, {}]; // 數(shù)組元素為基本類型 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方法無返回值）

數(shù)組中的元素是對(duì)象，遍歷更改對(duì)象屬性值，會(huì)改變?cè)瓟?shù)組對(duì)象屬性的數(shù)據(jù)

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

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

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

使用break和continue跳出整個(gè)循環(huán)或當(dāng)前循環(huán)的，會(huì)報(bào)錯(cuò)

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

map（）：傳參為一個(gè)函數(shù)，函數(shù)必須有return，數(shù)組里的元素個(gè)數(shù)有幾個(gè)，該函數(shù)就會(huì)執(zhí)行幾次，會(huì)返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組的值

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（）：傳參為一個(gè)函數(shù)，函數(shù)return 一個(gè)可以轉(zhuǎn)化為boolean類型的值，遍歷數(shù)組，過濾出符合條件的元素并返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組的值

回調(diào)函數(shù)return一個(gè)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]

回調(diào)函數(shù)return一個(gè)非boolean類型值，會(huì)總動(dòng)轉(zhuǎn)換為true或false

// 0、''、null、undefined 轉(zhuǎn)化為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會(huì)返回一個(gè)空數(shù)組

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

some（）：傳參為一個(gè)函數(shù)，函數(shù)return 一個(gè)可以轉(zhuǎn)化為boolean類型的值，some返回值為一個(gè)boolean值，遍歷數(shù)組，只要有一個(gè)元素滿足條件就返回 true，否則返回 false；不改變?cè)瓟?shù)組的值

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

當(dāng)空數(shù)組調(diào)用some方法時(shí)，返回false；

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

every（）：傳參為一個(gè)函數(shù)，函數(shù)return 一個(gè)可以轉(zhuǎn)化為boolean類型的值，方法返回結(jié)果為一個(gè)boolean值，遍歷數(shù)組，每一個(gè)元素都滿足條件 則返回 true，否則返回 false；不改變?cè)瓟?shù)組的值

// 只有數(shù)組的所有元素滿足要求時(shí)，結(jié)果才為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;// 只要有一個(gè)元素不滿足要求，則結(jié)果就為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（）：可以將回調(diào)參數(shù)的結(jié)果作為下一個(gè)參數(shù)使用。

W3語法

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

如果傳入了初始值0，則第一次遍歷時(shí)prev的值為0，cur的值為數(shù)組第一項(xiàng)1

var arr = [1, 2, 3]; // 因?yàn)閭魅肓顺跏贾?，所以第一次遍歷時(shí)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;

沒有傳入了初始值，則第一次遍歷時(shí)prev的值為數(shù)組第一項(xiàng)數(shù)據(jù)1，cur的值為數(shù)組第二項(xiàng)數(shù)據(jù)2

var arr = [1, 2, 3]; // 沒有傳入了初始值，則第一次遍歷時(shí)prev的值為數(shù)組第一項(xiàng)數(shù)據(jù)1，cur的值為數(shù)組第二項(xiàng)數(shù)據(jù)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;

如果數(shù)組為空，并且沒有傳入了初始值，則reduce方法會(huì)報(bào)錯(cuò)

var arr = []; // 數(shù)組為空，并且沒有傳入了初始值，reduce方法會(huì)報(bào)錯(cuò) 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í)行

如果數(shù)組為空，傳入了初始值，則reduce方法不會(huì)報(bào)錯(cuò)，所以一般來說我們提供初始值通常更安全

var arr = []; // 數(shù)組為空，并且沒有傳入了初始值，reduce方法會(huì)報(bào)錯(cuò) 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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。