js基础笔记

**JS知识回顾
一、语言基础
1、执行语句：单位：表达式 （表达式是由变量，常量，运算符构成
变量：表达式，var 特点，没有类型
常量：数据：String（值类型）,
Number（值类型）,
Boolean（值类型）,
undefined（值类型）,
null（值类型）,
Objet(引用类型) ：Array ,Number,String,Object,自定义对象
值类型：属于深拷贝 引用类型：属于浅拷贝

2、数据之间转换： 2.1、字符串转数字 ：Number() ,+字符串， parselnt(字符串，进制）2-36 不再范 围 ，返回NaN
2.2、其他转字符串 ： +“”
2.3、其他转BOOL ：非0，非空，非nudefined ,非NaN 非null 即为真
！！（值）

3、 运算符：算数运算符（+：字符串运算，表拼接），
赋值运算符，
关系运算符，（=== 值和数据类型同时比较）
逻辑运算符， （逻辑短路： falst && 表达式 true || 表达式）
type运算符，
instanceod运算符，
.运算符，
()函数调用运算符
4、语句执行控制（多选一）：
4.1分支语句：if语句，ifelse语句， if else if else语句 ， swith…case语句，
三目运算符（表达式？表达式1：表达式2）
4.2循环：for循环 ：循环控制变量 i
循环判断条件，
循环体，
循环变量的递增
循环嵌套（多维数组，外层循环执行一次，内层循环执行所有）
循环跳出：continue,跳过本次循环
break:跳出本次循环
跳到指定位置，层： 循环标识：“标识名称：” ，break 表示名称
while循环： do.while()
5、高级流程控制（复用代码段）函数 ：
5.1、定义: 关键字：function
无参有返回值，有参有返回值，有参无返回值，有参有返回值
函数调用结束标志 ：return关键字 ，不写默认为：return undefined
5.2、调用
5.3、变量作用域 ：函数内，可以访问函数外变量
函数外，可以访问函数内变量
变量作用域的提升：函数内不带VAR关键字，就自动创建了一个全局变量
闭包 ：实现方式，在函数内部定义函数，在函数外部调用内部的定义函数，来操作外部函数的局部变量，形成闭包
闭包特点：让外部函数的局部变量，暂存
闭包应用：1、分割作用域，防止变量名污染：立即执行函数，return()导出
2、异步操作 ，事件函数：拖拽
请求封装场景：
3、单例模式的实现
闭包缺点：内存溢出的风险

5.4返回值和参数： 参数：对象，数值， 函数 ：回调函数
返回值：数值，对象，函数，闭包
6、数据处理 ：
6.1有序集合 ：6.1.1数组 Array :NEW Array() ,语法糖（字面量）
数组方法：增： push pop unshift shift splice(index,0,添加项目）
删：splice(index,数量） indexOf()
数组名[下标]访问修改 slice(startlndex,enlndex) ==>返回新数组 concat filter(callback)
数组转字符串：join(符号)
数组反向 ：reverse()
sort(callback)
6.1.2 字符串String ：new String() 语法糖（字面量） “”
查：charAt() substring(startlndex,endindex) substr(startindex,length)
replace(模板， “替换字符串”） replace(模板，callback)
search(正则）返回正则表达式匹配的字符串下标，如果没有返回值-1
match(正则）返回正则匹配的字符串
split(模板)字符串转数组
6.2 无序集合：对象 Object ：new Object {}
构造方法 键值对构成 ：对象.键名
对象[键名]
转换： JSON.parse(json字符串) ==》对象，数组
JSON.stringfy(对象/数组) ==》 json字符串
json字符串构成 ‘{“键”：值，“键2”：值}’
键：字符串，用双引号
值：数字，字符串（双引号），布尔值，数组，对象，函数
二、DOM
DOM树 ：节点 ：
元素节点，nodeType1 :获取：document.getElementByID
Element.querySelector(选择器）
document.querElementsByName
Element.querySelectorAll(选择器)
Element.getElementByTagName(“标签名”)
Element,getElementsByClassName(类型名)
子节点 childNodes
第一个子节点 firstChild
最后一个子节点 lastChild
上一个节点对象 previousSibling 下一个节点对象nextSibling
父级节点元素 parentNode 定位父级 offsetParent
.innerHTML:拼接结构，拼接复制后是一组DOM结构，注意事件绑定顺序
获取第一个子级元素falstElementChild
获取最后一个子级元素lastElementChild
创建：documentcraetElement() 添加appendChild()
字符串拼接+innerHTML
删除 removeChild()
克隆cloneNode(boll) ,true:带内容复制， false :只复制节点
性能 ：节点集合不是一个数组，长度用变量保存
将集合转数组 A仍然有.prototype.slice.call(boxes)

文本节点， 3
属性节点，2
注释节点，8
根节点 document ，9
三、动画
1、：定时器 ：setinterval(function(),频率）
setTimeout(function(),频率）
requestAnimationFrame() >停止 cancelAnimationFrame
区别：1、频率不同
2、兼容性不一样
3、停止方式不一样
4、性能不一样
5、暂停过程不一样
2、样式获取与操作：getComputedStyle()
currentStyle()
尺寸值： 整个盒子 offsetWidth / offsetHeight
边框以内 clientWidth / clientHeight
定位数属性 offsetLeft /Top
border clientLeft / Top
scollTop / Left
浏览器可视尺寸 ：document.documentElement.clientWidth
document.documentElement.clientHeight
文档尺寸：document.documentElement.offsetWidth
document.documentElement.offsetHeight
样式设置：element.style.样式（驼峰）
四、交互》事件 ：
1、事件本身 ：
事件绑定 ：行间 on属性，普通函数调用
DOM对象属性绑定 DOM对象.on事件 = function(){},同一类型事件一次只能绑一个 取消：DOM对象.on事件 = null
事件侦听器 ：addEventListener(类型，functio\7](){p},falst) 删除：removeEventListener
IE: attachEvent(类型，function(){}) 删除：detachEvent()
attachEvent内部的this指向windon
2、事件流：捕获阶段 ：从DOM树往下找
目标阶段 :查看是否有事件处理函数
事件冒泡阶段(传播阶段) ：事件从目标节点开始一层一层往回反，知道顶级节点结束
3、事件对象 e:事件处理函数被调用，自动传入事件处理函数的，需要用一个形参变量接受一下
属性方法，用来对事件的过程进行配置，监控
事件冒泡阻止：e.stopPropagation()
e.cancelBubble = true
e.stoplmmdiatePropagation():阻止事件冒泡并阻止当前层其他事件
禁用系统事件 return false , e.preventDefault() , e.returnValue = false
4、事件委托：e.target.id parente.target.id
5、各种事件类型 :系统 window.onload ,
window.onresize
DOMContentLoaded(文档加载完)
onhashchange
鼠标类：e e.clientX e.clientY
e.pageX e.pageY
e.screenx e.screenY
没有冒泡：mouseenter mouseleave
键盘类 ：e .key .keyCode .ctrlKey .altKey shiftKey .metaKey,win键
onleypress 只显示数字，字母编码
表单类 ： focus blur input change
移动端：ontouchstart ’ ontouchend ontouchmove e.touches数组，存放触点坐标
滚轮：兼容处理 ：火狐FF e.detail 非火狐 ：e.wheelDelta
五、JS内置函数，内置对象 ：
1、 定时器
2、 Math : random
ceil()向上取整
floor()向下取整
cos() sin() tan()
max()最大值 min()最小值
sqrt()开平方
pow()平方，次幂
3、 消息函数 ：console.log() alert() confirm() prompt()
4、 时间对象 new Date() 获取时间戳 getTime() getMonth(0-11)
getDay() getHour() getMinites() getSeconds()
设置的边界问题 ：set如果越界，将会跨到下一月，下一年，同时当前的日期对象也会会修改
5、可变参数数组对象 arguments
6、JSON对象
六、BOM ：window : localStorage 永久存储，键值对字符串 sessionStorage 会话打开时
location, :href:读取URL,设置url跳转 传参 url? name = “aa”
hash : 读取URL中的锚点标识，设置URL中的锚点标识，onhashchange = function(){}
document ,:DOM
history ,:go(跳到指定历史记录页面) back(返回上个历史页面) forward(前进到下一个历史界面)
localstorage,
navigation ：userAgent 客户信息
七、正则表达式
1、声明方式 new RegExp(参数1，参数2)
语法糖，字符模板，修饰
字符模板：字符串： . ,\d , \ D ,\w , \W , \s ,\S…
量词：X{n} X{n,m} …
修饰：i:单次匹配 g:全局匹配
操作方法：正则表达式对象 text(字符串) bool
exce(字符串) 匹配到字符串，g:多次执行
字符串：search ，match:返回所有匹配到的字符串 replace split
元字符
八、JS.OPP
js面向对象 ：js对象的创建：字面量{}
new 构造方法（）
构造出一个个对象 ： 属性 函数内部变量
方法 函数内部方法
JS对象的原型：1、JS对象是由原型拷贝生成的
2、特点，JS对象可以使用原型的方法和属性
3、由构造方法创建的对象 其原型 构造方法.prototype
4、实现方法的继承，原型继承
原型链
：概念：JS中所有的对象都是由一个原型拷贝自身而产生，原型本身也是一个对象，原型对象的生成也是由它原型对象拷贝而来，这样就形成了一条拷贝链，我们把这条拷贝链叫原型链，对象在调用方法时，首先会在自己的原型链上查找，如果没有，就去其他原型链上查找，拥有该方法，并且距离对象最近的原型，会优先调用
3条原型链：
null object.prototype 构造方法.prototype new 构造方法（）
________________________Function.prototype function对象
——————— —————EventTarger Node Element HTMLElement HTMLDivElement
三大特征 ：封装：代码的复用上，属性==》变量，方法==》功能
***** 继承：原型继承 son.prototype = new Father() this指向会变
构造方法继承 :function Son(){
Father.call(this，参数)} 无法继承父类的原型方法
多态:不同的对象，执行相同的方法，执行结果不同
使用场景：消除分支语句
this的指向问题 call、apply Function.prototpype
两组 参数call（对象，参数列表）:参数列表
apply （对象，[参数列表]） 数组 ：将Fn内部的this指向传入的对象
应用：1、 可以借用其他对象方法 借用数组方法 Array.prototype.slice.call(对象)
2、回调方法中的this,保持回调方法中的this指向
this:总是指向一个对象 对象内部的this，指向对象
new构造方法（）中的this，创建出的对象
window 普通函数调用
this指向传入的对象 call / apply
this丢失：回调函数，
函数作为返回值调用时
将对象的方法，赋值给一个变量，该变量在调用时会造成this指向丢失
九：设计模式
1、工厂模式：管理封装好的对象
2、代理模式：保护性代理
虚拟代理 代理对象，委托对象 代理对象创建（委托对象）
代理对像.调用方式（）{预处理
委托对象.方法（） }
3、单例 闭包形成单例 ：
4、 策略模式： 策略组：一般是一组对象
var ce = {“aa”:function(){this.getValue = function(){} },
“bb”:function(){this.getValue = function(){} } }
驱动组：函数 function M(type){
var obj = new celtype;
obj,getValue() }**