JS学习笔记-数组

一、数组(Array)

  1. 数组也是一个对象
  2. 它和普通对象的功能类似,也是用来存储一些值。
  3. 不同的是普通对象是使用字符串来作为属性名的,而数组是使用数字来作为索引操作元素。
  4. 索引:从0开始的整数
  5. 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据。

二、创建数组对象

  1. 使用typeof检查一个数组时,返回object
var  arr=new Array();

7. 向数组中添加元素

语法:数组[索引] =值

var  arr=new Array();
arr[0]=10;

8. 读取数组中的元素

语法: 数组[索引]
如果读取不存在的索引,返回undefined

9. 获取数组的长度,length

语法:数组.length
(1)对于连续的数组,使用length可以获取数组的长度(元素的个数);
(2) 对于非连续的数组,使用length会获取到数组的最大的索引+1
(3)尽量不要创建非连续的数组

10. 修改length

(1)如果修改length大于原长度,则多出部分会空出来
(2)如果小于原长度,则多出的元素就会被删除。所以可以通过修改length来删除一些元素。

11.向数组的最后一个位置加元素

语法:数组[数组.length]=值

三、数组字面量

1. 使用字面量来创建数组

语法:var arr =[]
2.使用字面量创建数组时,可以在创建时就指定数组中的元素。

var arr=[1,2,3,4,5]//索引为1的值是1....

2. 使用构造函数创建数组时

也可以同时添加元素,将要添加的元素作为构造函数的参数传递,元素之间用逗号隔开。

var arr2=new Array(10,20,30)

3. 创建一个数组,数组中只有一个元素10

var arr=[10]

4. 创建一个长度为10的数组

arr2=new Array(10)

5.数组中的元素可以是任意的数据类型

可以是一个对象

var arr=[10,20]
var obj={
    
    name:"小per"};
arr[arr.length]=obj;
console.log(arr);
//输出结果:10,20,{name:"小per"}
console.log(arr[2].name);//小per

也可以是一个函数

arr=[function(){
    
    alert(1)}];

数组中也可以放数组,二维数组

arr=[[1,2],[2,3]]

四、数组的方法

1. push()方法

(1)该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度,可以将要添加的元素作为方法的参数传递,这样这些元素将会自动添加到数组的末尾。
语法:数组.push(“值”,“值”);
(2)该方法会将数组新的长度作为返回值返回。

2. pop()方法

(1)该方法可以删除该数组的最后一个元素,并将删除的元素作为返回值返回。
语法:数组.pop()

3. unshift()方法

(1)向数组的开头添加一个或多个元素,并返回新的数组长度
语法:数组.unshift(“值”)
(2)向前边加入元素之后,其他元素的索引会依次调整

4.shift()方法

(1)可以删除数组的第一个元素,并将被删除的元素作为返回值返回
语法:数组.shift()

5.slice()方法

(1)可以从数组中提取指定元素
(2)该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回。
(3)参数:
1.截取开始的位置的索引,包含开头索引
2.截取结束的位置的索引,不包括结束索引
3.第二个参数可以不写,此时会截取从开始索引往后的所有元素

var arr=["孙悟空","猪八戒","沙和尚","唐僧","白龙马"];
arr.slice(0,2);//截取索引0-2的元素

(4)索引可以传递一个负值,如果传递一个负值,则从后往前计算,-1倒数第一个,-2倒数第二个

6.splice()方法

(1)可以用来删除数组中的指定元素
(2)使用splice()会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回
(3)参数:splice(第一个参数,第二个参数,添加的元素1,添加的元素2)
1.截取开始的位置的索引,包含开头索引
2.删除的数量
第三及以后:可以传递一些新的元素,这些元素将会自动插入到删除开始位置索引的前边

7.concat()方法

(1)concat()可以连接两个或多个数组,并将新的数组返回。还可以传元素
(2)语法:数组1.concat(数组2);
(3)该方法不会对原数组产生影响,是返回的结果是连接起来的数组。

8.join()方法

(1)该方法可以将数组转换成一个字符串
(2)该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回。返回结果的类型是字符串型
(3)在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符。不写则默认连接符的是逗号。

9.reverse()方法

(1)该方法用来反转数组(前边的去后边,后边的去前边)
(2)该方法会直接修改原数组

10.sort()方法

(1)可以对数组的元素进行排序
(2)会影响原数组,默认按照Unicode编码排序。
(3)即使对于纯数字的数组,使用sort()排序时,也会按照unicode编码来排序。所以对数字进行排序时,可能会得到错误的结果。
(4)可以自己指定排序的规则,我们可以在sort()添加一个回调函数,来指定排序规则。
回调函数需要定义两个形参,浏览器会分别使用数组中的元素作为实参去调用回调函数。
使用哪个元素调用不确定,但是肯定是在数组中a一定在b前边
(5)浏览器会根据回调函数的返回值来决定元素的顺序,如果返回一个大于0的值,则元素会交换位置。如果返回小于0的值,则元素位置不变。如果返回一个0,则认为两个元素相等,也不交换位置
(6)如果需要升序排列,则返回a-b,需要降序排列,则返回b-a。

