javascript基础（数组）（十九）

来源：互联网发布：战舰世界烟雾数据编辑：程序博客网时间：2024/06/05 20:17

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>

3.数组的常用方法 push(),pop(),unshift(),shift():

<!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;}//向原型中添加toStringPerson.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-areturn b - a;});console.log(arr4);</script></head><body></body></html>

0 0