JavaScript基础
本章节需要重点理解原型函数并掌握数组的使用!
61. 原型函数（一）
上一节60中将函数定义在全局作用域中，污染了命名空间（即不能重复名字），且定义在全局作用域中很不安全
JS中所创建的每一个函数，解析器都会添加一个属性：prototype，这个属性对应着一个对象，这个对象就是原型对象
- 如果函数作为普通函数调用prototype没有任何作用
- 如果函数以构造函数形式调用时，所创建的对象中会有一个隐含的属性，指向该构造函数的原型对象，可以通过__proto__（双下划线）访问该属性
原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容，统一设置在原型对象中
当访问对象的一个属性或方法时，会现在对象自身中寻找，如果有则直接使用
如果没有则会去原型对象中寻找，找到直接使用
创建构造函数时，可以将一些共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，可以使每个对象都具有这些属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function MyClass(){
}
console.log(MyClass.prototype);
var mc1 = new MyClass();
var mc2 = new MyClass();
var mc3 = new MyClass();
console.log(mc1.__proto__ == mc2.__proto__);//指向同一个原型对象
MyClass.prototype.a = 123;
console.log(mc1.a);//原型对象中有属性a
mc2.a = "张三";
console.log(mc2.a);//自己有属性a
MyClass.prototype.sayHello = function(){
alert("hello")
};
mc3.sayHello();//原型中有方法sayHello
</script>
</head>
<body>
</body>
</html>
因此上一节60中可以修改全局定义域中定义的fun( )函数为原型对象的方法
62. 原型函数（二）
使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
可以使用对象的hasOwnProperty( )来检查对象自身是否含有该属性
原型对象也是对象，也有原型
当我们使用一个对象的属性或方法时，会先在自身中寻找
自身有，则直接使用
自身没有，原型中找，有则使用
原型没有，则去原型的原型中找，如果在Object中依然没有找到，则返回undifined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function MyClass(){
}
MyClass.prototype.name = "张三";
var mc = new MyClass();
mc.age = 18;
console.log(mc.name);//张三
console.log("name" in mc);//自身没有而原型中有，仍然返回true
console.log(mc.hasOwnProperty("name"));//使用hasOwnProperty()方法检查对象是否含有某属性，返回false
console.log(mc.hasOwnProperty("hasOwnProperty"));//false
console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));//false
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//已找到，返回true
console.log(mc.__proto__.__proto__.__proto__);//原型为null
console.log(mc.hello)//自己没有，原型也没有，直到Object没有返回undifined
</script>
</head>
<body>
</body>
</html>
63. toString( )
当直接在页面中打印一个对象时，实际上输出的是对象的toString( )方法的返回值
打印该对象和打印该对象的toString( )方法输出是一样的
可以修改toString( )方法，改变输出格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.toString = function(){//修改Person原型的toString()改变输出格式
return "Person[name=" + this.name + ",age=" + this.age + ",gender=" + this.gender +"]";
};
var per1 = new Person("张三",18,"男");
var per2 = new Person("李四",20,"男");
console.log(per1);
console.log(per1.toString());
</script>
</head>
<body>
</body>
</html>
64. 垃圾回收
程序运行过程中会产生垃圾，会导致程序运行速度过慢
当一个对象没有任何的变量或属性对它进行引用，这种对象就是垃圾，会占用大量内存空间
在JS中拥有自动垃圾回收机制，会自动将这些垃圾对象从内存中销毁
只需要将不使用的对象设置为null即可
65. 数组简介
数组Array：和普通对象类似可以用来存储一些值，不同的是普通对象是使用字符串作为属性的，而数组使用数字作为索引操作元素
索引：从0开始的整数
添加元素：
语法：数组[索引] = 值
查询元素：
语法：数组[索引]
如果查询不存在的索引，不会报错而是返回undifined
获取数组的长度：
使用length属性获取连续数组的长度（元素的个数）
语法：数组.length
对于非连续的数组会获取数组最大索引+1
修改数组的长度：
如果修改的length大于原长度，则多余部分会空出来
如果修改的length小于原长度，则多出的元素会被删除
向数组最后一个位置添加元素：
例如：arr[arr.length] = 1;
var arr = new Array();
console.log(arr);
arr[0] = 1;
arr[4] = 4;
console.log(arr);
console.log(arr[5]);//查询不存在的索引，返回undifined
console.log(arr.length);//打印非连续数组的长度，最大索引4+1=5
arr.length = 4;
console.log(arr);//修改数组的长度，多余元素被删除
arr[arr.length] = "a";
arr[arr.length] = undefined;
console.log(arr);//向数组最后一个位置添加元素
66. 数组字面量
使用字面量来创建数组，更加简单方便
例如：var arr = [ ]；
使用字面量创建数组时，可以在创建时就指定数组中的元素与使用构造函数创建数组一样
例如：var arr = [1,2,3];
【注意】字面量和构造函数创建并赋值一个值时两者区别，前者是创建一个只含一个元素的数组，后者是创建一个长度为该值的空数组
数组中的元素可以是任意的数据类型，也可以是对象，函数，数组
var arr1 = [10];
var arr2 = new Array(10);
console.log(arr1);//数组只有一个元素10
console.log(arr2);//长度为10的空数组
arr1 = [{name:"张三"},{name:"李四"}];//数组元素为对象
console.log(arr1);
arr1 = [function(){console.log(1);},function(){console.log(2);}];//数组元素为函数
console.log(arr1);
arr1 = [[1,2,3],[4,5,6],[7,8,9]];//数组元素为数组，即二维数组
console.log(arr1);
67. 数组的4个方法
push( )：
向数组末尾添加一个或多个元素，并返回数组的新长度
可以将要添加的元素作为方法的参数传递，元素将自动添加到数组末尾
该方法会将数组新的长度作为返回值返回
pop( )：
删除数组的最后一个元素，并将删除的元素作为返回值返回
unshift( )：
向数组开头添加一个或多个元素，并返回新的数组长度
向前边插入元素以后，其它元素索引会依次调整
shift( )：
删除数组第一个元素，并将被删除的元素作为返回值返回
var arr = ["张三","李四","王五"];
len = arr.push("迪迦");
console.log(arr);
console.log(len);
element = arr.pop();
console.log(arr);
console.log(element);
len = arr.unshift("大雄","胖虎");
console.log(arr);//注意添加顺序
console.log(len);
element = arr.shift();
console.log(arr);
console.log(element);
68. 数组的遍历
遍历数组就是将数组中所有元素都取出来，可以使用for循环
var arr = ["张三","李四","王五"];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
练习：创建一个函数将年满18岁的Person提取出来，然后封装到新数组中并返回，伪代码如下：
function getAdult(arr){//arr为要提取信息的数组
创建一个新数组；
遍历arr，获取Person对象；
大于18岁，添加到新数组中；
}
function Person(name,age,gender){
this.name = name;
this.age = age;
}
Person.prototype.toString = function(){//修改Person原型的toString()改变输出格式
return "Person[name=" + this.name + ",age=" + this.age+"]";
};
var per1 = new Person("张三",18);
var per2 = new Person("李四",20,);
var per3 = new Person("王五",8);
var per4 = new Person("大雄",25);
var per5 = new Person("静香",17);
var arr = [per1,per2,per3,per4,per5];
69. 数组练习
function Person(name,age,gender){
this.name = name;
this.age = age;
}
Person.prototype.toString = function(){//修改Person原型的toString()改变输出格式
return "Person[name=" + this.name + ",age=" + this.age+"]";
};
var per1 = new Person("张三",18);
var per2 = new Person("李四",20,);
var per3 = new Person("王五",8);
var per4 = new Person("大雄",25);
var per5 = new Person("静香",17);
var arr = [per1,per2,per3,per4,per5];
function getAdult(arr){
var newArr = []
for(var i=0;i<arr.length;i++){
// console.log(arr[i]);
if(arr[i].age>=18){
newArr.push(arr[i]);
}
}
return newArr;
}
var Arr = getAdult(arr);
console.log(Arr);
70. forEach
JS中可以使用**forEach( )**方法来遍历数组，需要一个函数作为参数
只支持IE9及以上浏览器，否则不兼容
这种函数由我们创建但不由我们调用，称为回调函数
数组中有几个元素就会执行几次，每次执行浏览器会将遍历到的元素以实参形式传递进来，可以定义形参来读取这些元素
浏览器会在回调函数中传递三个参数：
第一个参数就是当前正在遍历的元素
第二个参数就是当前正在遍历的元素索引
第三个参数就是正在遍历的数组
var arr = ["张三","李四","王五"];
arr.forEach(function(value,index,obj){
console.log(index,value);
});
下一章节将对数组中其它方法、Date对象、Math、包装类和字符串方法进行介绍！