javascript基础，数组（5）
数组
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 内建对象 10 * 宿主对象 11 * 自定义对象 12 * 13 * 数组（Array） 14 * - 数组也是一个对象 15 * - 它和我们普通对象功能类似，也是用来存储一些值的 16 * - 不同的是普通对象是使用字符串作为属性名的， 17 * 而数组时使用数字来作为索引操作元素 18 * - 索引： 19 * 从0开始的整数就是索引 20 * - 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据 21 */ 22 23 //创建数组对象 24 var arr = new Array(); 25 26 //使用typeof检查一个数组时，会返回object 27 //console.log(typeof arr); 28 29 /* 30 * 向数组中添加元素 31 * 语法：数组[索引] = 值 32 */ 33 arr[0] = 10; 34 arr[1] = 33; 35 arr[2] = 22; 36 arr[3] = 44; 37 /*arr[10] = 31; 38 arr[100] = 90;*/ 39 40 /* 41 * 读取数组中的元素 42 * 语法：数组[索引] 43 * 如果读取不存在的索引，他不会报错而是返回undefined 44 */ 45 46 //console.log(arr[3]); 47 48 /* 49 * 获取数组的长度 50 * 可以使用length属性来获取数组的长度(元素的个数) 51 * 语法：数组.length 52 * 53 * 对于连续的数组，使用length可以获取到数组的长度（元素的个数） 54 * 对于非连续的数组，使用length会获取到数组的最大的索引+1 55 * 尽量不要创建非连续的数组 56 */ 57 /*console.log(arr.length); 58 console.log(arr);*/ 59 60 /* 61 * 修改length 62 * 如果修改的length大于原长度，则多出部分会空出来 63 * 如果修改的length小于原长度，则多出的元素会被删除 64 */ 65 //arr.length = 10; 66 67 /*arr.length = 2; 68 69 console.log(arr.length); 70 console.log(arr);*/ 71 72 arr[4] = 50; 73 arr[5] = 60; 74 75 //向数组的最后一个位置添加元素 76 //语法：数组[数组.length] = 值; 77 arr[arr.length] = 70; 78 arr[arr.length] = 80; 79 arr[arr.length] = 90; 80 81 console.log(arr); 82 83 </script> 84 </head> 85 <body> 86 </body> 87 </html>
1.构造函数创建数组，var arr = new Array();
2.如果读取不存在的索引，他不会报错而是返回undefined
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 //创建一个数组 9 //var arr = new Array(); 10 11 //使用字面量来创建数组 12 //语法:[] 13 //var arr = []; 14 15 //console.log(typeof arr); //objet 16 17 //使用字面量创建数组时，可以在创建时就指定数组中的元素 18 var arr = [1,2,3,4,5,10]; 19 20 //console.log(arr[3]); 21 22 //使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递 23 //元素之间使用,隔开 24 var arr2 = new Array(10,20,30); 25 //console.log(arr2); 26 27 //创建一个数组数组中只有一个元素10 28 arr = [10]; 29 30 //创建一个长度为10的数组 31 arr2 = new Array(10); 32 33 //console.log(arr2.length); 34 //数组中的元素可以是任意的数据类型 35 arr = ["hello",1,true,null,undefined]; 36 37 //也可以是对象 38 var obj = {name:"孙悟空"}; 39 arr[arr.length] = obj; 40 console.log(arr2); 41 42 console.log(arr2[arr2.length-1]);//{name:"孙悟空"} 43 console.log(arr2[arr2.length-1].name);//孙悟空 44 45 arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}]; 46 47 //也可以是一个函数 48 arr = [function(){alert(1)},function(){alert(2)}]; 49 50 //console.log(arr); 51 //arr[0](); 52 53 //数组中也可以放数组，如下这种数组我们称为二维数组 54 arr = [[1,2,3],[3,4,5],[5,6,7]]; 55 console.log(arr[1]); 56 console.log(arr[1][0]); 57 58 </script> 59 </head> 60 <body> 61 </body> 62 </html>
1.使用字面量来创建数组，var arr = [];
2.创建一个数组数组中只有一个元素10，arr = [10];
3.创建一个长度为10的数组，arr2 = new Array(10);
数组的方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 //创建一个数组 9 var arr = ["孙悟空","猪八戒","沙和尚"]; 10 11 /* 12 * push() 13 * - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度 14 * - 可以将要添加的元素作为方法的参数传递， 15 * 这样这些元素将会自动添加到数组的末尾 16 * - 该方法会将数组新的长度作为返回值返回 17 */ 18 19 var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); 20 21 22 //console.log(arr); 23 //console.log("result = "+result); 24 25 /* 26 * pop() 27 * - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回 28 */ 29 result = arr.pop(); 30 /*console.log(arr); 31 console.log("result = "+result);*/ 32 33 /* 34 * unshift() 35 * - 向数组开头添加一个或多个元素，并返回新的数组长度 36 * - 向前边插入元素以后，其他的元素索引会依次调整 37 */ 38 //console.log(arr); 39 40 arr.unshift("牛魔王","二郎神"); 41 42 console.log(arr); 43 44 /* 45 * shift() 46 * - 可以删除数组的第一个元素，并将被删除的元素作为返回值返回 47 */ 48 result = arr.shift(); 49 result = arr.shift(); 50 51 console.log(arr); 52 console.log("result = "+result); 53 54 55 </script> 56 </head> 57 <body> 58 </body> 59 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; 9 10 /* 11 * slice() 12 * - 可以用来从数组提取指定元素 13 * - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回 14 * - 参数： 15 * 1.截取开始的位置的索引,包含开始索引 16 * 2.截取结束的位置的索引,不包含结束索引 17 * - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素 18 * - 索引可以传递一个负值，如果传递一个负值，则从后往前计算 19 * -1 倒数第一个 20 * -2 倒数第二个 21 */ 22 23 var result = arr.slice(1,4); 24 console.log(result); // "猪八戒","沙和尚","唐僧" 25 //该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回 26 console.log(arr);//"孙悟空","猪八戒","沙和尚","唐僧","白骨精" 27 28 result = arr.slice(3);//"唐僧","白骨精" 29 30 result = arr.slice(1,-2);//"猪八戒","沙和尚" 31 32 //console.log(result); 33 34 /* 35 * splice() 36 * - 可以用于删除数组中的指定元素 37 * - 使用splice()会影响到原数组，会将指定元素从原数组中删除 38 * 并将被删除的元素作为返回值返回 39 * - 参数： 40 * 第一个，表示开始位置的索引 41 * 第二个，表示删除的数量 42 * 第三个及以后。。 43 * 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边 44 * (可以替换某个元素，也可以在某元素中插入其他元素) 45 */ 46 47 arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; 48 49 50 var result1= arr.splice(1,2) 51 console.log(result1); 52 console.log(arr); 53 54 55 // 替换某个元素 56 var result= arr.splice(1,1,"牛魔王"); 57 console.log(result);//猪八戒 58 console.log(arr);//"孙悟空","牛魔王","沙和尚","唐僧","白骨精" 59 60 //在某个元素前插入新元素 61 62 var result=arr.splice(1,0,"牛魔王","铁扇公主","红孩儿") 63 console.log(arr);//孙悟空", "牛魔王", "铁扇公主", "红孩儿", "猪八戒", "沙和尚", "唐僧", "白骨精" 64 65 66 </script> 67 </head> 68 <body> 69 </body> 70 </html>
数组遍历
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 //创建一个数组 9 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; 10 11 //所谓的遍历数组，就是将数组中所有的元素都取出来 12 /*console.log(arr[0]); 13 console.log(arr[1]); 14 console.log(arr[2]); 15 console.log(arr[3]);*/ 16 17 for(var i=0 ; i<arr.length ; i++){ 18 console.log(arr[i]); 19 } 20 21 </script> 22 </head> 23 <body> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 function Person(name , age , gender){ 9 this.name = name; 10 this.age = age; 11 } 12 13 //修改Person原型的toString 14 Person.prototype.toString = function(){ 15 return "Person[name="+this.name+",age="+this.age+"]"; 16 }; 17 18 //创建一个Person对象 19 var per = new Person("孙悟空",18); 20 var per2 = new Person("猪八戒",28); 21 var per3 = new Person("红孩儿",8); 22 var per4 = new Person("蜘蛛精",16); 23 var per5 = new Person("二郎神",38); 24 25 /* 26 * 将这些person对象放入到一个数组中 27 */ 28 var perArr = [per,per2,per3,per4,per5]; 29 30 /* 31 * 创建一个函数，可以将perArr中的满18岁的Person提取出来， 32 * 然后封装到一个新的数组中并返回 33 * arr 34 * 形参，要提取信息的数组 35 */ 36 function getAdult(arr){ 37 //创建一个新的数组 38 var newArr = []; 39 40 //遍历arr，获取arr中Person对象 41 for(var i=0 ; i<arr.length ; i++){ 42 var p = arr[i]; 43 //判断Person对象的age是否大于等于18 44 if(p.age >= 18){ 45 //如果大于等于18，则将这个对象添加到newArr中 46 //将对象放入到新数组中 47 newArr.push(p); 48 } 49 } 50 //将新的数组返回 51 return newArr; 52 53 } 54 55 var result = getAdult(perArr); 56 57 console.log(result); 58 59 for( var j=0; j<result.length; j++){ 60 console.log(result[j]); 61 } 62 63 64 </script> 65 </head> 66 <body> 67 </body> 68 </html>
forEach()方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 一般我们都是使用for循环去遍历数组， 10 * JS中还为我们提供了一个方法，用来遍历数组 11 * forEach() 12 * - 这个方法只支持IE8以上的浏览器 13 * IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach 14 * 还是使用for循环来遍历 15 */ 16 17 //创建一个数组 18 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; 19 20 /* 21 * forEach()方法需要一个函数作为参数 22 * - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数 23 * - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素 24 * 以实参的形式传递进来，我们可以来定义形参，来读取这些内容 25 * - 浏览器会在回调函数中传递三个参数： 26 * 第一个参数，就是当前正在遍历的元素 27 * 第二个参数，就是当前正在遍历的元素的索引 28 * 第三个参数，就是正在遍历的数组 29 * 30 */ 31 arr.forEach(function(value , index , obj){ 32 console.log(value); 33 console.log(index); 34 console.log(obj); 35 }); 36 37 38 </script> 39 </head> 40 <body> 41 </body> 42 </html>
去重数组
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 //创建一个数组 9 var arr = [1,2,3,2,2,1,3,4,2,5]; 10 11 //去除数组中重复的数字 12 //获取数组中的每一个元素 13 for(var i=0 ; i<arr.length ; i++){ 14 //console.log(arr[i]); 15 /*获取当前元素后的所有元素*/ 16 for(var j=i+1 ; j<arr.length ; j++){ 17 //console.log("---->"+arr[j]); 18 //判断两个元素的值是否相等 19 if(arr[i] == arr[j]){ 20 //如果相等则证明出现了重复的元素，则删除j对应的元素 21 arr.splice(j,1); 22 //当删除了当前j所在的元素以后，后边的元素会自动补位 23 //此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素 24 //使j自减 25 j--; 26 } 27 } 28 } 29 30 console.log(arr); 31 32 33 </script> 34 </head> 35 <body> 36 </body> 37 </html>
数组其他方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript"> 7 8 var arr = ["孙悟空","猪八戒","沙和尚"]; 9 var arr2 = ["白骨精","玉兔精","蜘蛛精"]; 10 var arr3 = ["二郎神","太上老君","玉皇大帝"]; 11 12 /* 13 * concat()可以连接两个或多个数组，并将新的数组返回 14 * - 该方法不会对原数组产生影响 15 */ 16 var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主"); 17 console.log(result); 18 console.log(arr); 19 20 /* 21 * join() 22 * - 该方法可以将数组转换为一个字符串 23 * - 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回 24 * - 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符 25 * 如果不指定连接符，则默认使用,作为连接符 26 */ 27 arr = ["孙悟空","猪八戒","沙和尚","唐僧"]; 28 29 var result= arr.join() 30 console.log(typeof result); //string 31 32 result = arr.join("@-@"); //孙悟空@-@猪八戒@-@沙和尚@-@唐僧 33 console.log(result); 34 /* 35 * reverse() 36 * - 该方法用来反转数组（前边的去后边，后边的去前边） 37 * - 该方法会直接修改原数组 38 */ 39 40 arr.reverse(); 41 42 //console.log(arr); 43 44 arr = ["b","d","e","a","c"]; 45 46 /* 47 * sort() 48 * - 可以用来对数组中的元素进行排序 49 * - 也会影响原数组，默认会按照Unicode编码进行排序 50 */ 51 arr.sort(); 52 //arr.reverse(); 53 54 /* 55 * 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序， 56 * 所以对数字进排序时，可能会得到错误的结果。 57 * 58 * 我们可以自己来指定排序的规则 59 * 我们可以在sort()添加一个回调函数，来指定排序规则， 60 * 回调函数中需要定义两个形参, 61 * 浏览器将会分别使用数组中的元素作为实参去调用回调函数 62 * 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边 63 * - 浏览器会根据回调函数的返回值来决定元素的顺序， 64 * 如果返回一个大于0的值，则元素会交换位置 65 * 如果返回一个小于0的值，则元素位置不变 66 * 如果返回一个0，则认为两个元素相等，也不交换位置 67 * 68 * - 如果需要升序排列，则返回 a-b 69 * 如果需要降序排列，则返回b-a 70 */ 71 arr = [5,4,2,1,3,6,8,7]; 72 73 arr.sort(function(a,b){ 74 75 //前边的大 76 /*if(a > b){ 77 return -1; 78 }else if(a < b){ 79 return 1; 80 }else{ 81 return 0; 82 }*/ 83 84 //升序排列 85 //return a - b; 86 87 //降序排列 88 return b - a; 89 90 }); 91 92 console.log(arr); 93 94 </script> 95 </head> 96 <body> 97 98 </body> 99 </html>
toString，indexOf，forEach，map，filter 方法
1 //六、toString 2 //功能：把数组对象转化为基本数据字符串 3 //参数：无 4 //返回值：返回数组转化的字符串 5 6 // var arr = [10,6,2,20]; 7 // var result = arr.toString(); 8 // console.log(arr);//'10,6,2,20' 9 // console.log(result); 10 11 //数组 函数 对象 都有toString方法，返回的结果是不一样的 12 //数组调用这个方法，返回的就是去掉[]后剩余的，加引号 13 //函数调用这个方法，返回的就是函数数据本身，加引号 14 //对象调用这个方法，返回的是固定的 '[object Object]' 15 16 17 // console.log([1,2,3].toString());//'1,2,3' 18 // function fn(){}; 19 // console.log(fn.toString()); 20 // console.log({name:'zly'}.toString()); 21 //两遍都是对象数据 对象数据之间的判等，判的就是地址 22 //所有的对象数据转化布尔值，都是true 23 //对象和对象之间的比较及运算 以及 对象和基本数据之间的比较判等和运算 都要把对象数据转化为基本数据 24 //然后再按照基本数据的隐式转换去运算； 25 // 26 // console.log([1,2,3] + [1,2,3]);//1,2,31,2,3 27 // console.log(fn - 100);//'function fn(){};'-100 变成Nan 28 // console.log({name:'zly'} + 100); //[object Object]100 29 30 31 32 33 //这些方法也是必须搞定 34 // 1. Array.prototype.indexOf(value) : 得到值在数组中的一个下标，不存在返回-1 35 // var arr = [1,2,3]; 36 // var result = arr.indexOf(2);//1 37 // var result = arr.indexOf(7);//-1 38 // console.log(result); 39 40 41 //数组去重 第一种方式 42 // var arr = [1,2,3,41,1,2,1]; 43 // var newArr = []; 44 // var flag = true; 45 // for(var i = 0; i < arr.length; i++){ 46 // for(var j = 0; j < newArr.length; j++){ 47 // if(arr[i] == newArr[j]){ 48 // flag = false; 49 // break; 50 // } 51 // } 52 // 53 // if(flag){ 54 // newArr[newArr.length] = arr[i]; 55 // } 56 // 57 // flag = true; 58 // } 59 // console.log(newArr); 60 61 //数组去重第二种 62 // for(var i = 0; i < arr.length; i++){ 63 // if(newArr.indexOf(arr[i]) == -1){//拿一个元素就去新数组内去找，如果没有返回-1； 64 // newArr.push(arr[i]); 65 // } 66 // } 67 // console.log(newArr); 68 69 // 2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标，不存在返回-1 70 71 //*******************************************8 72 // 3. Array.prototype.forEach(function(item, index){}) : 遍历数组 73 // for循环是最基本的循环,它不是数组的方法 74 75 // var arr = [1,2,3,4]; 76 // arr.forEach(function(item,index){ 77 // console.log(index,item); 78 // }) 79 80 // 数组的forEach方法也可以去遍历数组,但是不能continue和break 81 //它比for循环效率要高的多； 82 83 // 4. Array.prototype.map(function(item, index){}) : 84 //遍历数组返回一个新的数组，新的数组和老的数组有关系 85 // var arr = [1,2,3]; 86 // 87 // var result = arr.map(function(item,index){ 88 // return item * 2; //返回由原数组 计算后的一个新值，放入一个新数组里面 89 // }) 90 // 91 // console.log(result); 92 93 // 5. Array.prototype.filter(function(item, index){}) : 94 // 遍历过滤出一个新的子数组 95 var arr = [10,20,5,7]; 96 var result = arr.filter(function(item,index){ 97 return item >= 6; 98 }) 99 console.log(result); 100
