七、ES对象(一) -- 数组对象

一、数组对象(Array)


	1、数组是一个对象。	
	2、数组与普通对象的区别在于数组使用索引值来操作元素。
	3、数组中的元素可以是任意数据类型。

	4、数组的长度可以任意改变,即使初始化了长度也是可变的。
	   过长补位的为空,获取对应元素为undefined。
	   过短缺位的被删除。
							
1)数组是一个对象。
        var s=["12","23","12"];

        console.log(typeof s); //object
2)数组对象与普通对象的区别在于数组使用索引值来操作元素。
	
	数组与普通对象的区别:
				1) 对象使用属性名操作属性。
				2) 数组使用索引值操作元素。
							索引值:从0开始的整数。

在这里插入图片描述

3)数组中的元素可以是任意数据类型

        //数组中的元素可以是任意数据类型
        var s=[1,"1",null,undefined,true];

        //也可以是对象
        var s1=[{name:'h',age:12},{name:'h',age:12},{name:'h',age:12}]

        //也可以是函数
        var s2=[function(){alert("1")},function(){alert("2")},function(){alert("3")}]
        
        //也可以是数组
        var s3=[    [1,2,3],[4,5,6],[7,3,5] ]
                
4)数组的长度可以任意改变。过长补位为空。过短缺位删除。
	
	1、数组的长度可以任意改变。即使初始化了数组长度,也可以改变。
	2、过长补位的为空。过短缺位的被删除。
	

二、操作数组

1.1 创建数组
		
	a、使用常规方式创建数组:	
	   		  var arr=new Array();  创建一个数组对象	    							
			  var arr=new Array(5); 创建一个指定长度的数组对象:							  
			  
			  var arr=new Array(1,23,'1212');
 							 		创建数组对象并初始化						   
	
	b、使用字面量方式创建数组:
			  var arr=[];
			  var arr=[1,23,'1212'];
						
	
	注意事项:数组的长度是可变的,即使初始化了数组长度,也是可以变的。
								
>>>>>> 创建数组

        var arr=new Array();  //创建一个数组对象
        arr[1]=12;
        arr[2]=13;
        console.log(arr);

        var arr2=new Array(5); //创建一个长度为5的数组对象。
        arr2[1]=12;
        arr2[2]=13;
        console.log(arr2);


        var arr3=new Array(1,null,undefined); //创建一个数组并初始化
        console.log(arr3);
        

在这里插入图片描述

1.2 使用索引值操作数组
	
		arr[2]  		使用索引值读取元素
		arr[2]=12  		使用索引值修改元素

>>>>>> 使用索引值读取元素。如果索引值超过数组长度,不会报错,返回undefined。
       var arr=[1,2,3,4,1,2,3,4];
       
       console.log(arr[2]); //3
       console.log(arr[100]);//undefined
>>>>>> 使用索引值设置元素。如果索引值超过数组长度,也可以设置。过长补位为空。
       var arr=[1,2,3,4,1,2,3,4];
       
       arr[100]=100;
       console.log(arr);

在这里插入图片描述

1.3 读取或设置数组的长度
												
		
		arr.length  	获取数组的长度	
		
		arr.length=100	设置数组的长度
						如果修改的length>原长度,则多出的会空出来。
						如果修改的length<原长度,则多出的元素会被删除。					

	注意事项: 数组是可变的。
						
>>>>>> 获取数组的长度
       
       var arr=[1,2,3,4];
       console.log(arr.length); //4

       arr[100]=111;
       console.log(arr.length); //100
       
>>>>>> 设置数组的长度。过长补位为空,过短删除
       var arr=[1,2,3,4];
       
       arr.length=2;
       console.log(arr); //设置数组长度。过短,删除元素

         
       arr.length=100;
       console.log(arr); //设置数组长度。过长,补位为空

在这里插入图片描述

