一個例項全析js陣列(17)
前言:
陣列和物件一樣是數值的集合,不同的是每一個數值有一個名字(物件),而物件中每個數值都有一個下標。
①陣列的建立
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd"];
alert(a);
②將陣列進行排序
a.sort();
alert(a);
③把陣列中所有的元素連線起來轉換成字串
我們可以看到,陣列轉為字串之後,看不出有什麼變化,因此這裡引入判別書否為陣列的方法。
var a = new Array(10); var a = [1,2,3,4,8,5,"test",false,true,"abcd"]; var test = a instanceof Array; alert("你是陣列嗎?"+test); var b = a.join(); test = b instanceof Array; alert("你是陣列嗎?"+test);
④陣列顛倒順序排列(直接把陣列內的元素倒序排列,沒有規則)
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd"];
a.reverse();
alert(a);
⑤陣列拼接
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd"];
var b = ["red","ant","rd_ant"];
var c = a.concat(b);
alert(c);
也可以隨便拼接 var c = a.concat(b,a,b,b); alert(c);
⑥陣列轉字串
陣列的toString(),valueOf()方法可以實現陣列以字串的形式輸出,但存在差異。
toString()是將所有內容轉為字串,
valueOf()是取出物件內部的值,不進行型別轉換。
var a = new Array(10); var a = [1,2,3,4,8,5,"test",false,true,"abcd"]; var b = a.toString(); var test = b instanceof Array; alert("b你是陣列嗎?"+test); var c = a.valueOf(); test = c instanceof Array; alert("c你是陣列嗎?" + test);
⑦字串轉陣列(split()方法)
var d = "大,家,好,我,是,Red, Ant";
var e = d.split(",");
alert(e);
test = e instanceof Array;
alert("e是陣列嗎?"+test);
⑧陣列元素擷取(slice方法)
這種方法不會修改原陣列,只會返回一個新的陣列。
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.slice(5);
var c = a.slice(4,7);
alert(b);
alert(c);
⑨陣列元素的刪除
陣列元素的刪除有三種方法:pop(),shift(),splice()。
Pop():值得是刪除最後一個元素,並返回該元素的值。
Shift():移除最前一個元素並返回該元素,陣列中的元素自動前移
Splice(位置,數量):刪除指定位置開始的指定長度的元素,陣列的形式返回所移除的陣列。
Splice():還可以用於陣列元素的插入。
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.pop();
alert("刪除最後一個元素得到的陣列為:"+a);
alert("被刪除的元素是:"+b);
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.shift();
alert("刪除第一個元素得到的陣列為:"+a);
alert("被刪除的元素是:"+b);
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.splice(3,4);
alert("刪除後的陣列為:"+a);
alert("得到被刪除的陣列:"+b);
Splice();陣列的插入
同樣splice(a,b,....):
a同樣是操作的位置,b我們設定為0這樣就不會刪除陣列,後面放置一系列的要插入的元素即可。
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
a.splice(-3,0,"red","ant","rd_ant");
alert("從倒數第三位插入後的陣列為:"+a);
⑩陣列元素的新增
splice();元素的插入方法也是陣列元素的新增。
Push是我們最常見的陣列元素新增方法,是將一個或多個新元素新增到陣列的結尾,並返回新陣列的長度。
Unshift()與shift()對應的方法,將1一個或多個元素新增到陣列的開始,陣列中的元素自動後移,返回新的陣列長度。與push相對應。
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.push("red","ant","red_ant");
alert("結尾處push之後的陣列為"+a);
alert("當前陣列的長度為"+b);
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.unshift("red","ant","red_ant");
alert("開始位置unshift之後的陣列為"+a);
alert("當前陣列的長度為"+b);
⑪陣列元素查詢indexOf(),lastIndexOf()【IE低版本不相容】
indexOf():接收兩個引數要查詢的項和起點位置的索引(可選)
lastIndexOf():同樣不過,該方法是從後往前查詢。
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.indexOf("test");
var c = a.lastIndexOf(5);
alert("位置"+b);
alert("位置"+c);
陣列是否包含某元素:Jquery寫法
var a = [1,2,3,4,5,"red_ant"];//=15
var index = $.inArray("red_ant", a);
if(index > 0){
alert("好,告訴我你的位置"+ index);
}else{
alert("不存在該元素");
}
⑫陣列迴圈遍歷forEach()【IE低版本不相容】
var a = new Array(10);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var d = "";
a.forEach(function(b, c, a){
d += "索引"+c+"元素"+b+"//"
})
alert(d);
⑬陣列對映map()【IE低版本不相容】
Map()對陣列中的每一項執行給定函式,返回函式呼叫的結果組成的陣列。
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.map(function(item){
return item+"Red_Ant";
})
alert(b)
⑭陣列元素過濾filter()【IE低版本不相容】
陣列中的每一個元素給定函式,返回滿足條件組成的陣列。
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.filter(function(i, inxdex){
if(i == "test" || i == "abcd"){
return false;
}
return i;
})
alert(b);
⑮判斷陣列中的每一項是否滿足條件,所有都滿足才會返回true的方法every()【IE低版本不相容】
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.every(function(i){
return i != "test";
})
alert(b);
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.every(function(i){
return i != "asdadadadas";
})
alert(b);
![](http://i2.51cto.com/images/blog/201812/28/ed6409fd4d4d86e5b7e5170649f5de44.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
⑯判斷陣列中是否存在滿足條件的項,有一個就是true的方法some()【IE低版本不相容】
var a = [1,2,3,4,8,5,"test",false,true,"abcd","BBCD"];
var b = a.some(function(x){
return x == 3;
})
alert(b);
⑰迭代陣列的所有項,然後構建最終返回值。Reduce(),reduceRight()【IE低版本不相容】
Reduce()從陣列的第一項開始遍歷到最後,reduceRight()則倒序。
他們都可以接受4個引數:前一個值,當前值,項的索引,陣列物件
我們可以利用這個求和等
var a = [1,2,3,4,5];//=15
var b = a.reduce(function(pre,now,index,arrays){
return pre + now;
})
alert(b);