JavaScript——常用对象总结

前言：本次总结，只是针对常用和需要记忆的对象，进行相应的概述。

1. 变量

数组创建

 arr = new Array(1, 2, 3) 或者 arr = [1, 2, 3]

简单的对象创建

obj = new Object();
obj.name = 'wjc';
obj.inputName = function(){
    alert(this.name);
}

注：JavaScript中有专门创建类的模式，具体可以看我另外一篇博客

json对象 即{键名:键值}

obj = {
        'name': 'wjc'
        'age': 18
    }

特殊类型

NaN        Not a Number
null       即''
undefined  未定义

注：当null==undefined 时为true 要使用严格等于判断才会返回false

类型测试

 typeof 			常用于检测实例类型
 instanceof		    常用于判断实例与原型的之间的关系
 constructor	    这个较少使用

2. 显示转化

parseInt()    推荐使用
parseFloat()
eval()
Number()      不推荐使用  因为如果遇到'2a'是不能转成int的
String()
Boolean()

注：以上都是JS类型转换会使用的方法,typeof()则不是，它是用于检测变量类型
需要注意的是json字符类型转json对象则需要使用eval来实现转换

eval('y='+ obj);

补充：

 toFixed(number)将数字保留number位小数
 toExponential(number)科学计数法  设置表达式的小数number位数

3. 变量运算符

数学运算符

+ - * / %

赋值运算符

= += -= *= /= %= 

逻辑运算符

> < >= <= != ==

比较运算符

|| && !

4. 变量作用域

JS中在函数外var定义的变量为全局变量,在函数内var定义的为局部变量PS:如果不想调试的时候出现变量为局部又在函数外访问的情况出现建议无论在函数内或外都直接不写var定义变量,因为这样无论什么时候都是全局变量。

5. 内置对象

数学对象 Math 这个不用实例化直接可用使用

属性: PI 获取3.141592653…
方法:

ceil()    向上取整
floor()   向下取整
round()   四舍五入
random()  返回0到1之间的随机数

日期对象 Date 需要实例化 date = new Date()

方法：

getFullYear()  返回年
getMonth()     返回当前月减一,所以开发的时候需要加1
getDay()       返回星期,也需要加一
getHours()     返回小时
Minutes()      返回分钟
getSeconds()   返回秒

6. 字符串

属性：length 返回字符串长度
方法:

indexOf()
lastIndexOf()
substr(start, length)
slice(start, end)
split(reg)
toUpperCase()
toLowerCase()
search(peg)
match(peg)
replace(peg, 'str')

注：个人认为最重要的还是substr() slice() split() search() match() replace()这几个

7. 正则表达式

正则表达式多用于字符串的验证还有替换很实用,即重点是search(peg) match(peg) replace(peg, ‘str’)

基本语法 peg = /str/g 全局匹配

元字符：

. 查找单个字符 除了换行和行结束符。 这个会匹配空格
\w 查找单词字符 这个不会匹配空格 注意这个不会匹配字符
\W 查找非单词字符
\d 查找数字
\D 查找非数字字符
\s 查找空白字符 这个可用用于应用去除用户输入的空白字符,即repalce(/\s/g, ‘’);
\S 查找非空白字符
\b 匹配单词边界
\B 匹配非单词边界
PS:元字符记法以\开头，记小写的意义，大写相反，.查找所有, w相当于word即查找单词, d相当于decimal查找数字, s相当于String即查找字符非空白

量词：

n+ 匹配任何包含至少一个 n 的字符串
n* 匹配任何包含零个或多个 n 的字符串
n? 匹配任何包含零个或一个 n 的字符串
n{X} 匹配包含 X 个 n 的序列的字符串 即X代表匹配的长度
n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串
n{X,} 匹配包含至少 X 个 n 的序列的字符串
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串

中括号：

