【原創】數組完整篇 / 基本操做/ 進階 / 遍歷 / 實例 / 拓展 / 取 / 賦

時間 2019-11-09

標籤原創數組整篇基本進階遍歷實例拓展简体版

原文原文鏈接

【基礎】數組基本操做

數組的常見基本操做分爲：賦值，查長度，添加push，刪除delete，遍歷for-in等。簡單數組是一維的，可是實際工做中，數組老是與對象結合使用，叫：數組對象。javascript

類型操做分爲：html

取，對已有數組進行讀取；讀取分爲取某一個下標或遍歷；【見：進階1，進階1】
賦，建立一個新數組，讓其餘元素的值添加到此數組；【見：進階3】

基本操做以下：java

清空整個數組（巧妙利用截取和數組長度來所有刪除）jquery

arr.splice(0,arr.length);

//			稀疏數組
//			var a=[1,2,3,,]
//			alert(a.length) //返回4
			
//			var b = new Array(5)
//			alert(b.length) //返回5
			
//			var b = new Array(5)
//			b = []
//			alert(b.length) //返回0

//			var a1=[,,,]
//			alert(a1[0]) //返回undefined
//			alert(a1.length)//返回3

			//【長度】-數組長度  （特別注意：length不單單能獲取數組的個數，還能刪除數組元素；）
//			a = [1,2,3,4,5]
//			a.length=3  //設置數組a長度爲3（此操做會將多的刪除）
//			alert(a)


			//【賦值】-數組元素的賦值
//			var a = [1,2,3,4,5]
//			alert(a[1]) //返回2
//			a[1]="chai" //賦值----索引賦值
//			alert(a[1]) //返回chai


			//【添加】-數組元素的添加
//			var a = [1,2,3,4,5]
//			a.push("chai") //在數組的末尾一個元素
//			alert(a[5])
//			a.push("yu","long") //在數組的末尾多個元素
//			alert(a)  //返回1,2,3,4,5,chai,yu,long


			//【刪除】-數組元素的刪除（特別注意：刪除元素並不會影響數組的length）
//			var a = [1,2,3,4,5]
//			delete a[0] //返回
//			alert(a)  //返回,2,3,4,5
//			alert(a[0])//返回undefined
//			alert(a.length) //返回5
			
			//如何刪除數組的最後一個元素?
			
			
			//【遍歷】-數組遍歷  for in 遍歷出元素
//			var a = ["chai","yu","s","cool","hi"]
//			var x
//			for (x in a)
//			{
//				alert(a[x]) //這裏的x是元素；
//			}

			//【遍歷】-數組遍歷  for 遍歷出元素
//			var a = ["chai","yu","s","cool","hi"]
//			alert(a[3])
//			for (var i=0; i<a.length;i++) {
//				alert(a[i]) //i帶過來的只是數字，由於靜態的讀取是：數組名[索引值]的方式；遍歷時，將i反覆帶進來，便可得遍歷。
//				
//			}

			//【查找索引值】-查找指定元素的索引值
//			var a = ["chai","yu","long","ni","hao"]
//			alert(a.indexOf("yu"))


			//【截取】-根據數組-索引值-截取----返回新數組
//			var a = ["chai","yu","long","ni","hao"]
//			
//			var b = a.slice(0,3)  //從索引0開始，到索引2結束，但不包括索引3:
//			alert(b)              //返回截取後的數組；
//			
//			var c = a.slice(3)   //從索引3開始，截取到最後。
//			alert(c)             //返回截取後的數組；
//			
//			var d = a.slice()   //不傳遞任何參數，它就會從頭至尾截取全部元素。利用這一點，咱們能夠很容易地複製一個Array：
//			alert(d)            //返回整個數租
			
			
			//【尾部刪除若干 push 和 尾巴刪除一個 pop】
//			var a = ["chai","yu","long","ni","hao"]
//			a.push("ma","?")  //在尾部添加一個或多個元素；
//			alert(a)          //返回所有 chai,yu,long,ni,hao,ma,?
//			a.pop();          //刪除最後一個
//			alert(a)     	  //返回 chai,yu,long,ni,hao,ma
		
           //【頭部添加若干unshift 和  頭部刪除一個shift】
//          var a = ["chai","yu","long","ni","hao"]
//          a.unshift("big","big2")
//          alert(a)
//          a.shift()
//          alert(a)


			//【排序：sort reverse-正序-倒序】
//			var a = ["chai","yu","long","ni","hao"]
//			a.sort()
//			alert("正序:"+a)
//			a.reverse()
//			alert("倒序:"+a)

			//【splice:簡單將：刪除-添加。它能夠從指定的 (索引) 開始  (刪除 -若干) 元素，而後再從該位置(添加-若干)元素：】
//			var a = ["chai","yu","long","ni","hao"]
//			a.splice(0,3,"gao","jing")  //返回   gao,jing,ni,hao
//			alert(a)

			//【concat：數組鏈接】
			//請注意，concat()方法並無修改當前Array，而是返回了一個新的Array。
//			var a = ["chai","yu","long"]
//			var b = a.concat(["gao","jing"])
//			alert(b)

	
	
			//【join：當前數組字符串連接】
			//把當前Array的每一個元素都用指定的字符串鏈接起來，而後（返回鏈接後的字符串）：
			//若是Array的元素不是字符串，將自動轉換爲字符串後再鏈接。
