web前端javaScript笔记——(6)数组

发布时间:2023年12月28日

对象一般分为内建对象,宿主对象,自定义对象。

数组(Array)

数组也是一个对象

它和我们普通对象功能类似,也是用来存储一些值的

不同的是普通对象是使用字符串作为属性名的,而数组时使用数字来作为索引操作元素案引:

从0开始的整数就是索引

数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据

创建数组对象

var arr=new Array();

console.log(arr); ??//””

console.log(typeof arr); ??//Object

向数组中添加元素 ????数组[索引]=值

arr[0]=1;

读取数组中的元素 ????数组[索引]

console.log(arr[o]); ??

如果读取不存在的索引,不会报错,会返回undefined

可以用length来获取数组的长度(元素的个数)

console.log(arr.length);

打印输出数组 console.log(arr); ?//1,2,3,3(举个例子)

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

修改length

如果修改的length大于原长度,则多出部分会空出来如果修改的length小于原长度,则多出的元素会被删除

//arr.length = 10;

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

arr[arr.length]=值

数组字面量

用字面量创建数组

var arr=[ ];

使用字面量创建数组时,可以在创建时就指定数组中的元素

var arr=[1,2,3,4,5,10 ];

使用构造函数来创建数组

var arr2 = new Array();

var arr2 = new Array(10,20,30);???//也可以创建时进行初始化

/使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递

//创建一个数组数组中只有一个元素??arr=[10];

//创建一个长度为10的数组?????????arr2 = new Array(10);

console.log(arr2.length);//10

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

console.log(arr[3]); //null

//也可以是对象

var obj = (name:"孙悟空"};??

arr[arr.length] = obj;

