文档章节

【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋

柴高八斗之父
 柴高八斗之父
发布于 2017/08/29 13:45
字数 1818
阅读 13
收藏 0

【基础】数组基本操作 

数组的常见基本操作分为:赋值,查长度,添加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<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 ); //此处只读内容
					});

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 188
码字总数 103477
作品 0
宁波
前端工程师
私信 提问
分治思想之排序算法

分而治之是设计高效算法的一个重要思想。本文主要总结一下分治思想在排序算法中的运用。 排序在商业数据处理和现代科学计算中有着重要的地位,它能够应用于事物处理、组合优化、天体物理学、...

丶legend
2017/10/02
0
0
前端日拱一卒D10——ES6笔记之新特性篇

前言 余为前端菜鸟,感姿势水平匮乏,难观前端之大局。遂决定循前端知识之脉络,以兴趣为引,辅以几分坚持,望于己能解惑致知、于同道能助力一二,岂不美哉。 本系列代码及文档均在 此处 依然...

DerekZ95
08/07
0
0
Gson基本操作,JsonObject,JsonArray,String,JavaBean,List互转

http://www.cnblogs.com/jianyungsun/p/6647203.html http://blog.csdn.net/pg_guo/article/details/51083502 (转自)https://www.cnblogs.com/robbinluobo/p/7217387.html 在介绍之前先来个约......

furenjian
07/28
0
0
ECMAScript Set和Map数据结构

Set 基本用法 ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成Set数据结构。 通过 add 方法向Set结构加入成员,结果表明...

墨马
2017/10/31
0
0
MDSTable相关内容分析

对MDSTable的操作主要是对version和state保存到集群以及从集群中读取的操作。具体操作处理函数说明如下: MDSTable::save() __对version和state进行encode操作 __设置committing_version = ...

linuxhunter
2016/07/06
113
0

没有更多内容

加载失败,请刷新页面

加载更多

七牛qshell工具 批量删除操作

qshell 下载地址&文档(http://developer.qiniu.com/code/v6/tool/qshell.html) 这里我们演示的是windows下的操作,将下载的工具改名为:qshell.exe 然后将文件的路径添加到PATH qshell accou...

koothon
8分钟前
0
0
Fastjson-fastjson中$ref对象重复引用问题

import java.util.ArrayList;import java.util.List;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.serializer.SerializerFeature;/** * fastjson中$ref对象......

小黄狗
14分钟前
0
0
mybatis一级缓存

mybatis执行查询的流程,最终都是通过动态代理进入到MapperProxy的invoke方法 @Override public Object invoke(Object proxy, Method method, Object[] args) throws Throwable { try......

wuyiyi
15分钟前
0
0
安装weblogic wls1033_generic.jar 遇见的坑

接别人的烂摊子,weblogic部署没部署成功不部署了 让我远程给别人部署weblogic 11g 部署完成启动域的时候启动不了报错如下 Unrecognized option: -jrockit Error: Could not create the Ja...

雁南飞丶
15分钟前
0
0
通过7个python函数理解区块链

我想对于那里的很多人来说,区块链就是这种现象,很难不让你头脑发热。我开始观看视频和阅读文章,但对我个人而言,直到我编写自己的简单区块链,我才真正理解它是什么以及它的潜在应用价值。...

笔阁
16分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部