目录
数组 array
当我们需要处理一组数据时,一定性定义很多变量,比较难处理。这个时候我们就需要用到数组。
概念:
数组:一组数据的集合。其中每个数据被称为数组的元素。在数组中存放任意类型的数据。数组是将一组数据存储到单个变量名下的方式。
数组声明
三种声明:
1.通过new关键字创建数组。
<script>
var arr = new Array("赵", 2, 3);
console.log(arr); // (3) ["赵", 2, 3]
</script>
2.省略new关键字创建数组
<script>
var arr = Array("赵", 2, 3);
console.log(arr);
// Array(3)
// 0: "赵"
// 1: 2
// 2: 3
// length: 3
// __proto__: Array(0)
</script>
3.字面量赋值
<script>
var arr = ["赵", 2, 3];
console.log(arr);
/*输出 Array(3)
0: "赵"
1: 2
2: 3
length: 3
__proto__: Array(0)*/
</script>
【注】前两种方式,若传入参数只有一个,且为number时,这个数字表示声明的数组的长度,而不是存放的数据。(这种行为叫做创建数组并声明长度)
<script>
var arr = Array(3);
console.log(arr);
</script>
数组的特点
数组的长度(长度从1开始数)
arr.length
<script>
var arr = ["赵", 2, 3];
arr.length = 5;//设置数组的长度
console.log(arr);// ["赵", 2, 3, empty × 2]
</script>
数组的下标
从0开始,数据在数组中的序号。最大值为length-1.
访问数组元素。
格式:数组变量名[下标]
访问数组元素,需要通过下标去访问。(当下标值太大获取的数组里面没有时,
不会报错,返回undefined)
<script>
var arr = ["赵", 2, 3];
console.log(arr[4]);//undefined
</script>
下标可以是任意字符,如果下标是非正整数,我们称之为数组的属性,属性不影响数组的长度
<script>
var arr = [1, "a", "赵"];
arr["ziding"] = "hao";
console.log(arr);// [1, "a", "赵", ziding: "hao"]
console.log(arr.length); //3 长度仍为3,上面加的只是属性
</script>
数组的遍历 (循环)
0到length-1
两种循环遍历方式:
1.普通的for循环。(是通过下标遍历的)
var arr= [10,true,"hello",null,undefined ];
for (var i = 0; i <=arr.length-1; i++) {
document.write(arr[i] + " "); //10 true hello null undefined
}
2.for…in 循环 快速遍历法/快速枚举法
格式:
for (var key in 数组变量名) { }
key指的是下标
<script>
var arr= [10,true,"hello",null,undefined ];
for (var i in arr) {
document.write(arr[i] + " ");
}
</script>
上述两种循环遍历的方法都能够展示如下
(for in遍历能拿到有下标对应的值,拿不到空,但是能拿到里面的属性)
<script>
var arr = ["赵", 2, 3];
arr["zi"] = "hao";//自定义属性
arr.length = 5;
console.log(arr);
for (var i in arr) {
console.log(i);
console.log(arr[i]);
console.log("----------------------");
}
</script>
区别:
1.for in不需要每次都判断,效率更高
2.for in若在遍历过程中,数组发生了变化,会出现问题,不安全。
forEach()遍历(只能用于数组)
格式:数组.forEach(function(item,index)){ }
参数:
item:当前遍历的元素,
index:当前遍历元素的下标
arr:数组
<script>
var arr = [1, 2, 3, 4, 2,true];
arr.forEach(function(item,index) {
document.write("元素:" +item+ " 下标为:" +index+ "<br/>");
})
</script>
三种遍历的总结:
使用数组元素时,
1下标为非负整数(包括整数字符串);
数组[下标]
2下标为负数,小数,非整数字符串时;
数组[属性]
for ------->不遍历属性
foreath ------->不遍历属性和下标中的undefined
for in ------->不遍历下标中的undefined
数组方法
push()数组的末尾添加元素
功能:给数组的末尾添加元素
格式:数组名.push(参数…)
返回值:插入元素后的数组长度
var arr = [1,2,"3",true];
arr.push("8");
document.write(arr);
pop()数组的末尾取下一个元素
功能:在数组的末尾取下一个元素
格式:数组名.pop()
返回值:取下的元素。
unshift()头部添加
功能:从数组的头部添加元素
格式:数组名.unshift(参数…)
返回值:插入元素后的数组长度
shift()头部取下一个元素
功能:从数组的头部取下一个元素
格式:数组名.shift()
返回值:取下的元素。
concat()合并数组
功能:合并数组。
格式:数组名.concat(数组);
1.copy原数组,生成新数组。
2.将输入的数组中的元素单独拆分出来,添加到新数组中。
slice()获取当前数组指定区域的元素,生成新数组
功能:获取当前数组指定区域的元素,生成新数组。
格式:数组名.slice(start,end) 含头不含尾
start:开始位置的下标
end:结束位置的下标
返回值:新数组,原数组不变。
数组.slice()里面的参数可以是负值,
(下面例子第二个参数为-1时表示数组中最后一个值不在范围)
<script>
var arr = [1, 2, 3, 4, 5, 6];
var arr2 = arr.slice(0,-1);
console.log(arr2);// 输出 [1, 2, 3, 4, 5]
</script>
splice()截取, 新增, 修改,删除
截取
格式:数组.splice(start,length,数据…)
返回值:截取的元素
参数:
start:开始截取的位置
length:截取的长度
第三个参数开始:在start位置开始,插入新元素。
对数组元素的
新增
arr.splice(4,0,“5”);
修改
arr.splice(2,1,4);
删除
arr.splice(2,1);
<script>
var str = [1, 2, 3, 4, 5];
/* var str2 = str.splice(6, 0, 6);添加
console.log(str);// [1, 2, 3, 4, 5, 6]*/
/* var str2 = str.splice(4, 1);删除
console.log(str); // [1, 2, 3, 4]*/
var str2 = str.splice(0, 1, 9);//更改
console.log(str); // [9, 2, 3, 4, 5]*/
</script>
join()拼接字符串
格式:数组.join(字符串);
功能:将数组中元素用指定的字符串拼接
返回值:拼接好的字符串(这种行为可以把数组转成字符串)
reverse()数组元素反转
功能:将数组元素反转。
格式:数组.reverse();
该方法会修改原数组。
sort()数组元素排序
对数组中的元素进行排序
数组的排序
sort:按照Unicode编码比较,类似字符串的比较方式。
var arr = [1,15,2,23];
当有 两位数时就要这样排
arr.sort(function(value1,value2){
// 从小到大
// return value1 - value2;
// 从大到小。
return value2 - value1;
});
alert(arr);
---------------ES5新增常见方法----------------------------------------------
indexof()查找第一次出现元素的下标
功能:在数组中查找第一次出现元素的下标。
格式:数组.index(item,start);
参数:
item:要查找的元素
start:开始查找的位置
返回值:查找到的元素下标,若未查到,则返回-1。
lastIndexOf() :
从后往前遍历查找对应字符串,找到对应字符串结束返回数据,返回值为int类型,返回查找字符串首个字符位置(从0开始查找),未找到返回 -1;
var str = "123456321";
console.log(str.indexOf(3)); //2
console.log(str.lastIndexOf(3));//6
可以看到是从后往前查找第一次出现的下标位置,(这个第一次是正着数的第一次)
所以得出6(3第一次出现倒着数的位置是6);
二维数组
二维数组:数组中的元素为数组是,该数组被称为二维数组。
var arr = new Array(["韩信", 20, "打野"], ["鲁班", 9, "射手"], ["不知火舞", 24, "法师"]);
arr[1][1] = 10;
alert(arr);
冒泡排序
<script>
// 规则:从左到右,数组中相邻的两个元素进行比较。将较大(较小)的数放在后面。
// 规律:每一轮都可以找出一个最大(最小)值,放在正确的位置上。
// 比较的轮次:数组的长度-1
// 每一轮比较的次数:数组长度-当前的轮次
var arr = [7,3,4,6,5,1,2];
// 期望:2 4 5 6 7
// 2 7 6 4 5
//2 6 7 4 5
// 2 6 4 7 5
// 2 6 4 5 7
// 2 6 4 5 7
// 2 4 6 5 7
// 2 4 5 6 7
var sum = 0;
for (var i = 0; i < arr.length-1; i++) {
for (var j = 0; j < arr.length-1-i; j++) {
if (arr[j]>arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
alert(sum);
</script>
选择排序
<script>
//规则:选出一个位置,让这个位置上的数与后面的数比较,如果大于(小于)后面的数,则交换位置
,然后对该位置进行下一轮比较。
// 规律:每一轮,在当前位置找到正确的值。
//比较的轮次:数组的长度-1
// 每一轮比较的次数:数组长度-当前的轮次
var arr = [7,3,4,6,5,1,2];
//2,7,6,4,5 1轮
//2,7,6,4,5 2
//2,7,6,4,5 3
//2,7,6,4,5 4
//2,6,7,4,5 第二个位置的第一轮比较
//2,4,7,6,5 2轮
//2,4,7,6,5 3轮
//2,4,6,7,5 第三个位置上的第一轮比较
//2,4,5,7,6 二轮
//2,4,5,6,7 第四个位置上的第1轮比较
for (var i = 0; i < arr.length - 1; i++) {
for (var j = i+1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
var temp = arr[j];
arr[j] = arr[i];
arr[i] = temp;
}
}
}
</script>
区别:
冒泡排序是比较相邻的两个数。而选择是按照位置比较,不一定相邻。