JS 数组

最新推荐文章于 2024-10-10 10:50:43 发布

久醉呀

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量66

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_35991442/article/details/126184068

版权

本文详细介绍了JavaScript中数组的创建方式，包括new Array和数组字面量；展示了四种遍历方法：for、for...in、forEach和for...of；涵盖了数组的基本操作如追加、修改、获取、删除及常用方法，如排序、拼接、判断等。通过实例演示了冒泡排序和实战练习，适合巩固数组知识。

摘要由CSDN通过智能技术生成

前言

今天学习一下最近正在学习的东西——JS中的数组，也算是复习巩固一下。

一、数组的创建

数组有两种创建方法：
1.利用new创建数组
var arr = new Array();
2.利用数组字面量创建数组
var arr = [ ];

二、数组的遍历

数组的遍历有四种
1.fori,i下标
2.for 下标 in 数组名
3.forEach(function(每一项,对应下标,数组本身)
4.for item of arr(数组名);

三、数组的一些方法

1、数组追加
array.unshift(10,20,30) 开头追加
array.push(10,20,30) 末尾追加

2、数组修改
array[index]=新的值；

3、获取数据
array[index]

4、删除数据
array.shift() 开头删除
array.pop() 末尾删除
array.splice(开始下标,删除个数,替换的数据)

5、数组方法
var arr=array.concat(array1) 拼接数组
array.reverse() 翻转数组
array.join(“”) 将数组连接为字符串
array.includes() 判断数组是否包含
array.indexof() 查找数据的第一个下标
array.lastIndexof() 查找数据的最后一个下标
Array.isArray(array) 判断是否是数组
array.slice(开始下标，结束下标) 截取(结束下标不闭合)

6、数组方法(回调函数)
array.forEach(function(item,index,self){}) //遍历数组
var bool=array.every(function(item,index,self){}) //判断所有元素是否复合条件
var bool=array.some(function(item,index,self){}) //判断是否有元素复合条件
var firstNumber=array.find(function(item,index,self){}) //查询符合条件的第一个元素
var firstIndex=array.findIndex(function(item,index,self){}) //查询符合条件的第一个元素下标
var arr=array.filter(function(item,index,self){}) //过滤出所有符合条件的所有元素
var newarray=array.map(function(item,index,self){}) //返回处理后的新数组
var res=array.reduce(function(res,item,index,self){},“初始值”) //res，返回每一次的处理结果

四、冒泡排序

核心思想：
n个数字来排队，两两相比小靠前
外层循环n-1，内层循环n-1-i

下面练习中还有第二种方法，利用sort( )方法来写

五、练习

1、数组遍历
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			 var scores=[10,20,50,90,80];
			//1、fori,i下标
			for (var i =0; i <scores.length; i++) {
				console.log(scores[i]);
			}
			//2、for 下标 in 数组名
			for(var i in scores){
				console.log(scores[i]);
			}
			//3、.forEach(function(每一项,对应下标,数组本身)，
			//forEach方法没有返回值，回调函数
			scores.forEach(function(item,index,self){
				console.log(item,index);
				console.log(self);
			})
			scores.forEach(function(item,index){
				console.log(item,index);
			})
			scores.forEach(function(item){
				console.log(item);
			})
			//4、for of
			for (var item of scores) {
				console.log(item);
			}
		</script>
	</body>
<html>

效果图：
在这里插入图片描述
2、数组的方法
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var names=['张三','李四','王五'];
			//末尾追加
			names.push('郭靖','黄蓉');
			//末尾删除
			names.pop();
			//开头添加
			names.unshift('沈腾','马丽');
			//开头删除
			names.shift();
			console.log(names);
			//删除并替换
			// names.splice(startIndex,length,["替换的元素"])
			names.splice(1,1);  //删除张三
			console.log(names);
			names.splice(1,3,'赵六','狗蛋');
			console.log(names);
		    
			
			var num1=[10,20,30];
			var num2=[10,20,30,50,60];
			//数组连接
			var num3=num1.concat(num2);
			console.log(num3);
			//数组翻转
			num1.reverse();
			console.log(num1);
			//splice  截取  string也有
			var num5=num2.slice(1,4);
			console.log(num5);
			//拆分和合并
			/ring  split
			var str='长亭外-古道边-芳草碧连天';
			//将字符串拆分为数组
			var array=str.split("-");
			console.log(array);
			//将数组合并为字符串
			var str2=array.join(",");
			console.log(str2);
		</script>
	</body>
<html>

效果：
在这里插入图片描述
3、冒泡排序
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		/* 	  16,25,9,90,23    5个数
		0第一轮:16 9 25 23  90   4次=5-1-0
		1第二轮:9 16 23 25       3次=5-1-1
		2第三轮:9 16 23          2次=5-1-2
		3第四轮:9 16             1次=5-1-3
		 
		   n个数字来排队，两两相比小靠前
		   外层循环n-1，内层循环n-1-i
		*/
			var array=[16,25,9,90,23];
			//外层控制轮数
			for (var i =0; i <array.length-1; i++) {
				//内层控制比较的次数
				for(var j=0;j<array.length-1-i;j++){
					//两两相比
					if(array[j]>array[j+1]){
						var temp=array[j];
						array[j]=array[j+1];
						array[j+1]=temp;
					}
				}
			}
			console.log(array);
			
			 //排序方法
				var array2=[16,25,9,90,23];
				array2.sort(function(a,b){
					// return a-b; //升序排序
					return b-a;    //降序排序
				})
				
				console.log(array2);
			
			
		</script>
	</body>
</html>