js学习-day07
对原型对象的补充
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 function fun(){} 9 fun.prototype.name = "fun's value"; 10 var obj = new fun(); 11 console.log(obj.name); 12 13 //使用in检查对象中是否含有某个属性，如果对象中没有但是原型中有， 14 //也会返回true 15 console.log("name" in obj); 16 17 obj.sex = "female"; 18 //可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性 19 //使用该方法只有当对象自身中含有属性时，才会返回true 20 console.log(obj.hasOwnProperty("age"));//false 21 console.log(obj.hasOwnProperty("sex"));//true 22 console.log(obj.hasOwnProperty("hasOwnProperty"));//false 23 24 console.log(obj._proto_.hasOwnProperty("hasOwnProperty"));//应该是false，但是现在好像已经没有proto了，所以会报错的 25 26 //原型对象也是对象，所以它也有原型 27 // 当我们使用一个对象的属性或方法时，会先在自身中寻找 28 // 自身中如果有，则直接使用 29 // 如果没有则去原型对象中寻找，如果原型对象中有，则使用 30 // 如果没有则去原型的原型中寻找，直到找到object对象的原型 31 // Object对象的原型没有原型，如果Object中依然没有找到，则返回undefined 32 33 34 </script> 35 </body> 36 </html>
垃圾回收
当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象
此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须清理
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收操作
我们需要做的就是将不再使用的对象设置null即可
数组
http://www.w3school.com.cn/js/js_array_methods.asp
这是普通对象和数组的区别
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 内建对象 9 宿主对象 10 自定义对象 11 12 数组Array 13 数组也是一个对象 14 他和我们普通对象功能类似，也是用来存储一些值的 15 -不同的是普通兑现是使用字符串作为属性名的，而数组是使用数字来所谓索引操作元素 16 -索引 17 从0开始的整数就是索引 18 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据 19 20 向数组中添加元素 21 语法 数组[索引] = 值 22 23 读取数组中的元素，如果读取不存在的索引，不会报错而是undefined 24 语法 数组[索引] 25 26 对于联塑的数组，使用length可以获取到数组的长度（元素的个数） 27 对于非连续的数组，使用length会获取到数组的最大的索引+1，尽量不要创建非连续的按钮 28 --> 29 30 <script type="text/javascript"> 31 var arr = new Array(); 32 console.log(typeof arr);//object 33 34 //向数组中添加元素 35 //语法 数组[索引] = 值 36 37 arr[0] = 10; 38 console.log(arr);//10 39 40 //读取数组中的元素，如果读取不存在的索引，不会报错而是undefined 41 //语法 数组[索引] 42 console.log(arr[0]); 43 44 //修改length，如果修改的length大于原长度，则多出部分会空出来；如果修改的length小于原长度，多出来的部分会被删除 45 arr.length = 10; 46 47 //向数组的最后一个位置添加元素！！！！！！！！！！！！！！！！！！！！！ 48 arr[arr.length] = 100; 49 50 </script> 51 </body> 52 </html>
数组2
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 //使用字面量来创建数组 9 var arr = []; 10 11 //使用字面量创建数组时，可以在创建时就指定数组中的元素 12 var arr1 = [1,2,3,4,5,6]; 13 console.log(arr1[5]); 14 15 //使用构造函数创建数组时，也可以同时天津爱元素，将要添加的元素作为构造函数的参数传递，元素之间使用，隔开 16 var arr2 = new Array(10,20,30); 17 console.log(arr2); 18 19 //区别！！！！！！！！ 20 arr = [10]; 21 console.log(arr);//10 22 arr2 = new Array(10); 23 console.log(arr2.length);//创建了一个长度为10的数组 24 25 26 //数组中的元素可以是任意的数据类型 27 arr = ["hello",1,true,null,undefined]; 28 29 //也可以是对象 30 var obj = {name:"coco"}; 31 arr[arr.length] = obj; 32 console.log(arr[arr.length]);//coco 33 34 arr = [{name:"lisa"},{name:"jelly"},{name:"susan"}]; 35 console.log(arr[1].name);//lisa 36 37 //也可以是一个函数 38 arr = [function(){alert(1)},function(){alert(2)}]; 39 40 console.log(arr); 41 arr[0](); 42 43 //数组中也可以放数组，是二维数组 44 arr = [[1,2,3],[4,5,6]]; 45 console.log(arr[0]); 46 </script> 47 </body> 48 </html>
数组的方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 push() ！更新时返回的是新的数组长度！ 9 该方法可以向数组的末尾添加一个或多个元素，并返回数组新的长度 10 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾 11 -该方法会将数组新的长度返回 12 13 pop() ！更新时返回的是数组被删除的那个元素！ 14 删除 15 16 17 unshift() ！更新时返回的是新的数组长度！ 18 向数组开头添加一个或多个元素，并返回新的数组长度 19 向前边插入元素以后，其他的元素索引会依次调整 20 21 shift() ！更新时返回的是数组被删除的那个元素！ 22 可以删除数组的第一个元素，并将被删除的元素返回 23 --> 24 <script type="text/javascript"> 25 //push方法，添加元素 26 var arr = ["coco","jelly","birdy","sia"]; 27 var result = arr.push("happy","tony"); 28 console.log(arr); 29 console.log(result);//6 30 31 //pop方法，删除元素 32 result = arr.pop();//显示出数组最后那个元素，进行删除 33 console.log(result); 34 35 //unshift方法 36 arr.unshift("rain"); 37 console.log(arr); 38 39 //shift方法 40 arr.shift(); 41 console.log(arr); 42 </script> 43 </body> 44 </html>
执行结果
数组的遍历
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 所谓的遍历数组，就是讲数组中所有的元素都取出来 9 --> 10 11 <script type="text/javascript"> 12 var arr = ["coco","jelly","sia"]; 13 14 for (var i = 0;i<arr.length;i++){ 15 console.log(arr[i]); 16 } 17 </script> 18 </body> 19 </html>
数组的练习，数组的遍历加push方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 function Person(name,age){ 9 this.name = name; 10 this.age = age; 11 } 12 13 14 //修改Person原型的toString 15 Person.prototype.toString = function(){ 16 return "Person[name="+this.name+",age="+this.age+"]"; 17 } 18 19 //创建一个Person对象 20 var per = new Person("coco",10); 21 var per2 = new Person("jelly",22); 22 var per3 = new Person("sia",32); 23 24 //将person对象放到数组中 25 var perArr = [per,per2,per3]; 26 27 28 /* 29 创建一个函数，可以将perArr中的满18岁的Person提取出来 30 然后封装到一个新的数组中并返回 31 arr 32 形参，要提取信息的数组 33 */ 34 function getAdult(arr){ 35 //创建一个新的数组 36 var newArr = []; 37 38 //遍历arr，获取arr中Person对象 39 for(var i = 0;i<arr.length;i++){ 40 //判断Person对象的age是否大于等于18 //如果大于等于18，则将这个对象添加到newArr中 41 if(arr[i].age >= 18){ 42 newArr[i] = arr[i]; 43 } 44 } 45 46 //将新的数组返回 47 return newArr; 48 } 49 50 // getAdult(Person); 51 var result = getAdult(perArr); 52 console.log(result); 53 54 55 //老师的方法 56 function getAdult2(arr){ 57 var newArr = []; 58 for(var i = 0;i<arr.length;i++){ 59 var p = arr[i]; 60 if(p.age >= 18){ 61 newArr.push(p); 62 } 63 } 64 return newArr; 65 } 66 </script> 67 </body> 68 </html>
forEach
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 JS中可以用forEach()这个方法来遍历数组 9 仅支持IE8以上的浏览器 10 --> 11 12 <script type="text/javascript"> 13 var arr = ["coco","jelly","sia"]; 14 // function fun(){} 15 16 /*forEach()方法需要一个函数作为参数 17 -像这种函数，由我们创建但是不由我们调用的，称为回调函数 18 -数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以来定义形参，来读取这些内容. 19 -浏览器会在回调函数中传递三个参数 20 第一个参数，就是当前正在遍历的元素a-value 21 第二个参数，就是当前正在遍历的元素的索引b-index 22 第三个参数，就是正在遍历的数组c-obj 23 24 25 */ 26 arr.forEach(function(){ 27 console.log("hello"); 28 }); 29 30 arr.forEach(function(value,index,obj){ 31 console.log("a = "+value); 32 }); 33 </script> 34 </body> 35 </html>
数组的方法2
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 slice() 9 可以用来从数组提取选定的元素 10 该方法不会改变元素的数组，而是将截取到的元素封装到一个新数组中 11 参数 12 1.截取开始的位置的索引，包含开始索引 13 2.截取结束的位置的索引，不包含结束索引 14 第二个参数可以省略不写，此时截取开始索引到结束索引 15 索引可以传递一个负值，负数表示倒数第几个 16 17 18 splice() 19 可以用于删除数组中的指定元素 20 使用splice()会影响到原数组，会将指定元素从原数组中删除 21 并将被删除的元素作为返回值返回 22 参数 23 1.表示开始位置的索引 24 2.表示删除的数量 25 3.第三个及以后 26 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边 27 ！！！！！可以很灵活的用在数组的插入和删除！！！！ 28 --> 29 <script type="text/javascript"> 30 var arr = ["coco","jelly","sia"]; 31 arr.length = 10; 32 var result = arr.slice(0,2); 33 console.log(result); 34 console.log(arr); 35 36 var result1 = arr.splice(1,1); 37 console.log(result1); 38 console.log(arr); 39 40 var result2 = arr.splice(1,1,"happy","bread"); 41 console.log(arr); 42 43 44 </script> 45 </body> 46 </html>
执行的结果：
数组的方法3
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 concat() 9 可以连接两个或多个数组，并将新的数组返回 10 该方法不会对原数组产生影响 11 12 join() 13 可以将数组转换为一个字符串 14 不会对原数组产生影响，而是将转换后的字符串作为结果返回 15 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符 16 17 reverse() 18 用来反转数组（前边的去后边，后边的去前边） 19 会直接修改原数组 20 21 sort() 22 可以用来对数组中的元素进行排序 23 会影响原数组，默认会按Unicode编码进行排序 24 但是对于数字来说可能会出错，比如1111会跑到最前面 25 可以自己来指定排序的规则 26 在sort()添加一个回调函数，来指定排序规则 27 回调函数中更需要定义两个参数，浏览器将会分别使用数组中的元素作为实参去调用回调函数 28 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边 29 30 浏览器会根据回调函数的返回值来决定元素的顺序 31 如果返回一个大于0的值，则元素会交换位置 32 如果返回一个小于0的值，则元素位置不变 33 如果返回0，则认为两个元素相等，也不交换位置 34 升序a-b 35 降序b-a 36 --> 37 <script type="text/javascript"> 38 var arr1 = ["coco","jelly"]; 39 var arr2 = ["happy","bread"]; 40 var arr3 = ["apple","banana"]; 41 42 //concat 43 //不只是连接数组，元素也可以 44 var result = arr1.concat(arr2,arr3,"bed","chair"); 45 console.log(result); 46 //对原数组不会产生影响 47 console.log(arr1); 48 49 //join 50 var result1 = arr1.join(); 51 console.log(result1); 52 console.log(arr1); 53 54 var result2 = arr1.join("~~"); 55 console.log(result2); 56 57 //reverse 58 arr1.reverse(); 59 console.log(arr1); 60 61 //sort 62 var arr = [1,2,5,3,4]; 63 arr.sort(); 64 console.log(arr); 65 66 //自定义sort中的回调函数 67 arr = [5,4]; 68 arr.sort(function(a,b){ 69 //console.log("a = "+a); 70 //console.log("b = "+b); 71 72 /*//前边的大 73 if(a>b){ 74 return 1; 75 }else if(a<b){ 76 return -1; 77 }else{ 78 return 0; 79 } 80 */ 81 //升序排列 82 return a-b; 83 //降序排列 84 return b-a; 85 }); 86 console.log(arr); 87 88 89 </script> 90 </body> 91 </html>
执行的结果：
函数的方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 call()和apply() 9 -这两个方法都是函数对象的方法，需要通过函数对象来调用 10 -当对函数调用call()和apply()都会调用函数执行 11 -在调用call()和apply()可以将一个对象指定为第一个参数 12 此时这个对象将会成为函数执行时的this 13 call()方法可以将实参在对象之后依次传递 14 apply()方法需要将实参封装到一个数组中统一传递 15 16 this的情况 17 1.以函数形式调用时，this永远都是window 18 2.以方法的形式调用时，this是调用方法的对象 19 3.以构造函数的形式调用时，this是新创建的那个对象 20 4.使用call和apply调用时,this是指定的那个对象 21 --> 22 <script type="text/javascript"> 23 function fun(a,b){ 24 //console.log(this.name); 25 console.log("a = "+a); 26 console.log("b = "+b); 27 } 28 var obj = {name:"obj"}; 29 var obj2 = {name:"obj2"}; 30 31 fun.apply(); 32 fun.call(); 33 34 fun(); 35 fun.call(obj); 36 fun.apply(obj); 37 38 fun.apply(obj2); 39 40 fun.call(obj,2,3); 41 fun.apply(obj,[2,3]); 42 43 </script> 44 </body> 45 </html>
执行的结果：
