到目前为止,我们使用的引用类型最多的可能就是Object 类型了。虽然Object 的实例不具备多少功能, 但对于在应用程序中的存储和传输数据而言,它确实是非常理想的选择。 创建Object 类型有两种。一种是使用new 运算符,一种是字面量表示法。
1.使用new 运算符创建Object var box = new Object(); //new 方式 box.name = '李四'; //创建属性字段 box.age = 28; //创建属性字段 2.new 关键字可以省略 var box = Object(); //省略了new 关键字 3.使用字面量方式创建Object var box = { //字面量方式 name : '李四', //创建属性字段 age : 28 }; 4.属性字段也可以使用字符串创建 var box = { 'name' : '李四', //也可以用字符串形式 'age' : 28 }; 5.使用字面量及传统复制方式 var box = {}; //字面量方式声明空的对象 box.name = '李四'; //点符号给属性复制 box.age = 28; 6.两种属性输出方式 alert(box.age); //点表示法输出 alert(box['age']); //中括号表示法输出,注意引号 PS:在使用字面量声明Object 对象时,不会调用Object()构造函数(Firefox 除外)。 7.给对象创建方法 var box = { run : function () { //对象中的方法 return '运行'; } } alert(box.run()); //调用对象中的方法 8.使用delete 删除对象属性 delete box.name; //删除属性 在实际开发过程中,一般我们更加喜欢字面量的声明方式。因为它清晰,语法代码少, 而且还给人一种封装的感觉。字面量也是向函数传递大量可选参数的首选方式。 function box(obj) { //参数是一个对象 if (obj.name != undefined) alert(obj.name); //判断属性是否存在 if (obj.age != undefined) alert(obj.age); } box({ //调用函数传递一个对象 name : '李四', age : 28 });1、Array对象(very important)
Array对象是数组对象,跟java中的数组一个意思,但是使用语法上稍微有些区别。 Java:可以保存多种类型相同的数据。在Java中数组的长度是固定的,类型也固定的。 js:可以保存不同类型的数据,同时长度不固定。可以把其理解成Java中的ArrayList。
1.2、创建数组对象 的方式:
创建空数组:var arr = new Array(); 创建指定容量的数组:var arr = new Array(size); 创建数组并填充元素:var arr = new Array(a,b,c...); 创建元素数组:var arr = [a,b,c...];1.3、数组中元素的获取: 跟java一样通过索引的方式获得数组中的元素,获得数组中的一个元素:arr[num]
演示一:
for(var i=0;i<arr.length;i++){ alert(arr[i]); }演示二:
<script> // 定义一个数组, 并初始化元素 var arr = ["aaa", 111, 88.7, true]; // 类似于没有定义泛型的 ArrayList // 遍历数组 for (var i = 0; i < arr.length; i++) { // 获取元素 document.write(i + " = " + arr[i] + " <br />"); } // 越界赋值 arr[5] = "啦啦"; document.write("arr.length = " + arr.length + " <br />"); for (var i = 0; i < arr.length; i++) { // 获取元素 document.write(i + " = " + arr[i] + " <br />"); } </script>2.1、创建对象
创建当前日期时间:var date = new Date(); 创建指定日期时间:var date = new Date(毫秒值); 其中毫秒值为1970-01-01至今的时间毫秒值2.2、时间获取
年:getFullYear() 以四位数字返回年份 月:getMonth() 返回月份 (0 ~ 11) 日:getDate() 返回一个月中的某一天 星期:getDay() 返回一周中的某一天 (0 ~ 6),0代表周日 小时:getHours() 返回小时(0 ~ 23) 分:getMinutes() 返回分钟(0 ~ 59) 秒:getSeconds() 返回秒数(0 ~ 59) 毫秒值:getTime() 返回 1970 年 1 月 1 日至今的毫秒数 toLocaleString() 把Date对象转换为字符串 toLocaleDateString() 把Date对象的日期部分转换为字符串 toLocaleTimeString() 把Date对象的时间部分转换为字符串演示:
3.1、概述: Math对象是数学对象,是一个工具对象,因此Math对象不用使用new的方式创建,直接使用Math就可以调用对象内部的方法。
Math.random() 返回 0.0 ~ 1.0 之间的随机double小数演示一:
<script> for (var i = 0; i < 20; i++) { // Math 数学类 : random(); 返回一个 0.0 ~ 1.0 之间的小数. 不包含 1.0. var value = Math.random(); // value = value * 10; 0.78 -> 7.8 // 将该数值转换为一个整型 window.parseInt(); // value * n, 取值范围为 [0~9], 如果n是一个数组的长度, 根据长度计算出来的下标, 会不会越界呢 ? 不会. var index = window.parseInt(value * 10); document.write(i + " = " + index + " <br />"); } </script>演示二:随机点名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style> body{ text-align: center; } </style> <script> // 页面加载完成入口 window.onload = function () { // 1. 获取标签 (数组) var inputs = document.getElementsByTagName("input"); var h1 = document.getElementsByTagName("h1"); // 1.2 提供一个数组, 存储人名 var arr = ["张三", "李四", "王五", "赵六", "田七", "大八", "九九"]; // 定义一个 timer 变量 var timer; // 2. 给 `走你` 按钮绑定单击事件 inputs[0].onclick = function () { // 定时器的 bug, 开启新定时器之前, 必须先关闭就定时器. window.clearInterval(timer); // 3. 循环定时器 timer = window.setInterval(function () { // 4. 生成一个随机下标 var index = window.parseInt(Math.random() * arr.length + ""); // 5. 根据下标取出对应的名称, 更换 h1 标签中的内容. h1[0].innerHTML = arr[index]; }, 30); } // 给 `停止` 按钮绑定单击事件 inputs[1].onclick = function () { window.clearInterval(timer); } } </script> </head> <body> <input type="button" value="走你!" /> <input type="button" value="停止!" /> <h1>等待抽奖!</h1> </body> </html>1、转换函数
全局函数: parseInt(num); // 取整,不会四舍五入 Math.round(num);// 取整,会四舍五入演示:
```haskell <script> // parseInt var num1 = window.parseInt("998"); document.write(typeof num1 + " = " + num1 + "<br />"); var num2 = window.parseInt("7.8"); document.write(typeof num2 + " = " + num2 + "<br />"); // parseFloat var num3 = window.parseFloat("8.7") document.write(typeof num3 + " = " + num3 + "<br />"); // Math 类 round 方法 var num4 = Math.round(7.8); document.write(typeof num4 + " = " + num4 + "<br />"); // isNaN var r1 = window.isNaN(100); document.write(typeof r1 + " = " + r1 + "<br />"); var r2 = window.isNaN("100"); document.write(typeof r2 + " = " + r2 + "<br />"); var r3 = window.isNaN("abc"); document.write(typeof r3 + " = " + r3 + "<br />"); </script>1、概述 BOM(Browser Object Mode),浏览器对象模型,是将我们使用的浏览器抽象成对象模型,例如我们打开一个浏览器,会呈现出以下页面,通过js提供浏览器对象模型对象我们可以模拟浏览器功能。
例如,在浏览器地址栏输入地址,敲击回车这个过程,我们可以使用location对象进行模拟。在例如,浏览器中的前进和后退按钮,我们可以使用history对象模拟。 2、BOM对象:
Screen对象:里面存放着有关显示浏览器屏幕的信息。 Window对象:表示一个浏览器窗口或一个框架。 Navigator对象:包含的属性描述了正在使用的浏览器。 History对象:保存浏览器历史记录信息。 Location对象:Window对象的一个部分,可通过window.location属性来访问。