js学习-day04
计时器
注意末尾的函数是timeEnd()
对象
<!-- JS中数据类型 String 字符串 Number 数值 Boolean 布尔值 Null 空值 Undefined 未定义 以上五种属于基本数据类型，以后我们看到的值 只要不是上面五种都是对象 Object 对象 基本数据类型都是单一的值，值和值之间没有任何的联系 在JS中表示一个人的信息(name gender age) var name = var gender = var age = 如果使用基本数据类型的数据，我们所创建的变量 都是独立的，不能成为一个整体 对象属于一种复合的类型，在对象中可以保存多个 不同数据类型的属性 对象的分类： 1.内建对象 由ES标准中定义的对象，在任何ES的实现中都可以使用 Math String Number Boolean Function Object.. 2.宿主对象 由JS的运行环境提供的对象，目前来讲主要是指由浏览 器提供的对象 BOM DOM 3.自定义对象 由开发人员自己创建的对象 -->
创建对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 创建对象 9 使用new关键字调用的对象，是构造函数constructor 10 构造函数是专门用来创建对象的函数 11 使用typeof检查一个对象时，会返回object 12 13 在对象中保存的值称为属性 14 向对象添加属性 15 语法 对象.属性名 = 属性值 16 属性名不强制按照标识符的规范 17 如果需要使用特殊的属性名，不能采用.的方式来 18 操作，需要使用另外一种方式 19 语法 对象["属性名"] = 属性值 20 读取时也需要采用这种方式 21 使用[]这种形式去操作属性，更加的灵活 22 在[]中可以直接传递一个变量，这样变量值是多少就会读取 23 那个属性 24 25 obj["123"] = 789; 26 var n = "123"; 27 28 console.log(obj[n]); //789 29 30 修改对象的属性值 31 语法 对象.属性名 = 新值 32 33 删除对象的属性 34 语法 delete 对象.属性名 35 36 37 in 运算符 38 通过该运算符可以检查一个对象中是否含有指定的属性 39 如果有则返回true，没有则返回false 40 语法 “属性名” in 对象 41 --> 42 <script type="text/javascript"> 43 44 var name = "coco"; 45 var gender = "female"; 46 var age = 21; 47 48 var obj = new Object(); 49 50 //向obj中添加一个name属性 51 obj.name = "coco"; 52 //向obj中添加一个name属性 53 obj.gender = "female"; 54 //向obj中添加一个name属性 55 obj.age = 21; 56 57 console.log(obj); 58 59 //检查obj中是否含有test属性 60 console.log("name" in obj); //true 61 </script> 62 </body> 63 </html>
对象的引用
new的两个对象保存的是不同的内存地址，即使他们属性的值相同，他们也不相等。
基本的数据类型引用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
JS中的变量都保存到栈内存中
基本数据类型的值直接在栈内存中存储
值与值之间是独立存在的，修改一个变量不会影响到另外一个变量
对象是保存到堆内存中的，每创建一个新对象，就会在堆内存中开辟出一个新的空间，而
变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，
当一个通过一个变量修改属性时，另一个也会受到影响
对象保存的是地址！！！！！！！！！！
-->
<script type="text/javascript">
var obj = new Object();
obj.name = "coco";
var obj2 = obj;
var obj3 = new Object();
var obj4 = new Object();
obj3.name = "coco";
obj4.name = "coco";
console.log(obj3);
console.log(obj4);
console.log(obj3 == obj4); //false
</script>
</body>
</html>
对象字面量
<!-- 创建一个对象 var obj = new Object(); 使用对象字面量来创建一个对象 var obj = {}; 使用对象字面量，可以在创建对象时，直接指定对象中的属性 属性名和属性值滴一组一组的名值对结构 名和值之间使用：连接，多个名值对之间使用，隔开 如果一个属性之后没有属性了就不要再用， 语法 {属性名：属性值，属性名：属性值..} var obj2 = { name:"coco", age:21 } -->
函数
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
函数
函数也是一个对象
函数中可以封装一些功能(代码)，在需要时可以执行这些功能(代码 )
函数中可以保存一些代码在需要的时候调用
使用typeof检查一个函数对象，会返回function
创建一个函数对象
-可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function()
封装到函数中的代码不会立即执行
函数中的代码会在函数调用的时候执行
调用函数 语法 函数对象()
当调用函数时，函数中封装的代码会按照顺序执行
fun();
使用函数声明来创建一个函数
语法 function 函数名([形参1，形参2...]){
语句..
}
使用函数表达式来创建一个函数
语法 var 函数名 = function([形参1，形参2..]){
语句..
};记得这里有个分号
-->
<script type="text/javascript">
function fun1(){
console.log("hello");
}
fun1();
function(){
console.log("这个函数没啥用");
}
var fun3 = function(){
console.log("我是匿名函数中封装的代码");
};
fun3();
</script>
</body>
</html>
函数的参数
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
可以在函数的()中来指定一个或多个形参
多个形参之间使用，隔开，声明形参就相当于函数内部声明了相应的变
量，但是并不赋值
在调用函数时，可以在()中指定实参
实参将会赋值给函数中对应的形参
实参可以是任意的数据类型
调用函数时解析器不会检查实参的类型
所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
调用函数时，解析器也不会检查实参的数量
多余的实参不会被赋值
如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
-->
<script type="text/javascript">
//形参
function sum(a,b){
console.log(a+b);
}
//实参
sum(1,2);
sum(123,"hello");//123hello
sum(true,false);//1
sum(123,456,"hello",true,false);
</script>
</body>
</html>
返回值
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
可以使用return来设置函数的返回值
语法 return 值
return后的值将会作为函数的执行结果返回
可以定义一个变量，来接收返回值
return后的语句都不会执行
如果return语句后不跟任何值就相当于返回一个undefined
如果函数中不写return，则也会返回undefined
return后可以接任何类型的值
-->
<script type="text/javascript">
function sum(a,b,c){
//alert(a+b+c);
var d = a+b+c;
return d;
}
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么
var result = sum(4,7,8);
</script>
</body>
</html>
返回值练习
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 // <!-- 定义一个函数，是偶数返回true --> 9 function oushu(i){ 10 return i % 2 == 0; 11 } 12 var result = oushu(2); 13 console.log("result:"+result); 14 15 //求圆的面积 16 function area(i){ 17 return 3.14 * i * i; 18 } 19 var yuan = area (6); 20 console.log("area:"+yuan); 21 22 //创建一个函数，可以在控制台输出一个人的信息 23 //可以输出人的name,age,gender,address 24 //这种方法容易传错参数 25 // function person(name,age,gender,address){ 26 // console.log(name,age,gender,address); 27 // } 28 // person("coco",21,"female","zhuhai"); 29 30 //实参可以是任意的数据类型，也可以是一个对象 31 //当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递 32 //创建一个对象 33 function person(p){ 34 console.log("person = "+p); 35 console.log("我是"+p.name+","+p.age+p.gender+p.address); 36 } 37 var obj = { 38 name:"coco", 39 age:21, 40 gender:"female", 41 address:"zhuhai" 42 }; 43 person(obj); 44 45 // 实参可以是一个对象，也可以是一个函数 46 function fun(a){ 47 console.log("a = "+a); 48 //跟调用fun(person)一样一样的 49 // a(obj); 50 } 51 fun(123); 52 fun(person); 53 fun(function(){alert("hello")}); 54 55 //area()和area的区别 56 //area() -调用函数 -相当于使用的函数的返回值 57 //area -函数对象 -相当于直接使用函数对象 58 fun(area(6)); 59 fun(area); 60 </script> 61 62 </body> 63 </html>
return
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 function fun(){ 9 console.log("要执行了"); 10 11 for(var i=0 ; i < 5; i++){ 12 if(i == 2){ 13 //使用break跳出本次循环 14 //break; 15 16 //continue用于跳过当次循环 17 continue; 18 19 //使用return可以结束整个函数，后面的都不会执行 20 return; 21 } 22 console.log(i); 23 } 24 console.log("函数执行完了"); 25 } 26 fun(); 27 28 29 //返回值可以是任意的数据类型 30 //也可以是一个对象，也可以是一个函数 31 function fun2(){ 32 //返回一个对象 33 return {name:"jelly"}; 34 } 35 var a = fun2(); 36 console.log("a = "+a.name); 37 38 function fun3(){ 39 function fun4(){ 40 alert("fun4"); 41 } 42 //将函数对象作为返回值返回 43 return fun4(); 44 } 45 a = fun3(); 46 //console.log(a); 47 a(); 48 fun3()();//这个是一步完成的 49 </script> 50 </body> 51 </html>
