JavaScript物件和陣列
在JavaScript中物件是一種資料結構,用於將資料和功能組織在一起,描述一類物件所具有的屬性和方法。
物件是某個特定型別的例項。新物件是new操作符後跟一個關鍵字來實現的。建構函式本身就是一個函式,用於建立新物件。 var person = new Object();這行程式碼建立了一個Object的例項,並將值儲存了變數person中。
建立物件的方式有兩種,一種是通過Object函式來建立。
var animal = new Object(); animal.eat=function(){ console.log("eat"); }; animal.color="blue";
上面的程式碼通過object建立了物件animal,並建立了物件的方法eat以及屬性color。
同時可以通過字面量的方式建立物件。
var animal={
eat:function(){
console.log("eat");
},
color:"blue"
}
上面通過字面量的方式建立了新物件animal,並建立了方法eat和屬性color。通過字面量建立的物件,並不會呼叫Object函式。物件可以作為引數傳遞至函式中使用。
function test(args){
console.log("Name:"+args.name+"n");
console.log("age:"+args.age+"n");
}
test({"name":"haha","age":18});
函式test接收了args引數,args是一個物件。在函式中可以直接訪問物件的屬性。這種情況適合向函式傳遞大量的可選引數情況。
function Person(options){ //Jquery 的extend方法,用於合併引數 this.options=$.extend(true, {"name":"zhang"},options); console.log(this.options); } var perosn = new Person({ "name":"ge", "age":18, "sex":"man" });
上面的程式碼定義了Person函式,並且為person傳遞了大量的物件。同時在函式內部有預設的物件,用jquery的extend方法進行引數的合併。
一般情況下,訪問物件的屬性通過操作符.來訪問,不如person.name。訪問物件的方法也通過.來呼叫,比如person.eat()。訪問物件的屬性還有另外一種訪問方式,通過下標的方式訪問,比如person["age"]。
有些物件的屬性包含一些特殊字元,不能通過操作符(.)來訪問,必須通過中括號的方式來訪問,比如“first name”,這個屬性有空格,必須通過中括號訪問。person["first name"]。
JavaScript中的陣列與其他高階語言有很大的區別,陣列中存放不同型別的值,可以在陣列的第一個位置存放Number,第二個位置存放布林值。建立陣列也有兩種基本的方式,比如 var array = new Array();
如果預先知道陣列的長度,可以 var array = new Array(20);也可以向陣列中傳遞引數, var array = new Array("red",20,true);當我們只傳遞一個引數時候就比較複雜了,如果傳遞的是數值,則建立該長度的陣列,如果傳遞的是字串,則建立包含這個值的陣列。
建立陣列的另一種方式是通過字面量的方式建立陣列。
var array=[];var array1=["blue",1,true];
訪問陣列的方式通過[]下標的方式訪問的,比如 array1[0],輸出第一項的值;rray1[1],輸出第二項的值;array[2]="hehe",修改了第三項的值;array[3]="en",新增新的陣列元素。方括號中的索引表示要訪問的值。陣列的長度儲存在length中。
通過 instanceof,以及isArray可以判斷一個物件是否是陣列,比如 array instanceof Array,array.isArray()
var array=["blue","red","yellow"];
console.log(array.toString());//輸出blue,red,yellow
console.log(array.join(";"));//輸出blue;red;yellow
toString()方法將陣列轉換為String,通過操作符逗號分隔陣列元素。同時陣列提供了join方法可以指定字元來分隔陣列元素。
var array=["blue","red","yellow"];
console.log(array.toString());//輸出blue,red,yellow
console.log(array.join(";"));//輸出blue;red;yellow
var str = array.toString();//
var narray= str.split(",");//["blue","red","yellow"];
console.log(narray[0]);//輸出blue
上述程式碼展示split的用法,split可以字串轉換為陣列。通過指定的分隔符,將字串轉換為陣列。
陣列提供了一組方法,使陣列使用和其他的資料結構一樣。陣列可以表現的像棧一樣,可以限制插入和刪除。棧是一種後進先出的資料結構,最新新增的項最早被移除。插入和刪除都發生在棧的頂部。陣列提供了push和pop方法。
push方法接收任意數量的引數,將他們逐個新增到陣列的末尾,並返回陣列的長度。pop方法可以從陣列的末尾刪除一項,並返回移除的項
var array=[];
console.log(array.length);//0
array.push("red");
console.log(array.length);//1
array.pop();
console.log(array.length);//0
上面的程式碼,定義了一個數組array,並通過push方法添加了一項,陣列的長度為1,通過pop方法刪除了一項,陣列的長度為0.
佇列的資料結構是先進先出,陣列同樣可以表現的像佇列一樣,實現元素的先進先出。佇列在末尾新增元素,在列表的前端移除資料項。push方法可以向陣列的末端新增資料元素,shift方法可以移除陣列的第一項,並返回,同時陣列長度減1.
var array=[];
array.push("red");
array.push("blue");
array.push("green");
array.shift();
console.log(array.toString());//blue,green
上面的程式碼定義了一個數組array,並通過push方法添加了三項元素,最好通過shift方法刪除陣列的第一項,最後陣列只有兩項,toString()方法輸出。
陣列的重新排序有兩個方法reverse和sort。reverse就是陣列元素反轉,sort方法將陣列進行升序排列,首先要將陣列的元素呼叫toString方法,然後再進行排序。
var array=[1,7,5,3,2];
array.reverse();
console.log(array.toString());//2,3,5,7,1
array.sort();
console.log(array.toString());//1,2,3,5,7
var array =[1,3,5,7,9,11];
array.sort();
console.log(array.toString());//輸出1,11,3,5,7,9
通過上面的程式碼,我們發現sort方法的排序有時候並不是我們想要的結果,所以sort方法提供了傳遞函式作為引數的方法。通過傳遞函式我們能夠實現數值的升序以及降序排列。
function compareMax(v1,v2){
if(v1<v2){
return -1;
}
else if(v1>v2){
return 1
}
else{
return 0;
}
}
//降序
function compareMin(v1,v2){
if(v1<v2){
return 1;
}
else if(v1>v2){
return -1;
}
else {
return 0;
}
}
var array= [1,3,11,7,2,10];
array.sort(compareMax);
console.log(array.toString());//1,2,3,7,10,11
array.sort(compareMin);
console.log(array.toString());//11,10,7,3,2,1
比較函式接收兩個引數,如果第一個引數應該在第二個引數之前則返回負數,如果第一個引數應該位於第二個引數之後則返回整數,兩個數相等返回0.
//升序排列
function compareMax(v1,v2){
/*if(v1<v2){
return -1;
}
else if(v1>v2){
return 1
}
else{
return 0;
}*/
return v1-v2;
}
//降序
function compareMin(v1,v2){
/* if(v1<v2){
return 1;
}
else if(v1>v2){
return -1;
}
else {
return 0;
}*/
return v2-v1;
}
通過上面的兩個函式同樣可以實現升級和降序排列。
JavaScript的陣列還包含許多其他常用的方法。concat方法基於當前的陣列,形成一個新的陣列,並不改變原陣列的值。concat的引數可以一個或者多個數組,可以不是陣列。如果不是陣列,則在原陣列的末尾新增一個新的元素,形成新的陣列。如果是陣列,則會將陣列的每一項新增到新的陣列中,形成新的陣列。
var array=["1",2];
var array1=array.concat(["3",4]);
console.log(array.toString());//輸出1,2
console.log(array1.toString());//輸出1,2,3,4
上面的程式碼可以看出通過concat生成了新的陣列,原陣列的值並沒有發生改變。
slice方法能夠基於當前陣列的一項或者多項建立一個新的陣列,不會改變原始陣列。slice方法有一個或者兩個引數,表示陣列下標的起始和結束的位置,不包括結束位置。如果只有一個引數,則從開始位置一直到陣列結束。
var array=["blue","red","green","black","white"];
var array1=array.slice(1,3);
var array2=array.slice(1);
console.log(array1.toString());//red,green
console.log(array2.toString());//red,green,black,white
如果slice引數有負數,則用陣列長度加上該負數,如array.slice(-2,-1),則array.slice(3,4)相當。如果起始位置大於結束位置,則返回空陣列。
splice方法可以向陣列的中部插入元素,splice可以實現陣列的插入、刪除和替換。刪除需要指定兩個引數,要刪除第一項的位置,要刪除的項數。如splice(1,3),從陣列第二項開始,刪除三個陣列元素。splice插入方法至少傳遞三個引數,第一要插入元素的位置,第二個要刪除的項數(0),第三個引數要插入的元素,如果要插入多項,可以有第四個引數。。。。
splice的替換方法也至少需要三個引數,第一個引數元素要刪除的位置,第二個引數刪除的項數,第三個引數插入的元素。
var array=["red","green","blue","white","black"];
var array1=array.splice(1,1);//array被刪除一項["red","blue","white","black"]
var array2=array.splice(1,0,"green");//["red","green","blue","white","black"]
var arrays=array.splice(1,1,"yellow");//["red","yellow","blue","white","black"]
上面的程式碼講述了splice方法的刪除、插入、替換方法的使用。
陣列的indexOf方法可以查詢某個元素在陣列的位置,如果陣列中部存在該元素,則返回-1.
var array=["red","green","blue","white","black"];
console.log(array.indexOf("green"));//1
console.log(array.indexOf("orange"));//-1
JavaScript為陣列提供了5個遍歷的方法,分別是every、fillter、forEach、map和some方法。every方法對陣列的每一項執行給定的函式,如果該陣列的每一項對函式都返回true,則返回true。
some方法與every方法類似,但是some方法只要有一項滿足函式,就返回true。
var array=[1,2,3,4,5];
var result=array.every(function(value,index,array){
return value>2;
});
console.log(result);//false,因為1<2
var result1=array.some(function(value,index,array){
return value>2;
});
console.log(result1);//true
filter函式利用指定的函式確定是否在返回的陣列中包含一項,並形成新的陣列。
var array=[1,2,3,4,5];
var array1=array.filter(function(value,index,array){
return value>2;
});
console.log(array1.toString());//3,4,5
上面的程式碼對array進行了filter過濾,返回所有大於2的項,形成新的陣列。
map方法也返回一個新的陣列,但是這個新的陣列的每一項都是對原來的每一項元素執行了指定的函式。
var array=[1,2,3,4,5];
var array1=array.map(function(value,index,array){
return value*2;
});
console.log(array1.toString());//2,4,6,8,10
上面的程式碼對array進行了map方法,返回了新的陣列,在原來的陣列每一項乘2.
forEach方法,對陣列的每一項執行傳入的函式。沒有返回值,與for迴圈類似。
var array=[1,2,3,4,5];
array.forEach(function(value,index,array){
console.log(value);
});
可以自己上述5個重寫。因為有的瀏覽器不支援上述5個方法
Array.prototype.every=function(func){
var result=false;
for(var i=0,len=this.length;i<len;i++){
result=func(this[i],i,this);
if(result==false){
return false;
}
}
return true;
}
Array.prototype.some=function(func){
var result=false;
for(var i=0,len=this.length;i<len;i++){
result=func(this[i],i,this);
if(result==true){
return true;
}
}
return false;
}
Array.prototype.filter=function(func){
var result=[];
for(var i=0,len=this.length;i<len;i++){
var flag=func(this[i],i,this);
if(flag){
result.push(this[i]);
}
}
return result;
}
Array.prototype.map=function(func){
var result=[];
for(var i=0,len=this.length;i<len;i++){
var flag=func(this[i],i,this);
result.push(flag);
}
return result;
}
Array.prototype.forEach=function(func){
for(var i=0,len=this.length;i<len;i++){
func(this[i],i,this);
}
}