1.4 遍历数组
		
		方式一:
		        var arr=["12","13","24"];
		        for(var i=0;i<arr.length;i++){
		            console.log(arr[i]);
		        }

		方式二:
		        for(var i in arr){
		            console.log(arr[i])
		        }
		
		
		方式三: forEach()方法遍历数组
				
				var arr=[1,2,3,4];
		        arr.forEach(function(elem,index,obj){
		                console.log(elem);
		        })	
							
						forEach()	
							forEach()方法需要一个函数作为参数(只在IE8以上浏览器支持)	
					-像这种函数由我们创建,不由我们调用的,我们称为回调函数
					-数组中有几个元素就会执行几次。
					 每次执行时,浏览器会将遍历的元素以实参的形式传递过来。我们可以在传入的函数中定义形参来接收。
					-浏览器会在回调函数中传入三个参数
							第一个参数是正在遍历的元素。
							第二个参数是正在遍历的元素索引值。
							第三个参数是正在遍历的数组对象。
						
							
1)for-in遍历数组
		
	数组也是对象,不同的是数组使用索引值操作。而索引值就相当于对象的属性名。
	所以使用for-in遍历对象的属性值,
	也可使用for-in遍历数组的索引值。
		
      var arr=[1,2,3,4];

      for(var i in arr){
          console.log(i);     // 遍历索引值
          console.log(arr[i]) // 遍历数组
      }
2)for循环遍历数组
       var arr=[1,2,3,4];

       for(var i=0;i<arr.length;i++){
           console.log(arr[i]) // 遍历数组
       }
3)forEach函数遍历数组

        var arr=[1,2,3,4];
        arr.forEach(function(elem){
                console.log(elem); 
        })
        arr.forEach(function(elem,index,obj){
                console.log(elem); 
        })


 		注意事项: 			
		  		1) forEach()方法需要一个函数作为参数,这个函数由forEach方法调用。
		  				- 像这种函数由我们创建但不需要调用,我们称之为回调函数。
		  		
		  		2) 数组中有几个元素,回调函数就被调用几次。
				
				3)forEach方法执行回调函数时,浏览器会传入三个参数。我们可以在函数中定义形参来接收参数。
				
		  				-第一个参数: 正在遍历的元素
		  				-第二个参数: 正在遍历的元素的索引值
		  				-第三个参数: 正在遍历的数组对象

>>>>>> forEach方法需要一个函数作为参数,这个函数由forEach方法调用。这个函数被称为回调函数。
       var arr=[1,2,3,4];

        //forEach()方法需要一个函数作为参数,这个函数由forEach方法调用。
        arr.forEach(function(){
                console.log("1"); 
        })

在这里插入图片描述

>>>>>> forEach方法调用回调函数时,浏览器会传入参数。我们可以在函数中定义形参来接收参数。
        var arr=[1,2,3,4];

        //第一个传入的参数是元素
        arr.forEach(function(a,b,c,d){
                console.log("a:"+a)
        })

        //第二个传入的参数是正在遍历的索引值
        arr.forEach(function(a,b,c,d){
                console.log("b:"+b)
        })

        //第三个传入的参数是数组对象本身
        arr.forEach(function(a,b,c,d){
                console.log("c:"+c)
        })

        //没有第四个参数
        arr.forEach(function(a,b,c,d){
                console.log("d:"+d)
        })

在这里插入图片描述

>>>>>> forEach方法遍历数组
       var arr=[1,2,3,4,5];
    
       arr.forEach(function(elem,index,obj){
            console.log(elem)
       }) 

三、操作数组 – Array对象方法

3.1 截取数组

	slice() 选取数组的一部分,并返回一个新数组。【不会改变原数组】
	
			-slice(a)     截取一个数组从索引值a开始
			-slice(a,b)   截取一个数组从索引值a开始,到b结束。
			
	splice() 添加或删除数组中的元素。并返回删除的元素。【该方法直接修改原数组】
			
			-splice(a,b)  	  从指定索引值a开始删除b个元素
			-splice(a,b,...)  从指定索引值a开始删除b个元素,然后插入多个元素

1)slice() 选取数组的一部分,并返回一个新数组。【不会改变原数组】
>>>>>> slice(a) 。截取一个数组从索引值a开始
       var arr=[1,2,3,4];
       
       var newArr=arr.slice(2); //从索引值2开始截取数组
       
       console.log(arr);
       console.log(newArr);

在这里插入图片描述

>>>>>> slice(a,b) 。 截取一个数组从索引值a开始到b结束

       var arr=[1,2,3,4];
       
       var newArr=arr.slice(2,3); 
       
       console.log(arr);
       console.log(newArr);

在这里插入图片描述

