1. 程式人生 > >JavaScript陣列常用方法歸納

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,從最後一個位置,注意一點,第二個引數為負值時也是往陣列尾部找,而不是從後往前找。