//			var a = ["chai","yu","long",11,22]
//			
//			alert(a.join("/") )  //返回含有分隔符的數組 ：chai/yu/long/11/22
//			alert(a.join("") )   //能夠保留爲空，則返回：chaiyulong1122
//			
		
			
			
			
			//接下來按這個博客來練習。
//			http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449921138898cdeb7fc2214dc08c6c67827758cd2f000


			var a = ["chai","yu","long",11,22]
			
//			alert(a.join("/") )  //返回含有分隔符的數組 ：chai/yu/long/11/22
//			alert(a.join("") )   //能夠保留爲空，則返回：chaiyulong1122

數組刪除詳講：數組

數組的刪除delete和splice用法區別 http://www.javashuo.com/article/p-wwvjrvrc-kg.html app

--------------------------------------------------------------------------

【進階1】JavaScript-for遍歷數組添加到指定dom內容中

已有數組遍歷dom

projects=["更換機油","更換機濾","維修發動機","維修鈑金"];
					for (var i=0;i<projects.length;i++)
					{
					 $("#box1").append(projects[i] + "<br>");
					}

【進階2】JavaScript-for-in遍歷數組

已有數組遍歷spa

注意如下2種方式的區別：.net

//輸出數組下標
var a = [1, 2, 3];
for (x in a) {
    console.log(x);
}

//輸出數組值
var a = [1, 2, 3];
for (x in a) {
    console.log(a[x]);
}

//彈出索引值
//					var projects=["更換機油","更換機濾","維修發動機","維修鈑金"];
//					for(var e in projects){
//					  alert(e);
//					}
					


					//輸出數組值
					var projects=["更換機油","更換機濾","維修發動機","維修鈑金"];
					for(var e in projects){
					  alert(projects[e]);  //由於數組訪問是用數組名+索引值方式：如 projects[2] 來操做的。                   
                      $("#box2").append(projects[e] + "<br>"); //塞進dom中
					}

【進階3】從dom中取值---》塞到數組中

js以下code

var arr = [] //建立一個空數組
		 	var box_all_li = $(".box ul li")
		 	var box_all_li_len = $(".box ul li").length;
		 	box_all_li_len = box_all_li_len-1
		 	//alert( box_all_li_len )
		 	//alert(box_all_li_len)
		 	
		 	
//		 	遍歷從dom中取到文本,並追加到數組中
		 	for( var i=0;i<box_all_li_len;i++)
		 	{
		 		//alert($(".box li").eq(i).text()) 取值
		 		arr.push( $(".box ul li").eq(i).text() )  //向數組添加取到的值
		 	}

html

<div class="box">
			<ul>
				<li>空氣濾芯</li>
				<li>汽油濾清</li>
				<li>剎車片</li>
				<li>雨刮</li>
				<li>輪胎</li>
				<li>玻璃水</li>
			</ul>
</div>

【實例】數組遍歷圖片展現實例

實例：01

遍歷取到數組的值；
而後所有塞進dom中。

$(function(){
		 	function img_show(){
			 	var img_group = ["1","2","3"]
				for(var i =0;i<img_group.length;i++){	       
			            img ='<img src='+'img/'+img_group[i]+'.jpg>';
			           $(".box").append(img);
			     }
		 	}
		 	
		 	$(".btn").click(function(){
		 		img_show()
		 	})
		 	
		})

html

<button class="btn">顯示</button>
<div class="box" style="border: 1px solid #000;">
			
</div>

實例：02

圖片名稱放在數組；
按鈕上一步下一步獲取索引值；
而後根據索引值讀取數組，
經過字符串拼接把改變src

效果如圖：

js：

$(function(){
		 	var imgarr = ["fd","jkc","vw","ly"]
		 	var n = 0;
		 	var len = imgarr.length
		 	//alert(len)
		 	
		 	$(".btn-next").click(function(){
		 		if(n>=(len-1)) 
		 		{
		 			return false;
		 		}
		 		//alert("當前下標是："+n)
		 		n++;
		 		var img_src = "img/"+imgarr[n]+".jpg"
		 		$(".img").attr("src",img_src)
		 	})
		 	
		 	$(".btn-pre").click(function(){
		 		if(n<=0) 
		 		{
		 			return false;
		 		}
		 		n--;
		 		var img_src = "img/"+imgarr[n]+".jpg"
		 		$(".img").attr("src",img_src)
		 	})
		})

html

<button class="btn-pre">上一張</button>
<button class="btn-next">下一張</button>
<div class="box" style="border: 1px solid #000;">
	<img src="img/fd.jpg" class="img">
</div>

【拓展】jquery對數組的方法

jquery有專門對數組操做的方法：$.each(object, [callback])

/// 專門針對數組的方法
				    //前面爲數組（數組內置），i爲數組索引值，n爲內容
//				    $.each( ["超人","熊大","熊二"], function(i, n){
//					  alert( "它們是" + i + ": " + n );
//					});
					
					
					//通上，可是數組被外置了；這種寫法更規範；
					var arr = ["超人","熊大","熊二"]
					$.each(arr, function(i, n){
					  alert( n ); //此處只讀內容
					});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。