【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋
【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋
柴高八斗之父 发表于6个月前
【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋
  • 发表于 6个月前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

【基础】数组基本操作 

数组的常见基本操作分为:赋值,查长度,添加push,删除delete,遍历for-in等。简单数组是一维的,但是实际工作中,数组总是与对象结合使用,叫:数组对象。

类型操作分为:

  • ,对已有数组进行读取;读取分为取某一个下标或遍历;【见: 进阶1,进阶1】
  • ,创建一个新数组,让其他元素的值添加到此数组;【见: 进阶3】

基本操作如下:

			
//			稀疏数组
//			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用法区别 https://my.oschina.net/u/583531/blog/1573906 

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

【进阶1】JavaScript-for遍历数组添加到指定dom内容中

已有数组遍历

projects=["更换机油","更换机滤","维修发动机","维修钣金"];
					for (var i=0;i<projects.length;i++)
					{
					 $("#box1").append(projects[i] + "<br>");
					}

【进阶2】JavaScript-for-in遍历数组

已有数组遍历

注意以下2种方式的区别:

//输出数组下标
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如下

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

  1. 遍历取到数组的值;
  2. 然后全部塞进dom中。

js

$(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

  1. 图片名称放在数组;
  2. 按钮上一步下一步获取索引值;
  3. 然后根据索引值读取数组,
  4. 通过字符串拼接把改变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 ); //此处只读内容
					});

 

标签: 数组
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 3
博文 145
码字总数 60627
×
柴高八斗之父
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: