1.数组简介：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 数组（Array）
* - 数组也是一个对象，功能和普通对象（Object）的功能类似的
* - 数组中也可以保存不同的元素，不同的是普通对象是通过一个字符串作为属性名来操作属性的，
* 而数组是通过索引来操作元素的。
* - 索引（index）
* - 索引就是从0开始的整数
* - 数组比普通对象的存储效率要高，在开发中我们经常使用数组来存储一些数据
*/
//创建一个数组对象
var arr = new Array();
//使用typeof检查一个数组对象时会返回object
//console.log(typeof arr);
/*
* 向数组中添加元素
* - 语法：
* 数组[索引] = 值;
*/
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
arr[4] = 30;
arr[10] = 300;
arr[78] = 300;
/*
* 读取数组中的元素
* - 语法：
* 数组[索引]
*/
//如果读取一个数组中没有的元素，会返回undefined
//console.log(arr[4]);
//获取数组的长度
/*
* length
* - length属性可以获取或设置数组的长度
* - 对于连续的数组通过length属性获取到的就是数组中元素的个数
* - 对于非连续的数组length属性获取到的就是数组的最大索引+1（不要使用非连续数组）
*/
//console.log(arr.length);//获取数组的长度
//修改数组的length属性
//如果将长度修改为小于之前的长度的值，则多余的部分会被删除
arr.length = 5;
//如果将长度修改为大于之前的长度的值，则会数组中会创建出空的元素
//arr.length = 10;
//向数组的最后添加一个元素
//语法：数组[数组.length] = 值;
arr[arr.length] = 55;
arr[arr.length] = 75;
arr[arr.length] = 85;
console.log(arr);
</script>
</head>
<body>
</body>
</html>
2.字面量数组：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 数组的字面量
*/
//var arr = new Arry();
var arr = [] ;
//console.log(arr instanceof Array);
/*
* 使用字面量，可以在创建数组的同时，向数组中添加元素
* 语法：
* var 数组 = [元素1,元素2...元素N];
*/
arr = [1,2,3,4,5,6,7];
//console.log(arr[6]);
arr = new Array(1,2,3,4,5,6,7);
arr = [10];//创建一个数组并向数组中添加一个元素
arr = new Array(10);//创建一个长度为10的数组
//console.log(arr.length);
/*
* 在数组中可以保存任意类型的元素
*/
arr = [1,"hello",true,null,undefined,{name:"孙悟空"},function(){}];
//console.log(arr[5].name);
//console.log(arr[6]);
//数组中也可以保存数组，如果数组中保存的依然是数组，则我们称这个数组为二维数组
arr = [
[1,2,3],
[4,5,6],
[5,6,7]
];
console.log(arr[0][1]);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个数组
*/
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
* push()
* - 该方法可以用来向数组的末尾添加新的元素,并返回数组的新的长度
*/
//console.log(arr);
var result = arr.push("唐僧","白骨精","蜘蛛精");
//console.log(arr);
//console.log("result = "+result);
/*
* pop()
* - 用来删除并返回数组的最后一个元素
* - 元素删除以后，会自动修正数组的长度
*/
result = arr.pop();
result = arr.pop();
//console.log(arr);
//console.log("result = "+result);
/*
* unshift()
* - 向数组的最前边添加元素，并返回新的长度
*/
result = arr.unshift("牛魔王","铁扇公主");
console.log(arr);
//console.log("result = "+result);
/*
* shift()
* - 删除数组最前边的元素，并返回被删除的元素
* - 删除完元素以后，会自动调整数组的长度
*/
result = arr.shift();
result = arr.shift();
console.log(arr);
console.log("result = "+result);
console.log(arr.length);
</script>
</head>
<body>
</body>
</html>
4.遍历数组:
方式一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个数组
*/
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精","蜘蛛精"];
/*
* 遍历数组
* - 遍历数组就是指将数组中的每一个元素都获取到
* - 一般情况下遍历数组都是使用for循环来遍历
*/
for(var i = 0 ; i < arr.length ; i++ ){
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
/*
* 也可以使用forEach()来遍历数组
* forEach()中需要一个函数作为参数
* - 像这种由我们定义而不由我们调用的函数，我们称为回调函数
* - forEach()中的回调函数，由浏览器调用，
* 数组中有几个元素函数就会被调用几次，
* 每次遍历到一个元素都会调用一次函数，浏览器会通过实参的形式来将遍历到内容传递进函数
* - 浏览器在调用回调函数传递了三个实参：
* 第一个参数：正在遍历的元素
* 第二个参数：正在遍历的元素的索引
* 第三个参数：正在遍历的数组对象
*
* - forEach()方法不支持IE8及以下的浏览器，所以如果需要兼容IE8则不要使用
*
*/
arr.forEach(function(value , index , obj){
console.log("value = "+value + " index = "+index+" obj = "+obj);
});
</script>
</head>
<body>
</body>
</html>
5.练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(name , age){
this.name = name;
this.age = age;
}
//向原型中添加toString
Person.prototype.toString = function(){
return "Person[name="+this.name+", age="+this.age+"]";
};
//创建几个Person的实例
var per1 = new Person("孙悟空",18);
var per2 = new Person("猪八戒",28);
var per3 = new Person("白骨精",16);
var per4 = new Person("蜘蛛精",14);
var per5 = new Person("红孩儿",8);
var per6 = new Person("奔波霸",58);
//将这些对象保存到一个数组中
var perArr = [per1 , per2 , per3 , per4 , per5 , per6];
//对perArr数组进行遍历，并将其中成年人的信息输出
for(var i=0 ; i<perArr.length ; i++){
//判断是否是成年人
if(perArr[i].age > 17){
console.log(perArr[i]);
}
}
</script>
</head>
<body>
</body>
</html>
6.数组方法：slice（），splice（）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
/*
* slice()
* - 可以用来截取数组中的指定元素
* - 参数：
* 第一个参数，截取开始的位置(包括开始的位置)
* 第二个参数，截取结束的位置(不包括结束的位置)
* - 该方法不会影响到原数组，而是将截取到的内容封装为一个新的数组返回
* - 可以传递一个负数作为参数，如果是负数，则从后往前数
* -1 表示 倒数第一
* -2 表示 倒数第二
* - 如果省略第二个参数，则从开始位置一直截取到最后
*/
var result = arr.slice(1,3);
result = arr.slice(1,-2);
result = arr.slice(1);
//console.log(result);
/*
* splice()
* - 可以用来删除数组中的元素，并添加新元素
* - 它会影响到原数组，一旦执行原数组中的元素将会被删除
* - 参数：
* 第一个参数，开始位置的索引
* 第二个参数，表示删除的个数
* 第三个参数，这个方法还可以传递多个参数
* 在第三个参数以后，可以跟多个元素作为参数，
* 这些元素将会被插入到开始位置之前的位置
* - 它会将被删除的元素作为返回值返回
*
*/
arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
//result = arr.splice(0,1);
//牛魔王替换 索引为0的元素
//result = arr.splice(0,1,"牛魔王");
//arr.splice(2,1,"牛魔王","红孩儿","二郎神");
arr.splice(2,0,"牛魔王","红孩儿","二郎神");
console.log(arr);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个数组
var arr = [1,2,3,1,1,1,4,2,3,5];
//去除调用数组中重复的数字
//获取数组中的数字
for(var i=0 ; i<arr.length ; i++){
//console.log(arr[i]);
//再次遍历数组
for(var j=i+1 ; j<arr.length ; j++){
//console.log("----->" + arr[j]);
//比较两个数字是否相等
if(arr[i] == arr[j]){
//进入判断，证明两个数字重复，则删除arr[j]
arr.splice(j,1);
//需要在此位置在比较一次
j--;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
7.数组的其他方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒"];
var arr2 = ["白骨精","蜘蛛精"];
var arr3 = ["太上老君","如来佛祖"];
/*
* concat()
* - 可以用来连接两个或多个数组
* - 不会影响原数组，而是将新的数组的返回
* - 可以将多个数组作为concat参数传递，也可以传递单个的元素
*/
var result = arr.concat(arr2 , arr3 , "唐僧");
//console.log(result);
/*
* join()
* - 可以将数组中的所有的元素连接为一个字符串
* - 该方法可以接收一个字符串作为参数，这个字符串将会将会作为连接符来连接元素
* 如果不传，默认使用,
*/
arr = ["孙悟空","猪八戒","沙和尚"];
result = arr.join("@-@");
//console.log(result);
/*
* reverse()
* - 该方法可以用来反转数组
* - 前边的去后边，后边的去前边
* - 它会影响到原数组，直接在原数组上反转
*/
//arr.reverse();
//console.log(arr);
/*
* sort()
* - 可以用来对数组中的元素进行排序
* - sort()会影响到原数组
* - 默认它会按照元素的Unicode编码进行排序
* - 如果希望使用sort对一个数字型的数组进行排序可能会得到不可预期的结果
* 因为它同样也会按照数字的Unicode编码进行排序
* - 我们也可以自己来指定排序的规则
*
*/
var arr4 = ["a","c","b","e","d","f"];
arr4.sort();
//arr4 = [2,3,10,5,4,6];
/*
* 如果需要自定义排序规则，需要将一个函数作为参数传递给sort()方法
* 函数的结构：function(a , b){}
*
* 浏览器会多次以数组中的元素作为实参来调用该函数，
* a和b具体是谁不确定，但是a一定是在b前边
* 浏览器将会根据函数的返回值，来决定两个元素是否交互位置
* 如果返回一个大于0的值，则两个元素互相交换位置
* 如果返回一个等于0的值，则证明两个元素相等，位置不变
* 如果返回一个小于0的值，两个元素的位置也不变
*
*/
arr4 = [10,4,3,5,2];
arr4.sort(function(a,b){
/*//升序 小 ---> 大
if(a > b){
//交换位置
return 1;
}else if(a == b){
return 0;
}else{
return -1;
}*/
//降序 大 ---> 小
/*if(a > b){
//交换位置
return -1;
}else if(a == b){
return 0;
}else{
return 1;
}*/
//如果希望升序排列，则 返回 a-b
//return a - b;
//如果希望降序排列，则 返回 b-a
return b - a;
});
console.log(arr4);
</script>
</head>
<body>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
