web前端javaScript笔记——（6）数组
对象一般分为内建对象，宿主对象，自定义对象。
数组(Array)
数组也是一个对象
它和我们普通对象功能类似，也是用来存储一些值的
不同的是普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素案引:
从0开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
创建数组对象
var arr=new Array();
console.log(arr); ??//””
console.log(typeof arr); ??//Object
向数组中添加元素 ????数组[索引]=值
arr[0]=1;
读取数组中的元素 ????数组[索引]
console.log(arr[o]); ??
如果读取不存在的索引，不会报错，会返回undefined
可以用length来获取数组的长度（元素的个数）
console.log(arr.length);
打印输出数组 console.log(arr); ?//1,2,3,3(举个例子）
对于连续的数组，使用length可以获取到数组的长度(元素的个数)对于非连续的数组，使用length会获取到数组的最大的索引+1尽量不要创建非连续的数组
修改length
如果修改的length大于原长度，则多出部分会空出来如果修改的length小于原长度，则多出的元素会被删除
//arr.length = 10;
向数组的最后一个位置添加元素
arr[arr.length]=值
数组字面量
用字面量创建数组
var arr=[ ];
使用字面量创建数组时，可以在创建时就指定数组中的元素
var arr=[1,2,3,4,5,10 ];
使用构造函数来创建数组
var arr2 = new Array();
var arr2 = new Array(10,20,30);???//也可以创建时进行初始化
/使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
//创建一个数组数组中只有一个元素??arr=[10];
//创建一个长度为10的数组?????????arr2 = new Array(10);
console.log(arr2.length);//10
数组中的元素可以是任意的数据类型arr = ["hello",1,true,null,undefined];
console.log(arr[3]); //null
//也可以是对象
var obj = (name:"孙悟空"};??
arr[arr.length] = obj;
console.log(arr[arr.length] ??//[object Object]
arr[{name:”孙悟空”},{name:”猪八戒”},{name:”沙和尚”}];
console.log(arr); ??[object Object],[object Object],[object Object]
数组中的元素可以是任意的数据类型。也可以是对象，也可以是一个函数。
arr=[function(){alert(1)},function(){alert(2)}];
arr[0](); ?//调用函数
二维数组
arr=[[1,2,3],[2,3,4],[3,4,5]];
console.log(arr); ??//1,2,3,2,3,4,3,4,5
console.log(arr[0]); ??[1,2,3]
数组的方法
concat() ????????????连接两个或更多的数组，并返回结果。????????????
join() ??????????????把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() ??????????????删除并返回数组的最后一个元素
push() ?????????????向数组的末尾添加一个或更多元素，并返回新的长度
reverse() ???????????颠倒数组中元素的顺序。
shift() ?????????????删除并返回数组的第一个元素
slice() ?????????????从某个已有的数组返回选定的元素
sort() ?????????????对数组的元素进行排序
splice()?????????????删除元素，并向数组添加新元素。
toSource() ?????????返回该对象的源代码。
toString() ??????????把数组转换为字符串，并返回结果
toLocaleString() ????把数组转换为本地数组，并返回结果。
unshift() ??????????向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() ?????????返回数组对象的原始值
push()
该方法可以向数组的末尾添加-个或多个元素，并返回数组的新的长度可以将要添加的元素作为方法的参数传递，
这样这些元素将会自动添加到数组的末尾
//创建一个数组
var arr = [“孙悟空”"猪八戒”,"沙和尚"];
arr.push("唐僧");
console.log(arr);
"孙悟空，猪八戒，沙和尚，唐僧"
该方法会将数组新的长度作为返回值返回
var result = arr.push("唐僧”"蜘蛛精”，"白骨精”)
console.log(arr);
console.log("result = "+result);
pop()
该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
arr.pop();
result = arr.pop();
console.log(arr);
console.log("result = "+result);
unshift()
向数组开头添加一个或多个元素，并返回新的数组长度
arr.unshift("牛魔王","二郎神");
向前边插入元素以后，其他的元素索引会依次调整
shift()
可以删除数组的第一个元素，并将被删除的元素作为返回值返回
result = arr.shift();
数组的遍历
创建一个数组
var arr=[“孙悟空”,”猪八戒”,”沙和尚”,”白龙马”];
for(var i= ; i<arr.length ; i++){
console.log(arr[i]);
}
输出 “孙悟空”,”猪八戒”,”沙和尚”,”白龙马”
for(var i= ; i<10?; i++){
console.log(arr[i]);
}
输出 “孙悟空”,”猪八戒”,”沙和尚”,”白龙马”,”undefined”,”undefined”,”undefined”,”undefined”,”undefined”,”undefined”
//代码的改进，循环的终止条件为i<arr.length;
<script type="text/javascript">
//创建一个数组
var arr=["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
</script>
//打印输出：“孙悟空”,”猪八戒”,”沙和尚”,”唐僧”,”白骨精”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
//创建一个方法
function Person(name,age,gender){
this.name=name;
this.age=age;
}
//修改Person原型的toString
Person.prototype.toString=function(){
return "Person[name="+this.name+",age="+this.age+"]";
};
//创建一个Person对象
var per=new Person("孙悟空",18);
console.log(per);
//打印输出Person{name:"孙悟空"，age:18};
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
//创建一个方法
function Person(name,age,gender){
this.name=name;
this.age=age;
}
//修改Person原型的toString
Person.prototype.toString=function(){
return "Person[name="+this.name+",age="+this.age+"]";
};
//创建一个Person对象
var per=new Person("孙悟空",18);
//创建一个Person对象
var per2 = new Person("猪八戒",28);
var per3 = new Person("红孩儿",8);
var per4 = new Person("蜘蛛精",16);
var per5 = new Person("二郎神",38);
//将这些person对象放入到一个数组中
var perArr = [per,per2, per3,per4,per5];
/*创建一个函数，可以将perArr中的满18岁的Person提取出来然后封装到一个新的数组中并返回
arr
形参，要提取信息的数组*/
function getAdult(arr){
//创建- 个新的数组
//遍历arr，获取arr中Person对象
//判断Person对象的age是否大于等于18
//如果大于等于18，则将这个对象添加到newArr中
var newArr = [];
//遍历arr、获取arr中Person对象
for(var i=0; i<arr.length; i++){
var p = arr[i];
//判断Person对象的age是否大于等于18
if(p.age >= 18){
//如果大于等于18，则将这个对象添加到newArr中
//将对象放入到新数组中
newArr.push(p);
}
}
//将新的数组返回
return newArr;
};
//将新的数组返回return newArr;
var result = getAdult(perArr);
console.log(result);
/*Array(3) length:3
* [
{
"name": "孙悟空",
"age": 18
},
{
"name": "猪八戒",
"age": 28
},
{
"name": "二郎神",
"age": 38
}
]*/
</script>
</head>
<body>
</body>
</html>JS还给我们提供了一个方法，用来遍历数组forEach()，这个方法只支持IE8以上的浏览器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
//forEach()方法需要一个函数作为参数
//像这种函数，由我们创建但是不由我们调用的，我们称为回调函数数组中有几个元素函数就会执行几次
//数组中有几个元素函数就会执行几次，
//每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，
//我们可以来定义形参，来读取这些内容
//浏览器会在回调函数中传递三个参数:
arr.forEach(function(a){console.log("a = "+a);});
/*打印输出
a = 孙悟空
a = 猪八戒
a = 沙和尚
a = 唐僧
a = 白骨精*/
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
//创建一个数组
/*一般我们都是使用for循环去遍历数组，
JS中还为我们提供了一个方法，用来遍历数组forEach()
这个方法只支持IE8以上的浏览器，IE8及以下的浏览器均不支持该方法，
所以如果需要兼容IE8，不能使用forEach，还是使用for循环来遍历
*/
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
//forEach()方法需要一个函数作为参数
//像这种函数，由我们创建但是不由我们调用的，我们称为回调函数数组中有几个元素函数就会执行几次
//数组中有几个元素函数就会执行几次，
//每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，
//我们可以来定义形参，来读取这些内容
//浏览器会在回调函数中传递三个参数:
//第一个参数，就是当前正在遍历的元素
//第二个参数，就是当前正在遍历的元素的索引
//第三个参数，就是正在遍历的数组
arr.forEach(function(value,index,obj){
console.log("value = "+value);
console.log("index = "+index);
console.log(obj);
console.log(typeof obj);
console.log(obj==arr);
});
/*打印输出
a = 孙悟空
a = 猪八戒
a = 沙和尚
a = 唐僧
a = 白骨精*/
</script>
</head>
<body>
</body>
</html>slice和splice
slice()
-可以用来从数组中截取指定元案
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数:（包括左边，不包括右边）
1.截取开始的位置的索引
2.截取结束的位置的索引
var arr = [“孙悟空”,“猪八戒”,"沙和尚”，唐僧”，”白骨精”];
arr.slice(e,2);
console.log(arr); ??//打印输出的是原数组 “孙悟空”,“猪八戒”,"沙和尚”，唐僧”，”白骨精”
var result = arr.slice(0,2);
console.log(result);???//"孙悟空，猪八戒"
第二个参数可以省略不写,返回第一个参数开始的所有数组元素
result = arr.slice(1);
console.log(result);
//"猪八戒，沙和尚，唐僧,白骨精"
索引可以传递一个负值，-1 倒数第一个，-2 倒数第二个
result = arr.slice(1,-2);?
console.log(result);????//“猪八戒，沙和尚”
splice()
可以用于删除数组中的指定元素
使用splice()会影响到原数组，会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
var result = arr.splice(0,2);
console.log(arr);
console.log(result);
参数:
第一个，表示开始位置的索引
第二个，表示删除的数量
第三个及以后。。
可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
arr = ["孙悟空","猪八戒""沙和尚""唐僧”，"白骨精"];
var result = arr.splice(0,1,”牛魔王”,”铁扇公主”);
console.log(arr);
//console.log(result);???
//打印输出 ?“牛魔王，铁扇公主,猪八戒，沙和尚，唐僧,白骨精"
数组去重练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
//创建一个数组
var arr=[1,2,3,2,2,1,3,4,2,5];
//去除数组中重复的数字
//获取数组中的每一个元素
for(var i=0;i<arr.length;i++){
//获取当前元素之后的所有元素
for(var j=i+1;j<arr.length;j++){
//判断两个元素的值是否相等
if(arr[i]==arr[j]){
//如果相等则证明出现了重复的元素，则删除j对应的元素
arr.splice(j,1);
//当删除了当前位置的元素之后，后边的元素会自动补位
//所以需要再比较依次j所在位置的元素
//使j自减
j--;
}
}
}
console.log(arr);
//打印输出 1，2，3，4，5
</script>
</head>
<body>
</body>
</html>?
数组的剩余方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
var arr=["孙悟空","猪八戒","沙和尚"];
var arr2=["白骨精","玉兔精","蜘蛛精"];
var arr3=["二郎神","太上老君","玉皇大帝"];
/*concat()可以连接两个或多个数组，并将新的数组返回
该方法不会对新的数组产生影响*/
var result = arr.concat(arr2,arr3);
console.log(result);
/*打印输出
"孙悟空，猪八戒，沙和尚，白骨精，玉免精，蜘蛛精，二郎神，太上老君，玉垒大帝"*/
/*join()
该方法可以将数组转换为一个字符串输出
该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
如果不指定连接符，则默认使用,作为连接符
* */
result=arr.join();
console.log(result);
/*打印输出： 孙悟空，猪八戒，沙和尚*/
arr=["孙悟空","猪八戒","沙和尚"];
result=arr.join("hello");
console.log(result);
/*打印输出 孙悟空hello猪八戒hello沙和尚*/
/**reverse()
* 该方法用来反转数组（前边的去后边，后边的去前边）*/
arr.reverse();
console.log(arr);
//打印输出 ["沙和尚","猪八戒","孙悟空"]
//sort() 该方法可以对数组进行排序
arr=["b","d","e","a","c"];
arr.sort();
console.log(arr);
//打印输出"a","b","c","d","e"
/*对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
所以对数字进行排序的时候，可能会得到错误的结果
* 我们可以自己来指定排序的规则*/
/*我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的顺序,
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，也不交换位置*/
arr=[5,4];
arr.sort(function(a,b){
return 0;
});
console.log(arr);
//打印输出[5,4]
arr=[5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
//前边的大
/*if(a> b){
* return -1; 返回小于0的数字，元素的位置不变
* }else if(a < b)
* {
* return 1;
* }else(return 0;
};
*/
//升序排列
//return a - b;
return b - a;
});
console.log(arr);
//打印输出 [8,7,6,5,4,3,2,1]
</script>
</head>
<body>
</body>
</html>本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！