天天看點

javascript筆記--(第八章)對象和數組Object類型Array類型數組和對象的差別

Object類型

<script type="text/javascript">
	var box = new Object();
	box.name = "box";

	var box1 = new Object; // 可以省略()
	box1.name = "box1";

	var box2 = Object();//可以省略new
	box2.name = "box2";

	var box3= {'name':"box3"};//key可以加引号

	console.log(box.name);
	console.log(box1['name']) //可以用[]輸出屬性值
	console.log(box2.name);
	console.log(box3.name);

	delete box.name;//删除name屬性
	console.log(box.name) //undefined
</script>
           

Array類型

<script type="text/javascript">
	var box = new Array();	//建立了一個數組
	var box = new Array(10);  //建立一個包含10個元素的數組
	var box = new Array('李炎恢',28,'教師','鹽城');	//建立一個數組并配置設定好了元素
	var box = Array();	//可以省略new關鍵字
	var box = ['李炎恢',28,'教師','鹽城'];  //使用字面量定義數組,不會調用Array構造函數(Firefox除外)
</script>
           

對象或數組都具有toLocaleString()、toString()和valueOf()方法。這三個方法都可以重寫

<script type="text/javascript">
	var box = ['李松',26,'程式員'];  //使用字面量定義數組,不會調用Array構造函數(Firefox除外)
	console.log(box.valueOf()); //["李松", 26, "程式員"]
	console.log(box.toString()); //李松,26,程式員
	console.log(box.toLocaleString()); //李松,26,程式員
	box.valueOf = function(){
		return "lisong_1";
	}
	box.toString = function(){
		return "lisong_2";
	};
	box.toLocaleString = function(){
		return "lisong_3";
	}
	console.log(box.valueOf()); //lisong_1
	console.log(box.toString()); //lisong_2
	console.log(box.toLocaleString()); //lisong_3

	console.log(box.join("|")) //李松|26|程式員//可以指定連接配接符
</script>
           

數組棧方法

javascript筆記--(第八章)對象和數組Object類型Array類型數組和對象的差別

push()方法可以接收任意數量的參數,把它們逐個添加到數組的末尾,并傳回修改後數組的長度。而pop()方法則從數組末尾移除最後一個元素,減少數組的length值,然後傳回移除的元素。

<script type="text/javascript">
	var box = [];
	console.log(box.push('李松',26,'程式員'));//3,添加元素并傳回數組長度
	console.log(box);//["李松", 26, "程式員"]

	console.log(box.pop());//程式員,删除棧頂元素并傳回删除的元素
	console.log(box);//["李松", 26]
</script>
           

數組的隊列方法

棧方法是後進先出,而列隊方法就是先進先出。列隊在數組的末端添加元素,從數組的前端移除元素。通過push()向數組末端添加一個元素,然後通過shift()方法從數組前端移除一個元素。 ECMAScript還為數組提供了一個unshift()方法,它和shift()方法的功能完全相反。unshift()方法為數組的前端添加一個元素

javascript筆記--(第八章)對象和數組Object類型Array類型數組和對象的差別
<script type="text/javascript">
	var box = [];
	console.log(box.push('李松',26,'程式員'));//3,添加元素并傳回數組長度
	console.log(box);//["李松", 26, "程式員"]

	console.log(box.shift());//李松,移除隊頭元素并傳回
	console.log(box);//[26,"程式員"]

	console.log(box.unshift("李松","耒陽"));//4,在隊頭添加元素并傳回添加後的數組長度
	console.log(box);//console.log(box);
</script>
           

PS:IE浏覽器對unshift()方法總是傳回undefined而不是數組的新長度。

數組的重排序方法

數組中已經存在兩個可以直接用來排序的方法:reverse()和sort(),這兩個方法将改變源數組。

<script type="text/javascript">
	var box = [1,3,4,2];
	box.reverse(); //将數組逆序
	console.log(box); //[2, 4, 3, 1]

	box.sort(); //預設從小到大排序
	console.log(box); //[1, 2, 3, 4]

	box.reverse(); //将數組逆序
	console.log(box); //[4, 3, 2, 1]

	function mySort(value1,value2){
		if(value1<value2)
			return -1;
		else if(value1 == value2)
			return 0;
		else
			return 1;
	}
	box.sort(mySort); //自定義排序
	console.log(box); //[1, 2, 3, 4]
