javaScript 数组2021-07-20

JavaScript

目标

了解数组的概念

掌握数组的基本操作（插入，删除等）

一、数组
1.1、什么是数组
​ 数组（Array）是有序的元素序列。 [1] 若将有限个变量的集合命名，那么这个名称为数组名。**组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量**。用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中，为了处理方便， 把若干元素按有序的形式组织起来的一种形式。 [1] 这些有序排列的数据元素的集合称为数组。数组是用于储存多个相同类型数据的集合。

数组是有序的元素序列。

数组中的每一个元素都有一个属于自己的编号 编号从0开始 被称为下标。
一组数据的集合
数组 **是在内存中开辟一组连续的内存空间。数组会自动的为每一个数据（元素），添加一个编号，这个编号从0开始，这个编号称为下标，**数组中的数据又被称为，下标变量 分量
注意：js数组不区分数据类型。可以自动扩容。
java数组： 固定数据类型 ，不会自动扩容。
数组的中数据如何取出呢？

1.2、为什么用数组

为了方便
下标的作用，就是区分数组中的每一个数据。
1.3、数组的使用
1.3.1、数组的定义
方式一：

var arr=new Array（）；构造方法
var arr=new Array（5）；创建一个初始长度为五的空数组
var arr=new Array（1，“a”，2）；创建一个带有初始数据的数组；

方式二、
	绝大多数情况下使用的都是第二种语法。我们可以在方括号中添加初始元：

var arr1=【】 构造方法
var arr1=【1,2，3,4，】；创建一个带有初始数据的数组；

1.3.2、数组的取值和赋值

数组可以存储任何类型的元素。

数组取值：数组名[下标];

数组赋值（修改）：数组名[下标] = 要修改的值;
数组元素从 0 开始编号。
length属性的值是数组中元素的总的个数

let fruits = ["Apple", "Orange", "Plum"];
 
alert( fruits.length ); // 3

也可以用 alert 来显示整个数组。

我们可以通过方括号中的数字获取元素

let fruits = [“Apple”, “Orange”, “Plum”];

alert( fruits[0] ); // Apple
alert( fruits[1] ); // Orange
alert(fruits[2] ); // Plum

1.3.3、数组的遍历

for循环遍历
for in遍历

var arr=[12,213,24,23,45]
for(var i=0;i<arr.length;i++){
	console.log(arr[i]);//控制台输出
}
for(var i in arr){
	console.log(arr[i]);
}

1.4数组的操作增删改查

var arr1=[34,35,56,67,78,89];
		alert(arr1+"你tm想在哪个后面插")
		 function aaaa(a){
				for(var i=0;i<arr1.length;i++){
					if(arr1[i]==a){
						break;
					}
					}
					if(-1<i && i<arr1.length){
						return i;
					}else{
						return -1;
					}
	
				} 
				//求值对应的下标
 var index1=aaaa(prompt("")); 		
			 function  bbb(index){ 
				
				
				
				for(var j=arr1.length-1;j>index;j--){
					arr1[j+1]=arr1[j]
					
				}
				var cr=prompt("插入什么")
				 arr1[index+1]=cr;
				alert(arr1); 
				}
//插入一个数让其他数后移
 function aaa(index){    
			for(var	z=index;z<arr1.length;z++){
				arr1[z]=arr1[z+1];
			}
			arr1.length--;
			
			alert(arr1);} 
			//aaa（）+bbb（）=插入一个数 
			bbb(index1);
			
			aaa(index1);

冒泡排序

var arr=[12,30,14,20,16,17,18,19];
for(var j=0;j<arr.length-1;j++){
for(var i=0;i<arr.length;i++){
if(arr[i]>arr[i+1]){
var temp =arr[i];
arr[i]=arr[i+1];
arr[i+1]=temp;

				}
			}
		}
		console.log(arr);
		第一轮比较已将可以把最小的数字挪到最后一位，第二轮比较将第二小的数字移动到倒数第二位，下边依次。。。。

所以第一轮只需要比较6次，第二轮只需要比较5次，第三轮只需要比较4次，第四轮需要比较3次，第五轮需要比较2次，第六轮需要比较1次。

所以内层循环每次只需要比较arr.length-j-i次！

for(var j=0;j<arr.length-1;j++){
				for(var i=0;i<arr.length-j-i;i++){
					if(arr[i]>arr[i+1]){
						var temp =arr[i];
						arr[i]=arr[i+1];
						arr[i+1]=temp;
							
					}
				}
			}
			console.log(arr);

扩展：选择排序，二分法 了解。
点击按钮改变页面背景颜色，使用数组作为数据源

<body>
		<button type="button" onclick="color1()">点我换颜色</button>
		
		
		<script type="text/javascript">
				var i=0;
			var color=["red","blue","yellow","green","pink","black","pourple"];
			function color1(){
				document.body.style.backgroundColor=color[i];
				i++;
			}
			if(i==7){
				i=0;
			}
		</script>
	</body>

点击p标签时，改变p标签的背景颜色