[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
(red|blue|green) 查找条件中满足的
注：|是或的意思 用于split分割字符串的时候

匹配修饰符：

i 忽略大小写
g 全局匹配
m 多行匹配

注：当遇到需要匹配的字符串与上面具有实际意义的符号冲突时，例如 /[/g 全局匹配[
search() 返回位置 -1则找不到
split() 对字符串进行切割 例如要把str = ‘2019/10/02’; str = str.split(///g); 返回[‘2019’, ‘10’, ‘02’]
match() 匹配字符 返回数组
replace() 替换字符

8. 数组对象 arr = [] 或者 arr = new Array();

属性：length
方法：
join(’/’)
pop() 返回弹出的最后一个元素
push() 重点,向数组最后位置插入元素,返回的是数组的长度
shift() 向数组第一个位置插入元素
unshift() 将数组中第一个元素移除
reverse() 反转数组
concat() arr1.concat(arr2)将数组arr1和数组arr2连接
splice(start end) 返回子数组
sort(show) 对数组进行排序,需绑定show方法
show(a, b){
return a-b; //升序 从小到大
//return b-a //降序 从大到小
}

注：splice() 重点,像vue这种框架经常会使用splice(),通常是用于删除对象数组中指定位置的对象,方法中的参数splice(strat, length),需要注意的是不包括最后一个!

9. 事件对象

鼠标事件：

onclick() 鼠标单击(左键)
ondblclick() 鼠标双击
oncontextmenu() 鼠标右键菜单 即可以在方法中return false禁止弹出浏览器菜单
onmouseenter() 鼠标移入
onmouseleave() 鼠标移开
onmousemove() 鼠标移动
onnmousedown() 鼠标按下
onmouseup() 鼠标移开

键盘事件：

onkeydown()
onkeyup()

表单事件：

onselect 文本被选定
onsubmit 表单提交 操作对象必须是form表单对于的dom
onchange 用户改变域的内容
onfocus 元素获得焦点
onblur 元素失去焦点
onreset 重置按钮被点击

窗口事件：

onload() 窗口在加载时触发
onreload() 窗口重新加载时触发
onresize() 窗口大小被调整时触发
onscroll() 窗口滚动时触发

图片事件：

onabort 图像加载被中断
onerror 当加载文档或图像时发生某个错误

10. BOM浏览器对象(browser object model)

window对象：

属性:
innerHeight 获取浏览器窗口的高度
innerWidth 获取浏览器窗口的宽度
方法:alert()
confirm()
prompt()
setInterval()
setTimeout()
注:所有全局变量是window的属性
所有全局函数是window的方法

navigator对象：

属性:
userAgent 返回浏览器的内核,即可以使用这个属性进行浏览器兼容
PS:其他属性此处就不列举了,才疏学浅，目前只用到了这个…

screen对象：

属性:
availWidth 整个屏幕的宽（去掉工具栏之类的）
availHeight 整个屏幕的高

history对象：

方法:
back()
forward()
go()
PS:需要注意的是history完整的写法是window.history.back(),即是隶属于window对象的,都是window可以省略不写,所以就单独拎出来会好记一点

location对象：

hostname 返回 web 主机的域名
pathname 返回当前页面的路径和文件名
port 返回 web 主机的端口 （80 或 443）
protocol 返回所使用的 web 协议
注:如果需要直接改地址栏地址可以直接location = ‘http://www.baidu.com’

document对象(文档对象)(DOM对象 Document Object Model)：

//标准模式
 document.documentElement.clientHeight      有效的高   屏幕可视的高
 document.documentElement.clientWidth       有效的宽   屏幕可视的宽
 document.documentElement.scrollHeight      屏幕可滚动的总高度   
 document.documentElement.scrollTop         屏幕目前已滚动的高度
 //混合模式
 document.body.scrollTop                    屏幕目前已滚动的高度
  

注:关于屏幕已滚动的高的浏览器兼容,

诸如360浏览器  QQ浏览器、火狐用  
docuemnt.documentElement.scrollTop
IE 这个滚动的只能用
document.body.scrollTop