这篇博客详细介绍了JavaScript中的数组，包括数组的创建、基本操作如push、pop、unshift、shift等，以及常用的数组方法如slice、splice、concat、join、reverse和sort。此外，还讲解了如何遍历数组，包括for循环和forEach方法，提供了实例帮助理解。
一、数组的简介
数组也是一个对象，它和普通对象类似，也可以存储值，不同的是普通对象使用字符串作为属性名，而数组使用数字作为索引来操作元素。
1.数组的基本操作
创建一个数组
（1）使用构造函数创建数组
语法一：var 数组名 = new Array(); 创建一个空数组
var arr = new Array();
语法二：var 数组名 = new Array(值1，值2…); 创建并添加元素
var arr = new Array(1,2,3);
语法三：var 数组名 = new Array(长度); 创建指定长度的数组
var arr = new Array(10);
（2）使用[]创建数组
语法一：var 数组名 = [];
var arr = [];
语法二：var 数组名 = [值1,值2,值3,… ,值n]，创建时同时添加元素
var arr = [1,2,3,4];
向数组中添加元素
数组中的元素可以是任意的数据类型
语法：数组名[索引] = 值
arr[0] = 10;
arr[1] = "hello";
arr[2] = true;
document.write(arr); // 10,"hello",true
读取数组中的元素
语法：数组名[]
- 读取不存在的索引不会报错，会返回undefined
document.write(arr[2]); //true
获取数组的长度
length：数组对象的一个属性，可以设置或返回数组当前的长度
- 对于连续的数组来说，length可以返回正确的长度
- 对不连续的数组，length返回的值是数组最大索引值加一，最好不要创建不连续的数组
- 为一个数组设置length值，
- 若length值小于数组实际长度，则会将多出来的元素删除
- 若length值大于数组实际长度，则将多余的位置空出来
//连续的数组
var arr2 = new Array();
arr2[0] = 5;
arr2[1] = 2;
arr2[2] = 4;
arr2[3] = 6;
document.write(arr2.length); //4
//不连续的数组
var arr3 = new Array();
arr3[0] = 5;
arr3[1] = 2;
arr3[2] = 4;
arr3[6] = 6;
arr3[9] = 9;
document.write(arr3.length); //10
//不连续的数组中没有赋值的位置都会空下来
document.write(arr3); //5,2,4,,,,6,,,9
var arr4 = new Array();
arr4[0] = 5;
arr4[1] = 2;
arr4[2] = 4;
arr4[3] = 6;
document.write(arr4 + "<br>"); // 5,2,4,6
arr4.length = 10;
document.write(arr4 + "<br>"); //5,2,4,6,,,,,,
arr4.length = 2;
document.write(arr4); //5,2
2.数组的常用方法
（1）push()
- 该方法可以向数组的末尾添加一个或多个元素，并返回数组新的长度
- 将要添加的元素作为方法的参数传递，元素会自动添加到数组的末尾
//创建一个数组
var arr = ["金智秀","金珍妮","朴彩英","Lalisa"];
document.write(arr+"<br>"); //金智秀,金珍妮,朴彩英,Lalisa
//push()
var result = arr.push("jisoo");
document.write(arr+"  " + result); //金智秀,金珍妮,朴彩英,Lalisa,jisoo 5
（2）pop()
- 该方法可以删除数组的末尾元素，并将被删除的元素作为返回值返回
//创建一个数组
var arr = ["金智秀","金珍妮","朴彩英","Lalisa","haha"];
document.write(arr+"<br>"); //金智秀,金珍妮,朴彩英,Lalisa,haha
//pop()
var result = arr.pop();
document.write(arr+"<br>"); //金智秀,金珍妮,朴彩英,Lalisa
document.write("result = "+result) //result = haha
（3）unshift()
- 该方法可以向数组的开头添加一个或多个元素，并返回数组的新长度
//创建一个数组
var arr = ["金智秀","金珍妮","朴彩英","Lalisa","haha"];
document.write(arr+"<br>"); //金智秀,金珍妮,朴彩英,Lalisa,haha
//unshift()
var result = arr.unshift("jisoo","jennie");
document.write(arr+"<br>"); //jisoo,jennie,金智秀,金珍妮,朴彩英,Lalisa,haha
document.write("result = "+result); //result = 7
（4）shift()
- 该方法会删除数组的第一个元素，并将被删除的元素作为返回值返回
//创建一个数组
var arr = ["嘿","金智秀","金珍妮","朴彩英","Lalisa","haha"];
document.write(arr+"<br>"); //嘿,金智秀,金珍妮,朴彩英,Lalisa,haha
//shift()
result = arr.shift();
document.write(arr+"<br>"); //金智秀,金珍妮,朴彩英,Lalisa,haha
document.write("result = "+result); //result = 嘿
（5）slice()
- 该方法可以从数组中提取指定元素
- 该方法不会改变原数组，而是将截取到的元素放在一个新数组中并返回
- 参数：
① 截取开始位置的索引，包括开始索引
② 截取结束位置的索引，不包括结束索引
第二个参数可以省略，省略时从开始位置一直截取到数组末尾
索引可以传递一个负值，-1指倒数第一个，-2指倒数第二个
//创建一个数组
var arr = ["嘿","金智秀", "金珍妮", "朴彩英", "Lalisa", "哈"];
document.write(arr + "<br>"); //嘿,金智秀,金珍妮,朴彩英,Lalisa,哈
var result;
document.write(arr.slice(1,5) + "<br>"); //金智秀,金珍妮,朴彩英,Lalisa
document.write(arr.slice(1) + "<br>"); //金智秀,金珍妮,朴彩英,Lalisa,哈
document.write(arr.slice(3,-1)); //朴彩英,Lalisa
（4）splice()
- 该方法可以删除数组中的指定元素，并在删除元素的位置添加新的元素
- 该方法会影响到原数组，会将原数组中的元素删除，并将被删除的元素作为返回值返回
- 参数：
① 表示开始删除的位置索引
② 表示要删除的元素数量
③... 表示要传入的新元素
//创建一个数组
var arr = ["嘿","金智秀", "金珍妮", "朴彩英", "Lalisa", "哈"];
document.write(arr + "<br>"); //嘿,金智秀,金珍妮,朴彩英,Lalisa,哈
var result;
//删除从0开始删除3个元素
document.write(arr.splice(0,3) + "<br>"); //嘿,金智秀,金珍妮
//删除后的原数组
document.write(arr + "<br>"); //朴彩英,Lalisa,哈
//从0开始删除0个元素，并添加两个元素
document.write(arr.splice(0,0,"jisoo","jennie")); // ""
//添加后的原数组
document.write(arr); //jisoo,jennie,朴彩英,Lalisa,哈
数组的去重练习
// 创建一个数组
var arr = [1,5,6,6,4,9,1,1,2,3,5,9,9];
// 获取数组中的所有元素
for(var i = 0; i<arr.length; i++){
// 获取当前元素后的所有元素
for(var j = i+1; j<arr.length; j++){
// 比较arr[i]与arr[j]，如果相等删除arr[j]
if(arr[i] == arr[j]){
arr.splice(j,1);
//删除arr[j]后，后面的元素会往前移动，所以要将j位置重新比一遍
j--;
}
}
}
// 输出去重后的数组
document.write(arr); // 1,5,6,4,9,2,3
（5）concat()
- 可以连接两个或多个数组
- 不会对原数组产生影响
（6）jion()
- 该方法可以将数组转换成字符串
- 不会对原数组产生影响
- 可以接收一个字符串作为参数，该字符串将会作为数组中元素的连接符
（7）reverse()
- 该方法用来反转数组
- 会直接修改原数组
（8）sort()
- 该方法用来对数组中的元素排序，默认按照Unicode编码排序，所以数字排序可能会出现错误
- 该方法会改变原数组
var arr = ["a","c","e","d","b"];
document.write(arr + "<br>"); //a,c,e,d,b
arr.sort();
document.write(arr); //a,b,c,d,e
- 我们可以在sort()中添加一个函数作为参数，来指定排序规则
回调函数需要两个形参，浏览器会分别使用数组中的两个元素作为实参去调用回调函数，传哪两个元素不能确定，但确定的是，参数一在参数二的前面
根据返回值来决定元素的顺序：
返回大于0的值，两个元素交换位置
返回小于0的值，两个元素不交换位置
返回0，说明两个元素相等，不交换位置
return a-b; 升序排列
return b-a; 降序排列
arr = [1,5,4,2,3,9,6,11];
document.write(arr + "<br>");//1,5,4,2,3,9,6,11
arr.sort();
document.write(arr +"<br>"); //1,11,2,3,4,5,6,9
//降序排列
arr.sort(function(a,b){
// if(a > b){ //如果a>b，不交换位置
// return -1;
// }else{ //如果a<b，则交换位置
// return 1;
// }
return b-a;
});
document.write(arr +"<br>"); //11,9,6,5,4,3,2,1
3.遍历数组
（1）使用for循环遍历数组
//创建一个数组
var bp = ["Blackink","Jisoo","Jennie","Rose","Lisa"];
//遍历数组
for(i = 0; i < bp.length; i++){
document.write(bp[i]+" "); //Blackink Jisoo Jennie Rose Lisa
}
练习
//创建一个Person类
function Person(name,age){
this.name = name;
this.age = age;
}
//创建Person类的实例对象
var per = new Person("Jisoo",19);
var per2 = new Person("Jennie",18);
var per3 = new Person("Rose",17);
var per4 = new Person("Lisa",17);
//将对象放在一个数组中
var perArr = [per,per2,per3,per4];
将数组perArr中成年的对象放在一个新数组中
function getAdult(arr){
//创建一个新的数组
var newArr = [];
//遍历arr，获取arr中的Person对象
for(var i = 0; i<arr.length; i++){
//判断Person对象的age是否大于等于18
if(arr[i].age >= 18){
//如果成立将该Person放入新数组中
newArr.push(arr[i].name);
}
}
return newArr;
}
var result = getAdult(perArr);
document.write("result = "+result); // result = Jisoo,Jennie
（2）使用forEach()方法遍历数组
数组对象的foEach() 方法：
- IE8以上支持
- 需要一个函数作为参数，这种函数由我们创建，但不由我们调用，称为回调函数
- 数组中有几个元素，该函数就执行几次。每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参来读取这些内容。
- 浏览器会在回调函数中传递三个参数
第一个参数：当前正在遍历的元素
第二个参数：当前遍历元素的索引
第三个参数：正在遍历的数组对象
//创建一个数组
var bp = ["Blackink","Jisoo","Jennie","Rose","Lisa"];
//遍历数组
bp.forEach(function(value,index){
document.write(index + "-->" + value+" ");
//0-->Blackink 1-->Jisoo 2-->Jennie 3-->Rose 4-->Lisa
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