arr[5,4];
arr.sort(function(a,b){
    
    
  //前边的大
 /* if(a>b){
    return 1;
}else if(a<b){
   return -1;
}else{
   return 0;
}*/
//升序排列
return a-b;
//降序排序
return b-a;

})

五、数组的遍历

  1. 所谓遍历数组,就是将数组中的元素都取出来
for(var i=0;i<arr.length;i++){
    
    
    console.log(arr[i]);
}

六、例题

function Person(name,age){
    
    
							this.name=name;
							this.age=age;
							
						}
						var per=new Person("孙悟空",18);
						var per2=new Person("猪八戒",28);
						var per3=new Person("红孩儿",8);
						var per4=new Person("蜘蛛精",17);
						var per5=new Person("沙和尚",38);
						
						var perArr=[per,per2,per3,per4,per5];
						 function fun(arr){
    
    
							 //创建一个新数组
							var newArr=[];
							 for(var i=0;i<arr.length;i++){
    
    
								//判断Person的年龄是否大于等于18
								if(arr[i].age>=18){
    
    
									//将对象放入到新数组中
									newArr.push(arr[i]);
							} 
						} 
						//将新的数组返回
						return newArr;
						}
						var result=fun(perArr);
						console.log(result);
var arr=[1,2,3,2,1,3,4,2,5]
		//去除数组中重复的数字
		for(var i=0;i<arr.length;i++){
    
    
			//获取当前元素后的所有元素
			for(var j=i+1;j<arr.length;j++){
    
    
				//判断两个元素是否相等
				 if(arr[i]==arr[j]){
    
    
					 //如果相等则证明出现了重复的元素,则删除j对应的元素
					arr.splice(j,1);
					//当删除了当前j所在的元素以后,后边的会自动补位
					//此时将不会在比较这个元素,需要再比较一次j所在位置的元素
					j--;
				} 
				
			}
		}

七、forEach()方法

  1. 一般我们都是使用for循环去遍历数组,JS中还为我们提供了一个方法,用来遍历数组forEach(),这个方法只支持IE8以上的浏览器。IE8及以下浏览器不支持该方法。
  2. forEach()方法需要一个函数作为参数。像这种函数,由我们创建但是不由我们调用的,我们称为回调函数。
  3. 数组中有几个元素就会执行几次,每次执行时,浏览器就会将遍历到的元素以实参的形式传递进来,我们可以定义形参,来读取这些内容。
  4. 浏览器会在回调函数中传递三个参数:
    (1)第一个参数:当前正在遍历的元素value
    (2)第二个参数:就是当前正在遍历元素的索引index
    (3)第三个参数:正在遍历的数组obj
arr.forEach(function(value,index,obj){
    
    

});

八、call和apply方法

1.这两个方法都是函数对象的方法,需要通过函数对象来调用。
2.当对函数调用call()和apply()都会调用函数执行。
3.在调用call和apply可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this。

function(){
    
    
 alert(this);
}
var obj={
    
    };
fun.apply(obj);//{}
	var obj={
    
    
			name:"孙悟空",
			sayName:function(){
    
    
				alert(this.name);
							}
			};
			var obj2={
    
    
				name:"obj2",
				};
	      obj.sayName.apply(obj2);//参数是谁谁,this就是谁
  1. call()方法可以将实参在对象之后一次传递。apply()方法需要将实参封装到一个数组中统一传递。
function fun(a,b){
    
    
		 console.log("a="+a);
		 console.log("b="+b);
		}
		var obj={
    
    
			name:"孙悟空",
			sayName:function(){
    
    
				alert(this.name);
							}
			};
			var obj2={
    
    
				name:"obj2",
				};
	      fun.call(obj,2,3);
	      fun.call(obj,[2,3]);

九、arguments

  1. 在调用函数时,浏览器每次都会传递进两个隐含的参数。
    函数的上下文对象 this
    封装实参的对象 arguments
  2. arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度,在调用函数时,我们所传递的实参都会封装到arguments中保存。
  3. 检查·arguments是否是一个数组
arguments instanceof Array;//检查arguments是否是Array类的实例
Array.isArray(arguments);
  1. arguments的length可以用来获取实参的长度。有几个实参,长度就是几
  2. 即使不定义形参,也可以通过arguments来使用实参,只不过比较麻烦。
    arguments[0] 表示第一个实参
    arguments[1] 表示第二个实参
  3. arguments有一个callee属性,这个属性对应的是一个当前正在执行的函数对象。

猜你喜欢

转载自blog.csdn.net/weixin_45636381/article/details/113047422