javaScript-内置对象和bom对象
文章目录
-
-
-
-
- 1.对象
-
- 1.1.定义方式
- 1.2.初始化对象
- 1.3.this
- 2.内置对象
-
- 2.1.String对象
- 2.2.Number对象
- 2.3.Math对象
- 2.4.Date对象
- 3.BOM对象
-
- 3.1.Window对象
- 3.2.定时器函数调用
- 3.2.screen对象
- 3.3.history对象
- 3.4.location对象
- 3.5.navigator对象
-
-
-
1.对象
一组属性和方法的集合
1.1.定义方式
- 使用new关键字定义
<script type="text/javascript">
let obj = new Object();
console.log(obj) //{} 空对象
</script>
- 使用字面量定义
<script type="text/javascript">
let obj = {};
console.log(obj) //{} 空对象
</script>
1.2.初始化对象
- 使用new关键字初始化
<script type="text/javascript">
let person = new Object();
person.name="zs";
person.age = "18";
person.play = function(sportName) {
console.log("play..."+sportName)
}
console.log(person.name);
console.log(person.age);
person.play("football");
</script>
- 使用字面量初始化
<script type="text/javascript">
let person = {
name : "zs",
age : "18",
play : function(sportName) {
console.log("play..."+sportName)
}
//es6的写法
play(sportName){
console.log("play..."+sportName)
}
};
console.log(person.name);
console.log(person.age);
person.play("football");
</script>
访问方式：
访问对象： 对象名
访问属性： 对象.属性名 或者 对象[‘属性名’]
访问方法： 对象.方法名();
1.3.this
this指代当前对象，B对象去调用A方法, A方法中的this代表B对象
<script type="text/javascript">
let person = new Object();
person.name = '梅西';
person.play = function(sportName) {
console.log("this指代的是："+this)//[object Object]
console.log(this.name);//梅西
console.log("play..."+sportName)
}
person.play("football");
</script>
2.内置对象
2.1.String对象
JS中字符串可以是基本数据类型，也可以是引用数据类型，
具体是哪一种根据我们创建的方式而定；
基本数据类型：
let str = 'abc'
引用数据类型：
let str = new String("abc")
1、基本类型字符串 和 引用类型字符串本质上是有区别( 类型不同、存储的位置不同 )
2、JS中的基本数据类型可以当成对应的引用类型来使用
字符串中的属性和方法：
- str.length 获取字符串的长度
<script type="text/javascript">
let str = "abc";
console.log(str.length);//3
</script>
- str.charAt 返回指定索引的值
<script type="text/javascript">
let str = "abc";
console.log(str.charAt(2));//c
console.log(str.charAt(10));//不存在的索引位置 "" 空字符串
</script>
- str.indexOf() 返回指定字符在母串中第一次出现的索引值(从左到右),没有返回-1,与lastIndexOf相反 === 从右向左
<script type="text/javascript">
let str = "abcabc";
console.log(str.indexOf("abc"));//0
console.log(str.indexOf("d"));//-1
</script>
- str.replace() 替换字符串 replace(A, B) B替换A
<script type="text/javascript">
let str = "abcabc";
str = str.replace("abc","cba");
console.log(str);//cbaabc 只替换第一次出现
str = str.replace(/abc/g,"cba");
console.log(str);//cbacba 全局替换
</script>
- str.substr() 截取字符串
<script type="text/javascript">
let str = "abcdefghijkl";
console.log(str.substr(4)); //efghijkl 只有一个参数，从给定索引位置开始截取到末尾
console.log(str.substr(5,7));//fghijkl 有两个参数，第一个参数表示截取的位置，第二个参数表示截取的个数
</script>
- str.substring() 截取字符串
<script type="text/javascript">
let str = "abcdefghijkl";
str = str.substring(3);
console.log(str);//defghijkl 只有一个参数，表示从给定索引位置截取到末尾
str = str.substring(3,6);
console.log(str);//ghi 第一个参数表示截取的起始位置，第二个参数表示截取的终止位置，遵循左闭右开规则
</script>
- str.toLowerCase() 转为小写
<script type="text/javascript">
let str = "HELLO H5";
str = str.toLowerCase();
console.log(str);//hello h5
</script>
- str.toUpperCase() 转为大写
<script type="text/javascript">
let str = "abcdefghijkl";
str = str.toUpperCase();
console.log(str);//ABCDEFGHIJKL
</script>
2.2.Number对象
- num.toFixed() 将数值转为指定位数的字符串
<script type="text/javascript">
let num = 3.14159;
num = num.toFixed(2);
console.log(num);//3.14
</script>
2.3.Math对象
- PI属性代表圆周率
<script type="text/javascript">
console.log(Math.PI);//3.141592653589793
</script>
- Math.abs(x) 返回数x的绝对值
<script type="text/javascript">
console.log(Math.abs(-250));//250
</script>
- Math.ceil(x) 对一个数x进行向上舍入
<script type="text/javascript">
console.log(Math.ceil(-23.233));//-23
console.log(Math.ceil(12.789))//13
console.log(Math.ceil(8.123))//9
</script>
- Math.floor(x) 对一个数x进行向下舍入
<script type="text/javascript">
console.log(Math.floor(-23.233));//-24
console.log(Math.floor(12.789))//12
console.log(Math.floor(8.123))//8
</script>
- Math.round(x) 把数x舍为最接近的整数（四舍五入）
<script type="text/javascript">
console.log(Math.round(-23.233));//-23
console.log(Math.round(12.789))//13
console.log(Math.round(8.123))//8
</script>
- Math.max(x) 返回指定数中最大的一个，可以传递无限个数
<script type="text/javascript">
console.log(Math.max(23,12,99,67,0,-23,-56));//99
</script>
- Math.min(x,y) 返回指定数中最小的一个，可以传递无限个数
<script type="text/javascript">
console.log(Math.min(23,12,99,67,0,-23,-56));//-56
</script>
- Math.random() 返回介于0~1之间的一个随机数，包含0但不包含1
<script type="text/javascript">
console.log(Math.random());//-0.21912269692545228
</script>
- 获取指定范围的随机数
<script type="text/javascript">
console.log(randomInt(10,20));//15
function randomInt(min, max) {
return Math.floor( Math.random() * (max - min + 1) ) + min;
}
</script>
- Math.pow(x,y) 返回数x的y次幂的值
<script type="text/javascript">
console.log(Math.pow(2,3));//2的3次方 8
console.log(Math.pow(3,2))//3的2次方 9
</script>
2.4.Date对象
- 创建Date对象
<script type="text/javascript">
let date = new Date();
console.log(date);//9 Mon Nov 02 2020 11:38:43 GMT+0800 (中国标准时间)
</script>
- 创建指定日期对象
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20");
console.log(d1);//Thu Feb 20 2020 20:20:20 GMT+0800 (中国标准时间)
</script>
- getFullYear() 返回一个表示年份的四位数字
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20");
console.log(d1.getFullYear());//2020
</script>
- getMonth() 返回表示月份的数字,返回值是0-11之间的一个整数
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20");
console.log(d1.getMonth());//1
</script>
- getDate() 返回某一天，返回值是1-31之间的一个整数
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20");
console.log(d1.getDate());//20
</script>
- getDay() 返回表示星期的某一天数字，返回值是0（周日）-6（周六）之间的一个整数
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20");
console.log(d1.getDay());//4
</script>
- getHours() 返回时间的小时字段，返回值是0到23之间的一个整数
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20");
console.log(d1.getHours());//20
</script>
- getMinutes() 返回时间的分钟字段，返回值是0-59之间的一个整数
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20");
console.log(d1.getMinutes());//20
</script>
- getSeconds() 返回时间的秒值，返回值是0-59之间的一个整数
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20:200");
console.log(d1.getSeconds());//20
</script>
- getMilliseconds() 返回时间的毫秒值，返回值是0-999之间的一个整数
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20:200");
console.log(d1.getMilliseconds());//200
</script>
- getTime() 返回据1970-1-1之间的毫秒值
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20:200");
console.log(d1.getTime());//1582201220200
</script>
- toLocaleString() 把date对象转换为字符串
<script type="text/javascript">
let d1 = new Date("2020-02-20 20:20:20:200");
console.log(d1.toLocaleString());//2020/2/20 下午8:20:20
</script>
3.BOM对象
BOM对象（浏览器对象）由以下组成
- window是BOM中顶层对象
- window对象有六大属性、这六大属性又是一个对象
- History：访问浏览器的浏览历史记录
- Location：访问地址栏
- Navigator：访问浏览器的各种信息
- Screen：访问显示器屏幕相关的一些信息
- Frames[]： 框架集
- Document：DOM最顶层对象， 也代表网页文档
3.1.Window对象
Window对象是BOM与DOM的顶层对象，Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。
例如：
window.alert(); 简写方式 alert();
window.document.write(); 简写方式 document.write()
window对象中的方法:
alert()
显示带有一段消息和一个确认按钮的警告框。
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()
显示可提示用户输入的对话框。
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()
在指定的毫秒数后调用函数或计算表达式。
clearInterval()
取消由 setInterval() 设置的 timeID。
clearTimeout()
取消由 setTimeout() 方法设置的 timeID
3.2.定时器函数调用
-
间歇调用
含义：每隔多少毫秒执行一次函数-周期性
设置间歇调用: setInterval(“函数或者代码串”,时间);
清除间歇调用: clearInterval( 计时器Id )
语法：
1. setInterval(function(){}, 时间-毫秒);
2. setInterval(foo, 时间);
function foo(){
}
需求：每隔1s输出1-10之间的数字
<script type="text/javascript">
let num = 0;
let task = setInterval(function(){
num++;
console.log(num);
//停止任务
if(num===10) clearInterval(task);
},1000);
</script>
-
超时调用
理解：多少毫秒后执行一次函数-只执行一次
设置超时调用: setTimeout(“函数名或者代码串”,时间)
清除超时调用: clearTimeout( 计时器Id )
语法：
1. setTimeout(function(){}, 时间-毫秒); 2. setTimeout(foo, 时间); function foo(){ }
需求：使用超时调用模拟间歇调用，每隔1s输出1-10之间的数字
<script type="text/javascript">
let num = 0;
let syncTask = setTimeout(task,1000);//同步
function task(){
num++;
console.log(num);
let asyncTask = setTimeout(task,1000);//异步任务
if(num===10) clearTimeout(asyncTask);
}
</script>
3.2.screen对象
| availWidth | 显示器屏幕可用宽度，除任务栏外 |
|---|---|
| availHeight | 显示器屏幕可用高度，除任务栏外 |
| Width | 实际宽 |
| Height | 实际高 |
<script type="text/javascript">
console.log(screen.availWidth);//1549
console.log(screen.availHeight);//831
console.log(screen.height);//872
console.log(screen.width);//1549
</script>
3.3.history对象
该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。
| length | 整数值，表示浏览器历史列表中的URL的个数 |
|---|---|
| back() | 返回到浏览器列表中当前页面之前的页面，与浏览器的“返回”功能相同 |
| forward() | 前进到浏览器中当前页面之后的页面，与浏览器的“前进”按钮功能相同 |
| go(1) | 访问浏览器列表中指定的页面，该方法接受一个参数。参数可正可负。 |
3.4.location对象
| 属性 | 描述 |
|---|---|
| hash | 表示URL地址中的锚点部分，包括前导符“#”。可读可写 |
| host | 表示URL中的主机名和端口，即IP地址或者域名端口，可读可写 |
| hostname | 表示URL中的主机名部分。可读可写 |
| href | 表示当前页面完整的URL地址，可读可写。 |
| pathname | 表示URL中的页面路径部分，包含页面文件名称，可读可写 |
| port | 表示URL地址中的端口部分，可读可写 |
| protocol | 表示URL中的协议部分，包括尾部的“：”符号，可读可写。如http: |
| search | 表示URL中的参数部分，可读可写。如：?name=mary |
3.5.navigator对象
| userAgent | 返回由客户机发送服务器的 user-agent 头部的值。 (用户代理) |
|---|---|
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值。 |
<script type="text/javascript">
console.log(navigator.cookieEnabled);//true
console.log(navigator.userAgent);//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36
</script>