提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
1.数组的简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
内建对象
*
* 宿主对象
*
* 自定义对象
*
*
* 数组(array)
* - 数组也是一个对象
* - 它和我们普通对象功能类似，也是用来存储一些值的
* - 不同的是普通对象使用字符串作为属性名的，
* 而数组时使用数字来作为索引(index)操作对象(index也叫下标)
* - 索引(index):
* 从0开始的整数就是索引
* - 数组的存储性能比普通对象要好，在开发过程中我们经常使用数组来存储一些数据
*
*/
//创建数组对象(数组也是一个对象：什么是面向对象——找对象搞对象)
var arr = new Array();
//使用typeof检查一个数组的时候，会返回object
//console.log(typeof arr);
/*
向数组添加元素
* 语法：数组[索引] = 值
*
* 其实和给对象属性赋值：arr.name=值;一模一样
*/
arr[0] = 10;
arr[1] = 30;
arr[0] = 20;
//非连续的数组
arr[10] = 99;//11
/*
读取数组中的元素
* 语法：数组[索引]
*
*/
//console.log(arr[3]);
/*
获取数组的长度
可以使用length属性来获取数组的长度(元素的个数)
语法：数组.length
对于连续的数组，使用length可以获取到数组的长度(元素的个数)
对于非连续的数组，使用length会获取到数组的最大索引+1
尽量不要创建非连续的数组
*
*/
//查看数组的长度
//console.log(arr.length); 显示4
//console.log(arr);显示的是数组：10 30 20 99
/*那么我们可以修改length吗？它是一个属性，当然可以修改啊
两种修改length的
* 如果修改的length大于原长度，则多出部分会空出来
* 如果修改的length小于原长度，则多出的元素会被删除
*/
//aar.length = 10;
//console.log(arr.length); 显示10
//console.log(arr);显示的是数组：10 30 20 99,,,,,,
/*那我们如果不知道数组的长度，就想向数组的最后一个值添加数呢？
语法：
数组[数组.length] = 值；
* */
arr[arr.length] = 70;//显示10 30 20 99 70
arr[arr.length] = 80;//显示10 30 20 99 70 80
arr[arr.length] = 90;//显示10 30 20 99 70 80 90
</script>
</head>
<body>
</body>
</html>
2.数组的字面量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
创建数组的方式：使用Array()函数、使用字面量
方式一：
* var arr = new Array();
*
* 方式二(使用字面量)：
* 语法：var 数组名 = [];
* var arr = [];
*/
//console.log(typeof arr);查看是否是数组类型的对象
//使用字面量创建数组时，可以在创建就指定数组中的元素
var arr = [1,2,3,5,8,40];
//检查数组长度
//console.log(arr.length);//显示6
console.log(arr[3]);//找到相应位置的数组元素
/*使用构造函数的数组也可以定义这样*/
/*使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
元素之间使用逗号,隔开
*
* */
var arr2 = new Array(10,20,30);
//console.log(arr2);//显示一整个
/*区别：构造函数和字面量数组*/
//创建数组中只有一个元素10
arr = [10];//window.arr
//console.log(arr);//显示：10
console.log(arr[0]);//显示：10
//创建一个长度为10的数组
arr2 = new Array(10);
//console.log(arr2);//显示10个逗号,:,,,,,,,,,,
//console.log(arr2.length);显示10
//1.添加属性
//数组中的元素可以是任意的数据类型
//arr = ["hello" ,1,true,null,undefined];
console.log(arr);//显示的是hello,1,true,,
//2.所以也可以添加对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;//向最后一个添加一个元素是对象
//console.log(arr[5]);
//arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}]
//console.log(arr[1].name);//显示：沙和尚
//3.放一个匿名函数
//arr = [function(){alert(1)},function(){alert(2)}]
//console.log(arr);//显示全部
//调用数组里面的函数
//arr[0]();
//4.数组里面放数组，如下这种数组我们称为二维数组
arr = [[1,2,3],[4,5,6],[7,8,9]];
console.log(arr(0));//显示：123
//5.数组的数组的数组还可以放：三维数组，四维数组....疯狂套哇
</script>
</head>
<body>
</body>
</html>
3.数组的4个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
先下载一个W3School的离线手册
*
*/
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
push()
- 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
- 可以将要添加的元素作为方法的参数传递
这样这些元素将会自动添加到数组的末尾
*
*
*/
//arr.push("唐僧");//相当于arr[arr.length];//在这它只能一次添加一个
//可以使用push()方法多加元素
//arr.push("唐僧","蜘蛛精","白骨精");
//那么 是方法就会有返回值：
var result = arr.push("唐僧","蜘蛛精","白骨精");
//console.log(arr);//显示：孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精
//console.log("result ="+result);//result =6
/*
pop()
* - 该方法可以删除数组的最后一个元素
* - 调用一次删除一回
* - pop()的返回值是一个被删的元素（将被删除的数作为返回值返回）
-都是从后面pop()删除的和push()添加的
*/
//var result = arr.pop();
//arr.pop();//孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精, pop 一回少一个
//console.log(arr);
//console.log("result ="+result);//返回一个删除数= 显示：白骨精
/*前面添加的：*/
/*
unshift()
* - 向数组开头添加一个或多个元素，并且返回新的数组长度
* - 向前边插入元素以后，其他的元素索引会依次调整（自动修正位置）
*
* - 返回值就是数组新的长度
*/
console.log(arr);//"孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精"
//arr.unshift("牛魔王");
//unshift在前面添加多个
arr.unshift("牛魔王","二郎神","宝莲灯");
console.log(arr);//"牛魔王,二郎神,宝莲灯,孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精"
/*
shift();删除前面的一个数
*
*
*/
var sum = arr.shift();
//arr.shift();调用一次删一次
console.log(arr);//"二郎神,宝莲灯,孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精"
console.log("sum = "+sum);//返回一个删除的数 sum = "牛魔王"
</script>
</head>
<body>
</body>
</html>
4.数组的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
创建一个数组
*
*/
//var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]
//所谓的遍历数组，就是将数组中所有的元素都取出来
/*console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);*/
//一个for循环:遍历数组元素
//arr.length为数组长度，index索引：arr.length-1
/*for (var i=0;i<arr.length;i++) {
console.log(arr[i]);
}*/
/*数组的练习：*/
//创建一个一个构造函数(Person)大写开头构造函数，小写开头创建函数
function Person(name , age){
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);
var per2 = new Person("猪八戒",28);
var per3 = new Person("沙悟净",38);
var per4 = new Person("红孩儿",16);
var per5 = new Person("二郎神",58);
//console.log(per);
//将这些Person创建的对象放入到一个数组中
var perArr = [per,per2,per3,per4,per5];
//console.log(perArr);//输出显示对象的值：
/*创建一个函数，可以将perArr中的满18岁的Person提取出来
然后封装到一个新的数组中并返回
arr：为什么要传参数呢因为如果你自己传当前的perArr，以后还要改，不止传这么一个参数
形参，提取信息的数组
* */
/*自己写的：var result = function(){
//写for循环开始历遍数组
for (var i=0 ; i<perArr.length;i++) {
if(perArr.age>=18){
console.log(perArr[i]);
}
}
}
console.log(result);*/
/*老师写的：*/
//1.创建一个函数
function getAdult(arr){
//2.创建一个新的数组
var newArr = [];
//3.遍历arr，获取arr中的Person对象
for (var i=0 ; i<arr.length;i++) {//这里写成了int i；
//console.log(arr[i]);输出所有的数组
//输出所有的对象
var p =arr[i];
//4.判断大于等于18，则将这个对象添加到newArr中去
if(p.age>=18){
//将对象放到新数组当中
newArr.push(p);
}
}
//5.返回新的数组
return newArr;
}
var result = getAdult(perArr);
console.log("result =" +result);
</script>
</head>
<body>
</body>
</html>
5.数组的练习（复习）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
数组判断数组练习
* 找出数组里面新的值并且赋值给新的数组
*/
/*//1.创建一个构造函数
function Person(name , age){
this.name = name;
this.age = age;
}
//2.重写toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+"]";
};
//3.创建对象并且引用
var per = new Person("孙悟空",18);
var per2 = new Person("红孩儿",8);
var per3 = new Person("猪八戒",28);
var per4 = new Person("二郎神",38);
var per5 = new Person("沙悟净",48);
//4.把对象放进数组
var perArr = [per,per2,per3,per4,per5];
//5.创建一个过滤的方法
function getAdult(arr){
var newArr = [];
for (var i=0 ; i<arr.length ; i++) {
var p =arr[i];
if(p.age>=18){
newArr.push(p);
}
}
return newArr;
}
var reslut = getAdult(perArr);
console.log("reslut ="+reslut);*/
/*练习：创建一个数组，把不符合条件的值历遍出来*/
//1.创建一个构造函数
function Person(name , age){
this.name = name;
this.age = age;
}
//重写toString方法：把它写进Person的第一个原型中
Person.prototype.toString = function(){
return "Person[名字="+this.name+",年龄="+this.age+"]";
};
//创建一些对象并且赋值
var per = new Person("孙悟空",18);
var per2 = new Person("猪八戒",16);
var per3 = new Person("二郎神",12);
var per4 = new Person("红孩儿",8);
var per5 = new Person("沙悟净",28);
//把对象放进数组
var perArr = [per,per2,per3,per4,per5];
//筛选未成年
function getAdult(arr){
var newArr = [];
for( var i=0; i<arr.length ; i++){
var p = arr[i];
if (p.age<18) {
newArr.push(p)
}
}
return newArr;
}
var result = getAdult(perArr);
console.log(result);
</script>
</head>
<body>
</body>
</html>
6.forEach的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
一般我们都是使用for循环去遍历数组
* JS中还为我们提供了一个方法，用来遍历数组
* forEach()
* - 这个方法只支持IE8以上的浏览器
* 如果兼容IE8以下的浏览器就得使用for而不用forEach
*/
//创建一个数组
var arr={"孙悟空","猪八戒","沙和尚","唐僧","白骨精","二郎神"};
/*
*forEach()方法需要一个函数作为参数
* - 像这种函数，由我们创建但是不由我们调用，我们称为回调函数
* - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容
* - 浏览器会在回调函数中传递三个参数
* 第一个参数：就是当前正在历遍的元素：value
* 第二个参数：就是当前正在历遍的元素索引：index
* 第三个参数：就是正在遍历的数组
*
*
*/
//forEach
arr.forEach(function(value , index ,obj){
console.log(value);
});
</script>
</head>
<body>
</body>
</html>
7.数组的方法slice和splice
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* slice();切片（包前不包后）
* - 可以用来从数组提取指定元素
* - 参数：
* 1.截取开始的位置索引，包含开始索引
* 2.截取结束的位置索引，不包含开始索引
* - 第二个参数可以省略不写
* - 索引可以传递一个负值，如果传递一个负值，则从后往前计算
* -1 倒数第一个
* -2 倒数第二个
*
*
* 说明：该方法不会改变元素数组，而是将截取的元素封装到一个新的数组中返回
*
*
*
*/
var arr=["孙悟空","猪八戒","沙和尚","唐僧","白骨精","二郎神"];
//var result = arr.slice(0,2);//显示：孙悟空,猪八戒
// 第二个参数可以省略不写
//var result = arr.slice(1);//从1往后都要
//console.log("result："+result);
//索引可以传递一个负值
var result = arr.slice(1,-1);//从1往后到倒数第一个
console.log("result："+result);
/*
* splice()
* - 可以用于删除数组中的指定元素(替换元素)
* - 使用splice()会影响到原数组，将会指定元素从原数组中删除
* - 并且将删除的元素作为返回值返回
* - 参数
* 第一个：表示开始位置的索引
* 第二个：表示删除的数量
*/
//arr.splice(0,2);
//console.log(arr);//看看原数组:有变化
//返回值：返回删除的值
/*var sum = arr.splice(0,2);//表示的是从第0个开始的后面2个：孙悟空,猪八戒
console.log(sum);//输出删除的值*/
//第三方值替换：单个或者多个，位置也会对应
var sum = arr.splice(0,2,"牛魔王");//将删除的值替换成新的值
console.log(sum);
</script>
</head>
<body>
</body>
</html>
8.数组的去重练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
去除数组中重复的数字
*
*
* splice和双重for循环
*
* 类似冒泡排序
*/
var arr = [1,2,3,2,1,1,1,3,4,2,5];
//var arr = [1,2,3,2,1,3,4,2,5];
//先遍历一下数组
for(var i=0 ; i<arr.length ; i++){
//console.log(arr[i]);
//一个和多个后面的比 j=i+1 初始位置 比它多一个
//现在说的i和j比是由if条件来进行的
for (var j=i+1 ; j<arr.length ; j++) {
//判断两个值相等的比较
if(arr[i] == arr[j]){
//如果相等，删除对应上j的这个数
//arr[j].splice(j,1);j里面不存在值，都在数组里面
arr.splice(j,1);
/*这里特别注意的一个点就是：如果有两个连续相同的，那就是直接跳过没有比较*/
/*所以这里缺少一个自己比自己的方法*/
/*只有我删除了一个数，我才j--*/
j--;
}
}
}
console.log(arr);
/*
使用循环来使自己和自己比较，到头来还是一个arr扛下了所有
*
*/
/*
总结：就是两个for循环的嵌套，第一个先由一个数 比较后面的所有，后面的所有由第二个for循环历遍出来
再就是由if进行的比较: 以后的算法就是写在for循环里面的，对这两个for循环做出结果的算法
*
*
*
*
*
*
*/
</script>
</head>
<body>
</body>
</html>
9.数组的剩余方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
数组的剩余方法：
*
*
*/
//var arr=["猪八戒","孙悟空"];
//var arr2=["唐僧","沙悟净"];
//var arr3=["二郎神","沙悟净"];
/*
* concat()可以连接两个或多个数组，并且将新的数组返回
* - 该方法不会对原数组中产生影响
*
*/
//var result = arr.concat(arr2);//两个
//var result = arr.concat(arr2,arr3);//三个
//也可以传三个值
/*var result = arr.concat(arr2,arr3,"牛魔王","红孩儿");
console.log(result);*/
/*
join();//转换为数组之后使用逗号，隔开
- 该方法可以将数组转换为一个字符串
* - 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
* - 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组元素的连接符
* 如果不指定连接符，则默认使用，逗号作为连接符
*
*/
//var arr=["猪八戒","孙悟空"];
//result = arr.join();//默认，逗号
//result = arr.join("--");//使用连接符
//console.log(result);
/*
reverse()
- 该方法用来反转数组(元素反过来输出)
* - 该方法会直接修改原数组
*
*
*/
/*arr.reverse();
console.log(arr);*/
//arrasort=["b","d","e","a","c"];
/*
sort();
* - 可以用来对数组中的元素进行排序
* - 也会影响原数组，默认会按照Unicode编码进行排序
*
*/
/*arrasort.sort();//从小到大
//arrasort.reverse();//从大到小
console.log(arrasort);//显示顺序输出：abcde*/
/*数字
即使对于纯数字的数组，使用sort()排序的时候，也会按照Unicode编码进行
* 所以对数字进行排序的时候，可能会得到错误的结果
*
//arrasort = [1,6,4,2,3,5];
arrasort = [6,4,11,2,3,5];
arrasort.sort();
//console.log(arrasort);//1 2 3 4 5 6
console.log(arrasort);//11 2 3 4 5 6
*
*
*
* 解决办法：使用自己的排序规则
* 我们可以在sort()添加一个回调函数，来指定排序规则
* 回调函数中需要定义两个形参，
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边，
浏览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，也不交换位置
总结：如果需要升序则返回a-b
如果需要降序则返回b-a
*/
//arrsort = [1,6];
arrsort = [6,4,11,2,3,5];
arrsort.sort(function(a,b){
//升序：前边的如果大
//降序：return -1;return 1;return 0;
/*if(a>b){
return 1;//6>1:a>b交换位置
}else if(b>a)
{
return -1;//6>1:b>a 不交换位置
}else{
result 0;//a=b 不交换位置
}*/
/*上面的太麻烦*/
//升序:从小到大
//return a-b;
//降序:从大到小
return b-a;
});
console.log(arrsort);
</script>
</head>
<body>
</body>
</html>
扫一扫
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