console.log(arr[arr.length] ??//[object Object]

arr[{name:”孙悟空”},{name:”猪八戒”},{name:”沙和尚”}];

console.log(arr); ??[object Object],[object Object],[object Object]

数组中的元素可以是任意的数据类型。也可以是对象,也可以是一个函数。

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

arr[0](); ?//调用函数

二维数组

arr=[[1,2,3],[2,3,4],[3,4,5]];

console.log(arr); ??//1,2,3,2,3,4,3,4,5

console.log(arr[0]); ??[1,2,3]

数组的方法

concat() ????????????连接两个或更多的数组,并返回结果。????????????

join() ??????????????把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() ??????????????删除并返回数组的最后一个元素

push() ?????????????向数组的末尾添加一个或更多元素,并返回新的长度

reverse() ???????????颠倒数组中元素的顺序。

shift() ?????????????删除并返回数组的第一个元素

slice() ?????????????从某个已有的数组返回选定的元素

sort() ?????????????对数组的元素进行排序

splice()?????????????删除元素,并向数组添加新元素。

toSource() ?????????返回该对象的源代码。

toString() ??????????把数组转换为字符串,并返回结果

toLocaleString() ????把数组转换为本地数组,并返回结果。

unshift() ??????????向数组的开头添加一个或更多元素,并返回新的长度。

valueOf() ?????????返回数组对象的原始值

push()

该方法可以向数组的末尾添加-个或多个元素,并返回数组的新的长度可以将要添加的元素作为方法的参数传递,

这样这些元素将会自动添加到数组的末尾

//创建一个数组

var arr = [“孙悟空”"猪八戒”,"沙和尚"];

arr.push("唐僧");

console.log(arr);

"孙悟空,猪八戒,沙和尚,唐僧"

该方法会将数组新的长度作为返回值返回

var result = arr.push("唐僧”"蜘蛛精”,"白骨精”)

console.log(arr);

console.log("result = "+result);

pop()

该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

arr.pop();

result = arr.pop();

console.log(arr);

console.log("result = "+result);

unshift()

向数组开头添加一个或多个元素,并返回新的数组长度

arr.unshift("牛魔王","二郎神");

向前边插入元素以后,其他的元素索引会依次调整

shift()

可以删除数组的第一个元素,并将被删除的元素作为返回值返回

result = arr.shift();

数组的遍历

创建一个数组

var arr=[“孙悟空”,”猪八戒”,”沙和尚”,”白龙马”];

for(var i= ; i<arr.length ; i++){

console.log(arr[i]);

}

输出 “孙悟空”,”猪八戒”,”沙和尚”,”白龙马”

for(var i= ; i<10?; i++){

console.log(arr[i]);

}

输出 “孙悟空”,”猪八戒”,”沙和尚”,”白龙马”,”undefined”,”undefined”,”undefined”,”undefined”,”undefined”,”undefined”

//代码的改进,循环的终止条件为i<arr.length;

<script type="text/javascript">

//创建一个数组

var arr=["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

for(var i=0;i<arr.length;i++){

console.log(arr[i]);

}

</script>

//打印输出:“孙悟空”,”猪八戒”,”沙和尚”,”唐僧”,”白骨精”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			//创建一个方法
			function Person(name,age,gender){
				this.name=name;
				this.age=age;
			}
			//修改Person原型的toString
			Person.prototype.toString=function(){
				return "Person[name="+this.name+",age="+this.age+"]";
			};
			//创建一个Person对象
			var per=new Person("孙悟空",18);
			console.log(per);
			//打印输出Person{name:"孙悟空",age:18};
			
		</script>
   </head>
		<body>
			
		</body>

</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			//创建一个方法
			function Person(name,age,gender){
				this.name=name;
				this.age=age;
			}
			//修改Person原型的toString
			Person.prototype.toString=function(){
				return "Person[name="+this.name+",age="+this.age+"]";
			};
			//创建一个Person对象
			var per=new Person("孙悟空",18);
			//创建一个Person对象
            var per2 = new Person("猪八戒",28);
            var per3 = new Person("红孩儿",8);
            var per4 = new Person("蜘蛛精",16);
            var per5 = new Person("二郎神",38);
			//将这些person对象放入到一个数组中
			var perArr = [per,per2, per3,per4,per5];
			
			/*创建一个函数,可以将perArr中的满18岁的Person提取出来然后封装到一个新的数组中并返回
			arr
			形参,要提取信息的数组*/
			function getAdult(arr){
				//创建- 个新的数组
				//遍历arr,获取arr中Person对象
				//判断Person对象的age是否大于等于18
				//如果大于等于18,则将这个对象添加到newArr中
				var newArr = [];
				//遍历arr、获取arr中Person对象
				for(var i=0; i<arr.length; i++){
				var p = arr[i];
				//判断Person对象的age是否大于等于18
				if(p.age >= 18){
				//如果大于等于18,则将这个对象添加到newArr中
				//将对象放入到新数组中
				newArr.push(p);
				
				}
				}
				//将新的数组返回
				return newArr;
				
			};
			//将新的数组返回return newArr;
			var result = getAdult(perArr);
			console.log(result);
			/*Array(3) length:3
			 * [
    {
        "name": "孙悟空",
        "age": 18
    },
    {
        "name": "猪八戒",
        "age": 28
    },
    {
        "name": "二郎神",
        "age": 38
    }
]*/
			
			
		</script>
   </head>
		<body>
			
		</body>

</html>
JS还给我们提供了一个方法,用来遍历数组forEach(),这个方法只支持IE8以上的浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			//forEach()方法需要一个函数作为参数
			//像这种函数,由我们创建但是不由我们调用的,我们称为回调函数数组中有几个元素函数就会执行几次
			//数组中有几个元素函数就会执行几次,
			//每次执行时,浏览器会将遍历到的元素以实参的形式传递进来,
			//我们可以来定义形参,来读取这些内容
			//浏览器会在回调函数中传递三个参数:
			arr.forEach(function(a){console.log("a = "+a);});
			/*打印输出
			 a = 孙悟空
			 a = 猪八戒
			 a = 沙和尚
             a = 唐僧
             a = 白骨精*/
		</script>
   </head>
		<body>
			
		</body>

</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			//创建一个数组
			/*一般我们都是使用for循环去遍历数组,
			JS中还为我们提供了一个方法,用来遍历数组forEach()
			 这个方法只支持IE8以上的浏览器,IE8及以下的浏览器均不支持该方法,
			 所以如果需要兼容IE8,不能使用forEach,还是使用for循环来遍历
*/
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			//forEach()方法需要一个函数作为参数
			//像这种函数,由我们创建但是不由我们调用的,我们称为回调函数数组中有几个元素函数就会执行几次
			//数组中有几个元素函数就会执行几次,
			//每次执行时,浏览器会将遍历到的元素以实参的形式传递进来,
			//我们可以来定义形参,来读取这些内容
			//浏览器会在回调函数中传递三个参数:
			//第一个参数,就是当前正在遍历的元素
			//第二个参数,就是当前正在遍历的元素的索引
			//第三个参数,就是正在遍历的数组
			arr.forEach(function(value,index,obj){
				console.log("value = "+value);
			    console.log("index = "+index);
				console.log(obj);
                console.log(typeof obj);
				console.log(obj==arr);

			});
			/*打印输出
			 a = 孙悟空
			 a = 猪八戒
			 a = 沙和尚
             a = 唐僧
             a = 白骨精*/
		</script>
   </head>
		<body>
			
		</body>

</html>

slice和splice

slice()

-可以用来从数组中截取指定元案

该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回

参数:(包括左边,不包括右边)

1.截取开始的位置的索引

2.截取结束的位置的索引

var arr = [“孙悟空”,“猪八戒”,"沙和尚”,唐僧”,”白骨精”];

arr.slice(e,2);

console.log(arr); ??//打印输出的是原数组 “孙悟空”,“猪八戒”,"沙和尚”,唐僧”,”白骨精”

var result = arr.slice(0,2);

console.log(result);???//"孙悟空,猪八戒"

第二个参数可以省略不写,返回第一个参数开始的所有数组元素

result = arr.slice(1);

console.log(result);

//"猪八戒,沙和尚,唐僧,白骨精"

索引可以传递一个负值,-1 倒数第一个,-2 倒数第二个

result = arr.slice(1,-2);?

console.log(result);????//“猪八戒,沙和尚”

splice()

可以用于删除数组中的指定元素

使用splice()会影响到原数组,会将指定元素从原数组中删除

并将被删除的元素作为返回值返回

var result = arr.splice(0,2);

console.log(arr);

console.log(result);

参数:

第一个,表示开始位置的索引

第二个,表示删除的数量

第三个及以后。。

可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边

arr = ["孙悟空","猪八戒""沙和尚""唐僧”,"白骨精"];

var result = arr.splice(0,1,”牛魔王”,”铁扇公主”);

console.log(arr);

//console.log(result);???

//打印输出 ?“牛魔王,铁扇公主,猪八戒,沙和尚,唐僧,白骨精"

数组去重练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			//创建一个数组
			var arr=[1,2,3,2,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--;
					}
				}
			}
			console.log(arr);
			//打印输出 1,2,3,4,5
		</script>
		
	
   </head>
		<body>
			
		</body>

</html>

?

数组的剩余方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js练习</title>
		<script type="text/javascript">
			var arr=["孙悟空","猪八戒","沙和尚"];
			var arr2=["白骨精","玉兔精","蜘蛛精"];
			var arr3=["二郎神","太上老君","玉皇大帝"];
			/*concat()可以连接两个或多个数组,并将新的数组返回
			 该方法不会对新的数组产生影响*/
			var result = arr.concat(arr2,arr3);
			console.log(result);
			/*打印输出
			 "孙悟空,猪八戒,沙和尚,白骨精,玉免精,蜘蛛精,二郎神,太上老君,玉垒大帝"*/
			/*join()
			 该方法可以将数组转换为一个字符串输出
			 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
			 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
			 如果不指定连接符,则默认使用,作为连接符
			 * */
			result=arr.join();
			console.log(result);
			/*打印输出:   孙悟空,猪八戒,沙和尚*/
			
			arr=["孙悟空","猪八戒","沙和尚"];
			result=arr.join("hello");
			console.log(result);
			/*打印输出  孙悟空hello猪八戒hello沙和尚*/
			/**reverse()
			 * 该方法用来反转数组(前边的去后边,后边的去前边)*/
			arr.reverse();
			console.log(arr);
			//打印输出 ["沙和尚","猪八戒","孙悟空"]
			
			//sort() 该方法可以对数组进行排序
			arr=["b","d","e","a","c"];
			arr.sort();
			console.log(arr);
			//打印输出"a","b","c","d","e"
			/*对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,
			 所以对数字进行排序的时候,可能会得到错误的结果
			 
			 * 我们可以自己来指定排序的规则*/
			/*我们可以在sort()添加一个回调函数,来指定排序规则,回调函数中需要定义两个形参,
			浏览器将会分别使用数组中的元素作为实参去调用回调函数
			使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
			浏览器会根据回调函数的返回值来决定元素的顺序,
			如果返回一个大于0的值,则元素会交换位置
			如果返回一个小于0的值,则元素位置不变
			如果返回一个0,则认为两个元素相等,也不交换位置*/
			arr=[5,4];
			arr.sort(function(a,b){
				return 0;
			});
			console.log(arr);
			//打印输出[5,4]
			
			arr=[5,4,2,1,3,6,8,7];
			arr.sort(function(a,b){
				//前边的大
				/*if(a> b){
				 * 	return -1;  返回小于0的数字,元素的位置不变
				 * }else if(a < b)
				 * {
				 * 	return 1;
				 * }else(return 0;
				 };
				*/
				//升序排列
                //return a - b;
                 return b - a;
			});
			console.log(arr);
			//打印输出 [8,7,6,5,4,3,2,1]
				
		</script>
   </head>
		<body>
			
		</body>

</html>

文章来源:https://blog.csdn.net/JLY19970726/article/details/135245909
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。