JavaScript陣列常用方法歸納
不做完整的介紹,只介紹自己用的比較多的陣列方法,ES3、ES5、ES6都有涉及。
ES3中常用:
join:將陣列的所有元素都轉換成字串並拼接在一起,返回最後生成的字串。預設使用逗號。
reverse:將陣列中的元素顛倒順序,返回逆序的陣列(不是新陣列)。
sort:傳遞比較函式,將陣列元素進行排序。
concat:返回新陣列。
var a = [1,2,3]; console.log(a.concat(4,5))//[1,2,3,4,5] console.log(a.concat([4,5]))//[1,2,3,4,5] console.log(a.concat([4,5],[6,7]))//[1,2,3,4,5,6,7]
slice:1,返回一個從原陣列切出來的新陣列。2.兩個引數(第一個表示起始位置,第二個表示結束位置,前閉後開)。如果引數是負數,表示從後往前數,-1表示最後一個,-2表示倒數第二個,以此類推。
var b = [1,2,3,4,5,6,7];
console.log(b.slice(1,4));//[2,3,4]
console.log(b.slice(-3,-1));//[5,6]
splice:這個方法比較重要,用的比較多。它是在陣列中插入、刪除和替換元素的通用方法。
1.返回新陣列。2.原陣列也會被改變。3.splice最少一個引數。
//splice刪除陣列元素 var c = [1,2,3,4,5,6,7,8,9]; var d = c.splice(4);//從下標4開始刪除,返回被刪除部分[5,6,7,8,9],原陣列變成:[1,2,3,4] console.log(d); var e = [1,2,3,4,5,6,7,8,9]; var f = e.splice(2,3);//從下標2開始刪除3個數,返回被刪除部分[3,4,5],原陣列變成:[1,2,6,7,8,9] console.log(f); console.log(e); //splice插入元素:第一個引數表示起始位置,第二個引數為0(刪除0個),其他引數表示插入的元素。 var g = [1,2,3,4,5]; console.log(g.splice(1,0,7,8,9));////返回的新陣列為[],因為並沒有刪除元素。 console.log(g);//g變成[1,7,8,9,2,3,4,5] //替換元素:刪除並插入 var h = [1,2,3,4,5,6,7]; console.log(h.splice(2,2,8,9));//從下標2開始刪除兩個,並新增8,9.返回的陣列[3,4]。 console.log(h);//[1,2,8,9,5,6,7]
ES5中常用:
ES5新增的方法概述:大多數ES5陣列方法都接受一個函式作為第一個引數,並且該函式大多數情況使用三個引數:陣列元素、元素索引、陣列本身 。陣列方法的第二個引數是可選的,如果有第二個引數,則它會被視為第一引數(即函式)的this值。
forEach:從頭至尾遍歷陣列,為每個元素呼叫指定的函式。forEach無法使用break等提前終止,除非故意報錯退出。
var data = [1,2,3,4,5]; var sum = 0; data.forEach(function(v){ sum+=v; }) console.log(sum);//15 data.forEach(function(v,i,arr){ arr[i] = v+1;//每個元素加1 }); console.log(data);
map:返回新陣列,傳遞給map的第一個引數(即一個函式)應該有返回值。
var mapA = [1,2,3];
var mapB =mapA.map(function(v){
return v*2;
});
console.log(mapA);//[1,2,3]
console.log(mapB);//[2,4,6]
filter:返回原陣列的一個子集。傳遞的函式是用來邏輯判斷的:該函式返回true或false。如果返回true或者能轉換為true,那麼該元素將成為子集的成員。
var fA = [5,4,3,2,1];
var smallF = fA.filter(function(v){
return v<3;
});
console.log(smallF);//[2,1]
var indexF = fA.filter(function(v,i){
return i%2 ==0;
});
console.log(indexF);//[5,3,1]
every和some:它們對每個陣列元素應用指定函式進行判定,返回true或false。這兩個陣列方法的最終返回值是true或者false。
只是在所有元素的判定都返回true時every才返回true;而some是隻要部分判定返回true時,some就返回true。簡單點說,every是數學量詞“所有”,some是數學量詞“存在”
var EvE = [1,2,3,4,5];
var T = EvE.every(function(x){
return x<10;
});//T為true。所有元素都小於10.
var F = EvE.some(function(x){
return x%2 === 0;
});//F為true。EvE存在偶數
reduce,reduceRight:這兩個方法使用指定函式將陣列元素進行組合,生成單個值。這兩個方法的原理相同,只是前者索引從低到高,後者索引從高到低。
reduce()接受兩個引數。第一個是執行化簡操作的函式,化簡函式的任務就是將兩個值組合或化簡為一個值並返回。第二個可選引數是傳遞給化簡函式的初始值。
化簡函式可以接受4個引數:第一個是化簡返回值,第一次呼叫時,它是初始值即reduce的可選引數。第二個是陣列元素。第三個是元素索引。第四個是陣列本身。當然不必全部傳入。
var RA = [1,2,3,4,5];
var sumR = RA.reduce(function(returnV,Value,Index,Arr){
return returnV+Value;
},0);
console.log(sumR);//15
var sumNo = RA.reduce(function(rv,nv){
return rv+nv;
})
console.log(sumNo);//在reduce不傳第二個引數時,初始值就變為陣列的第一個元素
ES6中常用:
Array.from():將類陣列物件和可遍歷物件轉化為真正的陣列。
let arrayLike = {
0:"a",
1:"b",
2:"c",
length:3
};
console.log(Array.from(arrayLike));
console.log(Array.from("hello"));
find:找到第一個符合條件的陣列成員,如果沒有符合條件的就返回undefined。
findIndex:找到第一個符合條件的陣列成員的下標,如果都不符合,則返回-1.
var m = [1,2,3,4,-5].find(function(value,index,arr){//當然也可不必全寫
return value<0;
});
console.log(m)
entries()、keys()、values()都返回一個遍歷器物件,可用for...of迴圈遍歷。entries()返回鍵值對,keys()返回所有鍵(下標),values()返回所有值
for(let [index,elem] of ["a","b","c"].entries()){
console.log(index,elem);
}
includes():返回布林值,判斷陣列是否包含給定的值。與字串的includes方法類似。
var bo = ["a","b","c"].includes("b");
console.log(bo);
該方法的第二個引數表示搜尋的起始位置,預設為0。如果第二個引數為負數,表示從陣列尾部開始,如果這時它的絕對值大於陣列長度(比如第二個引數為-4,但陣列長度為3),則會重置為從0開始。
console.log([1,2,3].includes(3,3))//false,起始位置超過陣列長度。
console.log([1,2,3].includes(2,-1))
//false,找2,從最後一個位置,注意一點,第二個引數為負值時也是往陣列尾部找,而不是從後往前找。