前端与JavaScript(中)|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第十一天
一.BOM
BOM(browser Object Model，浏览器对象模型)是JS与浏览器窗口交互的接口
一些浏览器改变尺寸、滚动条滚动相关的特效，都要借助BOM技术
1. window对象
window对象是当前JS脚本运行所处的传窗口，而这个串口中包含的DOM结构，window.document属性就是document对象
在有标签页功能的浏览器中，每个标签都拥有自己的window对象；也就是说，同一个窗口的标签页之间不会共享一个window对象
窗口尺寸相关属性
属性 意义
innerHeight 浏览器窗口的内容区域的高度，包含水平滚动条
innerWidth 浏览器窗口的内容区域的宽度，包含垂直滚动条
outerHeight 浏览器窗口的外部高度
outerWidth 浏览器窗口的外部宽度
获得不包含滚动条的窗口宽度，要用
document.documentElement.clientWidth
resize事件
在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener('resize')来绑定事件处理函数
已卷动高度
window.scrollY属性表示在垂直方向已滚动的像素值
已动高度
document.documentElement.scrollTop属性也表示窗口卷动高度
var scrollTop = window.scrollY || document.documentElement.scrollTop;
只读 不是只读
scroll事件
在窗口被卷动之后，就会触发scroll事件，可以使用window.onscroll或者window.addEventListener('scroll')来绑定事件
2. Navigator对象
window.navigator属性可以检索navigator对象，它的内部含有用户此次活动的浏览器的相关属性和标识
属性 意义
appName 浏览器官方名字
appVersion 浏览器版本
userAgent 浏览器的用户代理(含有内核信息和封装壳信息)
platform 用户操作系统
3. History对象
window.History对象提供了操作浏览器绘画历史的接口
常用操作就是模拟浏览器的回退按钮
History.back();//等同于点击浏览器的回退按钮
History.go(-1);//等同于History.back();
4. location对象
window.location标识当时所在网址,可以通过这个属性赋值命令浏览器进行页面跳转
重新加载当前页面
可以调用Location的reload方法以从新加载当前页面，参数true表示强制从服务器强制加载
window.location.reload(true); true强制加载
5. BOM特效开发
返回顶部按钮制作
返回顶部的原理：改变document.documentElement.scrollTop属性,通过定时器逐步改变此值，则将用动画形式返回顶部
楼层导航效果
DOM元素都有offsetTop属性，表示此元素到定位祖先元素的垂直距离
定位祖先元素。在祖先中，离自己最近且拥有定位属性的元素
二.面向对象
认识对象 JS中{}表示对象
对象(object)是'键值对'的集合，表示属性和值的映射关系
属性的创建
如果对象本身没有某个属性，则用点语法赋值时，这个属性就会被创建出来
var obj={
a:10
};
obj.b=40;
属性的删除
如果要删除某个对象的属性，需要使用delete操作符
var obj={
a:1,
b:2
}
delete obj.a;
对象的方法
如果某个属性的值时函数，则它也被称为对象的'方法'
var xiaoming = {
name: '小明',
age: 12,
sex: '男',
hobbies: ['足球', '编程'],
'favorite-book': '舒克和贝塔',
sayHello:function(){
console.log('你好，我是小明，今年12岁');
}
};
这个就是sayHelle方法
方法的调用 xiaoming.sayHello 打点调用
对象的遍历
和遍历数组类似，对象也可以被遍历，遍历对象需要使用for..in..循环体
使用for..in..循环可以遍历对象的每一个键
for(var k in obj){//k是自定义的循环变量，它会一次成为对象的每一个键 boj是要遍历的对象
console.log('属性'+k+'的值时'+obj[k]);
}
对象是引用类型值
不能使用var obj2 = obj1这样的语法克隆一个对象
使用==或者===进行对象的比较时，比较的是他们是否为内存中的同一个对象，而不是比较值是否相同
对象的浅克隆
只克隆对象的表层，如果对象的某些属性值又是引用类型值，则不进一步克隆他们，只传递他们的引用
使用for..in..循环即可实现对象的浅克隆
对象的深克隆
克隆对象的全貌,不论对象的属性值是否是引用类型值,都能将他们实现克隆
和数组的深克隆类似,对象的深克隆需要使用递归
函数的上下文由调用函数的方式决定
函数的上下文(this关键字)由调用函数的方式决定,function是’运行时上下文‘策略
函数如果不调用,则不能确定函数的上下文
数组(类数组对象)枚举出函数进行调用,上下文是这个数组(类数组对象)
规则4:IIFE中的函数,上下文是window对象
(function(){
})();
规则5:定时器、延时器调用函数,上下文是window对象
setInterval(函数,时间);
setTimeout(函数,函数);
规则6:事件处理函数的上下文是绑定事件的DOM元素
DOM元素.onclick = function(){
};
用new操作符调用函数
new函数()
JS规定，使用new操作符调用函数会进行'四步走'
1.函数体内会自动创建出一个空白对象
2.函数的上下文(this)会指向这个对象
3.函数体内的语句会执行
4.函数会自动返回上下文对象，即使函数没有return语句
构造函数
构造函数命名首字母必须要大写
用new调用一个函数，这个函数就被称为'构造函数',任何函数都可以是构造函数,只需要用new调用它
构造函数用来'构造新对象'，他的内部语句将为新对象添加若干属性和方法，完成对象的初始化
什么是prototype
任何函数都有prototype属性，prototype是英语'原型'的意思
prototype属性值是个对象。它默认拥有constructor属性指回函数
构造函数的prototype是实列的原型
hasOwnProperty
hasOwnProperty方法可以检查对象是否真正'自己拥有某属性或者方法'
xiaoming.hasOwnProperty('name'); //true
xiaoming.hasOwnProperty('nationality');//fasle
in
in运算符只能检查某个属性或方法是否可以被对象访问,不能检查是否自是自己的属性或方法
'name' in xiaoming //true
'nationality' in xiaoming //true
面向对象到底是什么
面向对象的本质:定义不同的类，让类的实例工作
面向对象的优点:程序编程更清晰、代码结构更严密、使代码更健壮更利于维护
面向对象经常用到的场合：需要封装和复用性的场合(组件思维)
什么是包装类
Number()、String()和Boolean()分别是数字、字符串、布尔值的'包装类'
很多编程语言都有包装类的设计，包装类的目的就是为了让基本类型值可以从他们的构造函数的prototype上获得方法
Math对象的方法
幂和开方：Math.pow()、Math.sqrt()
向上取整和向下取整:Math.ceil()、Math.floor()
Math.round()可以将一个数字四舍五入
console.log(Math.round(3.4)); //3
console.log(Math.round(3.5)); //4
如何指定四舍五入的小数后几位数
var a =3.7554;
console.log(Math.round(a*100)/100);//3.76
Math.max()可以得到参数列表的最大值
Math.min()可以得到参数列表的最小值
console.log(Math.max(6,4,8,9)); //9
Math.max()要求参数必须是'罗列出来'，不能是数组
apply方法可以指定函数的上下文,并且以数组的形式传入'零散值'当做函数的参数
var arr=[3,6,9,2];
var max = Math.max.apply(null,arr);
console.log(max);//9
随机数Math.random()
Math.random()可以得到0~1之间的小数
为了得到[a,b]区间内的整数，可以使用这个公式
parseInt(Math.random()*(b-a+1))+a
Date()日期对象
使用new Date()即可得到当前时间的日期对象，它是object类型值
使用new Date(2020,11,1)即可得到指定日期的日期对象，注意第二个参数表示月份，从0开始算,11表示12月
也可以是new Date('2020-12-01')这样的写法
日期对象的常见方法
方法 功能
getDate() 得到日期1~31
getDay() 得到星期0~6 //0表示星期天
getMonth() 得到月份0~11
getFullYear 得到年份
getHours 得到小时数0~23
getMinutes() 得到分钟数0~59
getSeconds() 得到秒数0~59
时间戳
时间戳表示1970年1月1日零点整距离某时刻的毫秒数
通过getTime()方法或者Date.parse()函数可以将日期对象变为时间戳
通过new Date(时间戳)的写法，可以将时间戳变为日期对象
三.正则表达式
正则表达式描述了字符串的'构成模式',经常被用于检查字符串是否符合预定的格式要求
正则表达式'按位'描述规则,是指它是一位一位的描述字符串的构成形式
比如检查字符串是不是这样的：以字母m开头，然后是3个数字，最后以字母n结尾 /^m\d\d\dn表示结尾 \d表示数字
正则表达式
使用/内容/的语法形式,可以快速创建正则表达式
也可以使用new RegExp('内容')的形式,创建正则表达式 （\需要多谢一个）
使用typeof运算符检查正则表达式的类型,结果是object
元字符
元字符是指一位指定类型字符
元字符 功能
\d 匹配一个数字
\D 匹配一个非数字字符
\w 匹配一个单字字符(字母、数字或者下划线
\W 匹配一个非单字字符
\s 匹配一个空白字符,包括空格、制表符和换行符
. 任意字符
字符的转义
不管一个符号有没有特殊意义.都可以在其之前加上一个\以确保它表达的是这个符号本身
方括号表示法
使用方括号，比如[xyz],可以创建一个字符集合,表示匹配方括号中的任意字符
比如某学校的学号规定：第1位是一个字母,b表示本科生,y表示研究生，后面是7位数字： /^[by]\d{7}$/
可以使用短横-来指定一个字符范围,^表示否定
元字符 等价的方括号表示法
\d [0-9]
\D [^0-9]
\w [A-Za-z0-0_]
\W [^A-Za-z0-9_]
量词
量词 意义
* 匹配前一个表达式0次或多次.等价于{0,}
+ 匹配前一个表达式1次或者多次.等价于{1,}
? 匹配前一个表达式0次或者1次.等价于{0,1}
{n} n是一个真正数,匹配了前一个字符刚好出现了n次
{n,} n是一个正整数,匹配前一个字符至少出现了n次
{n,m} n和m都是整数。匹配前面的字符至少n次,最多m次
修饰符
修饰符也叫做标志(flags),用于使用正则表达式实现高级搜索
修饰符 意义
i 不区分大小写搜索
g 全区搜索
修饰符使用：
var re = /m/gi;
var re = new RegExp('m','gi');
字符串的相关方法
方法 简介
search() 在字符串中根据正则表达式进行查找匹配，返回首次匹配到的位置索引，测试不到则返回-1
match() 在字符串中根据正则表达式进行查找匹配，放回一个数组，找不到则返回null
replace() 使用替换字符串替换掉匹配的字符串，可以使用正则表达式
split() 分隔字符串为数组，可以适应正则表达式
字符串打点调用
