文章目录
目标
了解数组的概念
掌握数组的基本操作（插入，删除等）
一、JavaScript数组
1.1、什么是数组
数组（Array）是有序的元素序列。 若将有限个变量的集合命名，那么这个名称为数组名。**组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量**。用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中，为了处理方便， 把若干元素按有序的形式组织起来的一种形式。 这些有序排列的数据元素的集合称为数组。数组是用于储存多个相同类型数据的集合。
数组是有序的元素序列。
数组中的每一个元素都有一个属于自己的编号 编号从0开始 被称为下标。
一组数据的集合
数组 **是在内存中开辟一组连续的内存空间。数组会自动的为每一个数据（元素），添加一个编号，这个编号从0开始，这个编号称为下标，**数组中的数据又被称为，下标变量 分量
注意：js数组不区分数据类型。可以自动扩容。
java数组： 固定数据类型 ，不会自动扩容。
数组的中数据如何取出呢？
1.1.1 javaScript 数组和JAVA数组对比
- JavaScript 数组是动态的，可以在运行时动态增加或减少大小，而JAVA是大小固定的
- JavaScript 数组可以容纳不同类型的数据，甚至可以混合不同类型的元素。而JAVA 必须是同类型
- 在 JavaScript 中，数组实际上是一种特殊的对象，而不是基本数据类型。 在 Java 中，数组是基本的数据结构，是一组具有相同类型的元素的有序集合。
- 在 JavaScript 中，数组可以是多维的，即数组的元素可以是另一个数组。 在 Java 中，多维数组是通过在数组类型后面添加多个括号来声明的
- 创建方式不同
- 异常不同 java越界会 ArrayIndexOutOfBoundsException 而js 会返回undefined 不抛出
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.5、常用的数组方法和函数
| 名称 | 描述 |
|---|---|
| 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 来移除对应的值。对于对象来说是可以的。但是对于数组来说，我们通常希望剩下的元素能够移动并占据被释放的位置。我们希望得到一个更短的数组。
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);
}
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