</script>
           

數組的操作方法

ECMAScript為操作已經包含在數組中的元素提供了很多方法。concat()方法可以基于目前數組建立一個新數組。slice()方法可以基于目前數組擷取指定區域元素并建立一個新數組。splice()主要用途是向數組的中部插入或删除元素。

concat函數:

<script type="text/javascript">
	var box = ["李松",26,"程式員"];
	var box2 = box.concat("耒陽","黃市");
	console.log(box2); //["李松", 26, "程式員", "耒陽", "黃市"]
	console.log(box); //["李松", 26, "程式員"],目前數組沒有變化
</script>
           

slice函數:

文法

arrayObject.slice(start,end)      
參數 描述
start 必需。規定從何處開始選取。如果是負數,那麼它規定從數組尾部開始算起的位置。也就是說,-1 指最後一個元素,-2 指倒數第二個元素,以此類推。
end 可選。規定從何處結束選取。該參數是數組片斷結束處的數組下标。如果沒有指定該參數,那麼切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數,那麼它規定的是從數組尾部開始算起的元素。

傳回值

傳回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。

<script type="text/javascript">
	var box = ["李松",26,"程式員"];
	var box2 = box.slice(1,2); //2是結束下标(不包括)
	console.log(box2); //26]
	console.log(box); //["李松", 26, "程式員"],目前數組沒有變化

	box2 = box.slice(-3,-1);
	console.log(box2); //["李松",26],倒數第三個開始,倒數第一個結束

	box2 = box.slice(3,1);
	console.log(box2); //[],開始下标在結束下标之後,将傳回空數組

	box2 = box.slice(-1,-3);
	console.log(box2); //[],開始下标在結束下标之後,将傳回空數組
</script>
           

splice函數:

注釋:該方法會改變原始數組。

文法

arrayObject.splice(index,howmany,item1,.....,itemX)      
參數 描述
index 必需。整數,規定添加/删除項目的位置,使用負數可從數組結尾處規定位置。
howmany 必需。要删除的項目數量。如果設定為 0,則不會删除項目。
item1, ..., itemX 可選。向數組添加的新項目。

傳回值

類型 描述
Array 包含被删除項目的新數組,如果有的話。

說明

splice() 方法可删除從 index 處開始的零個或多個元素,并且用參數清單中聲明的一個或多個值來替換那些被删除的元素。

如果從 arrayObject 中删除了元素,則傳回的是含有被删除的元素的數組。

<script type="text/javascript">
	var box = ["李松",26,"程式員"];
	var box2 = box.splice(1,2,20); //傳回删除的元素
	console.log(box2); //[26, "程式員"]
	console.log(box); //["李松", 20]

	box = ["李松",26,"程式員"];
	var box2 = box.splice(1,1,20);//傳回删除的元素
	console.log(box2); //[26]
	console.log(box); //["李松", 20, "程式員"]

	box = ["李松",26,"程式員"];
	var box2 = box.splice(1,0,"耒陽");//傳回删除的元素
	console.log(box2); //[]
	console.log(box); //["李松", "耒陽", 26, "程式員"]

	box = ["李松",26,"程式員"];
	var box2 = box.splice(-1,0,"耒陽");//傳回删除的元素
	console.log(box2); //[]
	console.log(box); //["李松", 26, "耒陽", "程式員"]
</script>
           

數組和對象的差別

數組是對象的子類,對象的所有特性,數組都有,此外數組還擴充了自己獨有的方法。js中數組和對象都可以用來存儲集合,數組一般用來存儲有序集合,對象用來存儲無序集合。

<script type="text/javascript">  
    var a=[0];  
    a['5']=5;  
    a[1]=1;  
    a.test='test'  
    console.log(a['test']);//test  
    console.log(a['0']);//0  
    console.log(a['1']);//1  
    console.log(a[5]);//5  
    console.log(a.length);//6  
    console.log(a);
  	
    var b={0:0,5:5};  
    console.log(b['0']);//0  
    console.log(b[5]);//5  
    console.log(b.length);//undefined  
    console.log(b);
</script>  
           
javascript筆記--(第八章)對象和數組Object類型Array類型數組和對象的差別

數組和對象都可以用數字和字元串索引元素,數組length屬性傳回的是最大的索引數字加1後的結果,對象預設是沒有length屬性的。

繼續閱讀