body>
		<button type="button" onclick="color1()">点我换颜色</button>
		<p id="aaaa" onclick="aaa()" >点我换颜色 </p>
	
		<script type="text/javascript">
		function aaa(){
				var color=["red","blue","yellow","green","pink","black","pourple"];
				document.getElementById("aaaa").style.backgroundColor=color[i];
				i++;
				
			}
			if(i==7){
				i=0;
			} 
				</script>
	</body>

1.4常用的数组方法和函数

名称描述
join(’-’)将数组转换为使用符号连接的字符串
concat(arr1,arr2)与另一个数组合并为一个新数组
reverse()将数组反转
sort(function(){排序规则})对数组进行排序
push(ele1,ele2)向数组末尾添加新元素
unshift(ele1,ele2)向数组的开头添加新元素
pop()删除数组中末尾的值 返回删除的值
shift()删除数组中开头的值 返回删除的值 与pop()相反
splice(1,2,3,4)删除、替换、插入数组元素
indexOf(ele)查找元素的下标位置

join
语法格式：
array.join(separator)

 var arr=[12,13,14,15]
		
			 var arr1=arr.join(';');
			 alert(arr1);//12;13;14;15

concat
语法格式：
string.concat(string1, string2, …, stringX)

var arr=[12,13,14,15];
		var arr2=[21,23,24,25];
		var arr3=arr.concat(arr2);
		alert(arr3);//12,13,14,15,21,23,24,25;

reverse
语法格式：
array.reverse()

var arr=[12,13,14,15]
		arr.reverse();
		alert(arr);	//15,14,13,12

sort
语法格式
array.sort(sortfunction)
数组的sort方法 括号的sort的函数排序方法例如
从小到大

 var arr=[12,16,14,15];
			 arr.sort(function(a,b){return a-b})
			 
			alert(arr);

这里使用箭头函数会更加简洁：

arr.sort( (a, b) => a - b );

push
语法格式
Array.push();

var arr1=[12,13,14,15,16];
			arr1.push(17);
			alert(arr1);

unshift

var arr1=[12,13,14,15,16];
			arr1.unshift(17);
			alert(arr1);

pop（）

var arr1=[12,13,14,15,16];
			alert( arr1.pop());//16

shift

var arr1=[12,13,14,15,16];
			alert( arr1.shift());

splice

var arr=[12,13,14,15,16];
			
			delete arr[0];
			alert(arr);//13,14,15,16;

元素被删除了，但数组仍然有 3 个元素
因为 delete obj.key 是通过 key 来移除对应的值。对于对象来说是可以的。但是对于数组来说，我们通常希望剩下的元素能够移动并占据被释放的位置。我们希望得到一个更短的数组。
splice
arr.splice(1,4)
删除 从哪一个下标开始，删除几个元素。

var arr=[12,13,14,15,16]
			arr.splice(1,4)
			alert(arr);

arr.splice(1,4,“sdfs”,“sdfs”);也可以删除后继续添加

indexOf
查询下标 注意注意注意===完全等于

var arr=[12,13,14,15,16]
			alert(arr.indexOf(12));//0

练习
1.书写五个文本框，对五个文本框中的内容进行排序——把排序后的内容重新放入五个框。

<body>
		<input type="" name="input" id="d1" value="" /><br>
		<input type="" name="input" id="d2" value="" /><br>
		<input type="" name="input" id="d3" value="" /><br>
		<input type="" name="input" id="d4" value="" /><br>
		<input type="" name="input" id="d5" value="" /><br>
		<button type="button" onclick="aaa()">排序</button>
		
		<script type="text/javascript">
 function aaa(){
 
				 arr[0]=document.getElementById("d1").value;
				 arr[1]=document.getElementById("d2").value;
				 arr[2]=document.getElementById("d3").value;
				 arr[3]=document.getElementById("d4").value;
				 arr[4]=document.getElementById("d5").value;
				 for(var j=0;j<arr.length-1;j++){
				 	for(var i=0;i<arr.length;i++){
				 		if(arr[i]>arr[i+1]){
				 			var temp =arr[i];
				 			arr[i]=arr[i+1];
				 			arr[i+1]=temp;			 				
				 		}
				 	}
					
				 }
				 alert(arr);
				 document.getElementById("d1").value=arr[0];
				 document.getElementById("d2").value=arr[1];
				 document.getElementById("d3").value=arr[2];
				 document.getElementById("d4").value=arr[3];
				 document.getElementById("d5").value=arr[4];
			 }
			 </script>

升级版
输入框没写和上面一样

//吧多个input的1值都赋值给inp 在让inp的值循环push给inpValue
			 function aaa(){ 
			 var inp =document.getElementsByTagName("input");
			 var inpValue= new Array(5);
		
			for(var i=0;i<5;i++){
				inpValue.push(inp[i].value);				
			}
			inpValue.sort(function(a,b){return a-b})
			inpValue.sort((a,b)>= a-b);
			
			for(var g=0;g<=inpValue.length;g++){
				
				inp[g].value=inpValue[g];
				
			}
			alert(inpValue);
			
			  }
posted @   啧啧啧|(*￣￣*)  阅读(10)  评论(0)  编辑  收藏  举报  
相关博文：
· JAVA 数组第六天
· JAVA基础容器and集合（十）
· javaScript-数组
· day003数组
· JavavScript数组
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae