數組作爲js中比較常用的一個容器,簡單記錄一些常用的方法,作爲查詢工具使用;
1 聲明,驗證;
var array1=new Array();//比較標準的方式
var array2=[];//也可以隨意一些,據說此種方式效率更高一些;推薦此種
var array3=[1,2,3,4];//直接初始化
//Array.isArray(判斷對象是否是數組)
Array.isArray(array3);//true
2 添加移除元素;
2.1 array.push(item...);array.unshift(item...);array.pop();array.shift();
//push()pop()
var array1=[];
array1[0]=1;//直接賦值,且不用擔心下標越界的問題
array1.push(2);//直接在後面追加
array1.push(3);// array1[1,2,3]
array1.pop();//末尾刪除 類似堆棧(stack) array1[1,2]
array1.push(3,4);//也可以同時多個 array1[1,2,3,4]
array1.push([5,6,7,],8);//不限制類型 array1[1,2,3,4,[5,6,7],8]
//unshift(),shift()
var array2=[2,3,4];//
array2.unshift(1);//頭部添加 array2[1,2,3,4]
array2.shift();//頭部珊瑚 array2[2,3,4]
2.2 splice();從指定位置添加刪除元素;
2.2.1 splice(startIndex,count,newItem);
startIndex:起始索引,數組添加刪除元素的位置-即新元素的位置;
count:要刪除的元素數量,如果是0,則不刪除;
newItem:要添加的元素,如果不填寫,則沒有添加新元素;
var arrayS=[1,2,3];
//參數1 splice(index,0,newItem)-添加新元素
arrayS.splice(2,0,'new1');//添加1個
console.log(arrayS);//[1,2,'new1',3]
arrayS.splice(3,0,'new2','new3');//添加多個
console.log(arrayS);//[1,2,'new1','new2','new3',3]
//參數2 splice(index,count)-刪除元素
arrayS.splice(2,3);
console.log(arrayS);//[1,2,3]
//參數2 splice(index,count,newItem)-移除元素並替換
arrayS.splice(2,1,[3,4,5,6]);
console.log(arrayS);//[1,2,[3,4,5,6]]
3 遍歷迭代-forEach;for 循環;every();some();reduce();map();filter();
3.1 forEach
var array1=[10,20,30,40];
//循環前一般需要做下判斷
if(array1&&array1.length){
//TO-DO
}else{
//數組不存在或者 爲空的情況
}
//1 forEach
array1.forEach(function(item,index){//forEach;比較少用
console.log('forE:'+item);
});
array1.forEach((i,index)=>{//forEach + Lambda表達式
console.log("forEach:"+i);
});
3.2 for循環
//2 for循環
for(var a in array1){// 不考慮順序可以用;比較少用
console.log('a:'+array1[a]);
}
for(var i=0;i<array1.length;i++){//普通for循環 排序時使用;一般的用法
console.log('for:'+array1[i]);
}
for(var i=0,j=0;j=array1.length,i<j;i++){//數組比較大時的一點兒優化
console.log('forj:'+array1[i]);
}
3.3 every(),some()
//3.3 every() 與some()
//3.3.1 every()該方法接受一個返回爲布爾值的函數,若數組所有元素均返回true,則結果爲true
//3.3.2 some() 類似every(),只不過是只要 有一個元素返回true,則結果爲true;
//some()與every() 類似於邏輯運算 or與and
var array3=[1,2,3,4,5,6,7,8];
var array4=[2,4,6,8];
var isEven=function(num){//是否爲偶數
return num%2==0;
}
var even1=array3.every(isEven);
var even2=array4.every(isEven);
var even3=array3.some(isEven);
var even4=array4.some(isEven);
console.log(even1,even2,even3,even4);//false true true true
3.4 reduce(),reduceRight();
//4 reduce()方法接受一個函數 ,該函數依次作用於數組中的元素,最終返回一個值;
//執行順序大概是
//var result1= func(index1 index2);var result2= func(result,index3),依次類推;
//使用場景:求累加值等
var add=function(num1,num2){
return num1+num2;
}
var array5=[1,2,3,4,5,6,7,8,9,10];
var total=array5.reduce(add);
console.log(total);//55
//4.1 reduceRight()方法, reduce()的變種,原理就是 array.reverse()+reduce();執行順序 由後往前;
var contact=function(item1,item2){
return item1+item2;
}
var array6=['how ','are ','you '];
console.log(array6.reduceRight(contact));//you are how
3.5 map();與every()類似,方法接收一個函數,數組中所有元素依次執行,返回的新值會生成一個新的數組;
var add5=function(item){
return item+5;
}
var array7=[1,2,3,4,5];
var newArray7=array7.map(add5);
console.log(newArray7);//6,7,8,9,10
console.log(array7);//1,2,3,4,5
//注意如果數組內是個對象數組
var array8=[{data:1},{data:2},{data:3}, {data:4},{data:5}]
var array9=array8.map((item, idx) => {
item.data=item.data+5//array8的內容會改變
return item;
});
console.log(array8);//?
console.log(array9);//?
3.6 filter(),過濾方法-接受一個函數,數組每個元素依次執行,滿足條件的元素生成一個新的數組;
//基數
var isOdd=function(num){
return num%2!=0;
}
var array10=[1,2,3,4,5,6,7,8];
var newArray10=array10.filter(isOdd);
console.log(newArray10);//[1,3,5,7]
4 複製,檢索array.slice(start,end);索引位置包含start,不包含end;
array.indexOf();
//slice方法針對array中的一段做淺複製
//第一個參數是起始位置,第二個可選,默認是數組的長度
//一般來說 截取後的值a + 截取後的數組值就是 截取前完整的數組的值
var array11=[1,2,3,4,5,6,7];
var array11Slice=array11.slice(1,3);
console.log(array11Slice);//[2,3]
console.log(array11);//[1,2,3,4,5,6,7]
//indexOf 判斷數組是否包含某個元素,一般可以配合 splice方法刪除元素
//當然返回的結果是第一個匹配成功的,若需要全部刪除還需要另外考慮
var array4=[111,222,333];
var index = array4.indexOf(222);//index==1
if(index > -1) {
array4.splice(index, 1);//array4-[111,333]
}
5 反轉, array.reverse();
var array12=[1,2,3,4,5]
array12.reverse();
console.log(array12);//[5,4,3,2,1]