2)splice() 。添加或删除数组中的元素。并返回删除的元素。【会改变原数组】
>>>>>> splice(a,b) 。从指定索引值a开始删除b个元素
       var arr=[1,2,3,4,5];
       
       arr.splice(2,2);

       console.log(arr); 

在这里插入图片描述

>>>>>> splice(a,b,… ) 。从指定索引值a开始删除b个元素。然后插入元素


       var arr=[1,2,3,4,5];
       
       arr.splice(2,2,"a","b");

       console.log(arr);
       

在这里插入图片描述

3.2 栈与队列
	
	
	入栈与出栈:
				push()		向数组的末尾添加一个或多个元素,并返回新的长度。
				pop()		删除数组的最后一个元素,并返回该元素
	
	队列:
				unshift()	向数组的开头添加一个或多个元素,并返回新的长度。
				shift()		删除数组的第一个元素,并返回该元素


1)入栈与出栈
>>>>>> 入栈
       var arr=[1,2,3,4,5];
       
       arr.push("a","b","c");
       arr.push("d");

       console.log(arr)

在这里插入图片描述

>>>>>> 出栈
       var arr=[1,2,3,4,5];
       
       arr.pop();
       arr.pop();

       console.log(arr);

在这里插入图片描述

2)队列
>>>>>> 入队
   		var arr=[1,2,3,4,5];
       
       arr.unshift("a","b","c");

       console.log(arr)

在这里插入图片描述

>>>>>> 出队
      var arr=[1,2,3,4,5];
       
       arr.shift();

       console.log(arr)

在这里插入图片描述

3.3 排序

		sort( )  根据规则对数组元素进行排序【该方法直接修改原数组】
		
				1) sort不指定排序规则,则默认会按照第一个字母的ASCII码值进行比较。
				2) 指定排序规则,则会按照排序规则进行比较。


	//sort不指定排序,则会按照首字母的ASCII码值进行比较。
	var arr=[1,2,13,15,34,23]
	arr.sort();
	document.write(arr); //1,13,15,2,23,34

	//sort指定排序规则
	var arr=[1,2,13,15,34,23]
	function  sortDemo(a,b){
		return a-b;
	}
	//js很没有品,传入方法时会有所不同。只能靠记忆记住。
	//1.window.setInterval("show()",10);
	//2.arr.sort(show)
	arr.sort(sortDemo);	
	document.write(arr); //1,2,13,15,23,34


3.4 其他
	
	concat()  
			 拼接两个或更多的数组,并将新的数组返回【不会影响原数组】
					
					arr.contact(arr2) 拼接两个数组
					arr.contact(arr2,arr3) 拼接多个数组
					arr.contact(arr2,arr3,'1',true) 拼接多个数组或元素


	join('分隔符')   
	         将数组以指定分隔符拼接字符串。【不会影响原数组】
					
					arr.join()  不使用分隔符,默认以逗号分隔
					arr.join(=)  以指定的分隔符拼接字符串
			
    reverse()		
    		 直接在原数组中翻转数组【该方法直接修改原数组】
			 

	indexOf()   查找元素在数组中的索引值。如果没有返回-1

>>>>>> concat()拼接两个或更多的数组/元素,并将新的数组返回
       var arr=[1,2,3,4,5];
       var arr2=[6,7,8];
       var arr3=[6,7,8];

       //1、拼接两个数组,并将新的数组返回。【不会影响原数组】
       var newArr=arr.concat(arr2);
       console.log(newArr);

       //2、拼接两个或更多的数组,并将新的数组返回。【不会影响原数组】
       var newArr2=arr.concat(arr2,arr3);
       console.log(newArr);

       //3、拼接两个或更多的数组/元素,并将新的数组返回。【不会影响原数组】
       var newArr3=arr.concat(arr2,arr3,"c",true);
       console.log(newArr3);

在这里插入图片描述

>>>>>> join(“分隔符”) 将数组以指定分隔符拼接字符串。
       var arr=[1,2,3,4,5];
    

       //默认以逗号分隔,转化为字符串
       var  ss=arr.join();
       console.log(ss);

       //指定字符分隔,转化为字符串
       var  ss2=arr.join('-');
       console.log(ss2);

在这里插入图片描述

>>>>>> reverse() 。直接在原数组中翻转数组【该方法直接修改原数组】
       var arr=[1,2,3,4,5];
       arr.reverse();
       console.log(arr);

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值