博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋
阅读量:6609 次
发布时间:2019-06-24

本文共 3750 字,大约阅读时间需要 12 分钟。

hot3.png

【基础】数组基本操作 

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

类型操作分为:

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

基本操作如下:

清空整个数组(巧妙利用截取和数组长度来全部删除)

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

 

数组删除详讲:

数组的删除delete和splice用法区别  

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

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

已有数组遍历

projects=["更换机油","更换机滤","维修发动机","维修钣金"];					for (var i=0;i
"); }

【进阶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] + "
"); //塞进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

html

  • 空气滤芯
  • 汽油滤清
  • 刹车片
  • 雨刮
  • 轮胎
  • 玻璃水

 

【实例】数组遍历图片展示实例

实例:01

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

js

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

html

 

实例: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

 

 

【拓展】jquery对数组的方法

jquery有专门对数组操作的方法:$.each(object, [callback])

/// 专门针对数组的方法				    //前面为数组(数组内置),i为数组索引值,n为内容//				    $.each( ["超人","熊大","熊二"], function(i, n){//					  alert( "它们是" + i + ": " + n );//					});															//通上,但是数组被外置了;这种写法更规范;					var arr = ["超人","熊大","熊二"]					$.each(arr, function(i, n){					  alert( n ); //此处只读内容					});

 

转载于:https://my.oschina.net/u/583531/blog/1525474

你可能感兴趣的文章
Logwatch linux日志监视器解析
查看>>
EXT ajax loadmask
查看>>
【第8章】JVM内存管理
查看>>
CMD命令行下操作MySQL的常用命令
查看>>
easyui datagrid plunges 扩展 插件
查看>>
视频编码 MPEG2 MPEG4 DIVX Xvid H264 VC1封装格式MKV AVI ...
查看>>
Maven发布本地jar包及部署到远程服务器
查看>>
ubuntu Resource temporarily unavailable (Could ...
查看>>
xfire开发并调用webservice
查看>>
oracle定时任务实例
查看>>
nodejs 文件、文件夹操作
查看>>
超强的方法参数非空验证工具-Beta-1.0.0
查看>>
查看mysql多个表的行数
查看>>
CentOS 使用netstat察看mysql端口和连接
查看>>
jsp中的内置对象-工作日志
查看>>
java.util.ConcurrentModificationException 解决办法
查看>>
spring 的静态资源
查看>>
mysql用户和权限管理
查看>>
git 分支合并
查看>>
用grub4dos安装Windows7、Ubuntu 12.10双系统
查看>>