数组去重
1.Set去重
2.for循环，splice去重
3.for循环，indexOf去重
4.for循环，includes去重
5.利用filter去重
insertBefore
功能:将目标节点添加至参照节点之前
参数:dom.insertBefore(目标节点,参照节点)
console.log("heihei");
滚动条高度的读写
浏览器的兼容性
滚动条高度的兼容写法
var sTop = document.body.scrollTop || document.documentElement.scrollTop
事件相关的三要素
事件元素 : 触发事件的元素
事件类型 : 事件触发的类型onclick ondblclick onmouseover
事件对象 : 携带着相关类型事件的属性和方法
只有鼠标事件对象和键盘事件对象
事件对象的兼容写法
document.onclick = function(evt) {
var e = evt || event
鼠标事件对象 坐标相关属性
page:针对于整个页面的左顶点 常用
console.log(e.pageX + "," + e.pageY);
client:针对于可视窗口的左顶点 不常用
console.log(e.clientX + "," + e.clientY);
offset:针对于父元素的左顶点 用于拖拽
console.log(e.offsetX + "," + e.offsetY);
元素在页面移动的本质就是在改变它的left和top
事件流
事件流:当某个元素执行某种事件时， 该事件会向父元素传递或向子元素传递
事件流传递的方向:
冒泡:由子元素向父元素传递
onfocus onblur onload不会产生冒泡问题
捕获:由父元素向子元素传递
阻止冒泡s
在事件传播的子元素上，通过事件对象调用函数
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true
阻止浏览器的默认行为
e.preventDefault ? e.preventDefault() : e.returnValue = false
键盘事件
注意事项:通常情况下键盘事件的事件源都是document
键盘弹起的时刻触发 document.onkeyup
键盘按下的时刻触发 document.onkeydown
生成一个字符的时刻触发 document.onkeypress
键盘事件对象
获取键盘按下的字符的ASC码值
兼容写法
var key = e.keyCode || e.which || e.charCode;
console.log(key, String.fromCharCode(key));
48 "0"
97 "a"
65 "A"
32 空格
13 回车
10 ctrl+回车
ctrlKey判断ctrl是否被按下
事件绑定的方式
1.通过HTML元素直接绑定
2.通过js对象绑定
以上两种绑定方式不能完成一些功能:
（1）.不能为相同的元素多次绑定相同的事件
（2）.无法决定事件流的传递是冒泡还是捕获
3.事件监听
好处
（1）.可以为相同的元素多次绑定相同的事件
（2）.可以决定事件流的传递是冒泡还是捕获
事件元素.addEventListener("去掉on的事件类型","事件体回调函数",["捕获还是冒泡"]);
默认不写或flase为冒泡,true捕获
当捕获和冒泡同时存在于一个元素时，先捕获后冒泡
事件绑定的取消
解绑的核心思想就是去掉原来绑定的函数对象
1.js方式的解绑
oBtn.onclick = null;
2.事件监听的解绑
document.removeEventListener("click", fun);
事件委托
委托:自己事情让别人干
委托的本质是依赖于事件冒泡
好处1：
场景1:
批量绑定若干子元素的事件,可以大大提高程序绑定事件的效率
委托中，被被点击的元素不是this this是父元素
target被操作的真实元素
var target = e.target || e.srcElement;
tagName操作元素的名字，且为大写
console.log(target.tagName);
好处2：
场景:为未来添加的子元素提前绑定事件
拖拽
拖拽相关的事件
onmousedown box
onmousemove document
onmouseup document
onmousedown包含move和up
也就是说down了之后，才绑定了move和up事件
可视窗口的高,可视窗口的宽
console.log(innerWidth, innerHeight);
正则的概念
字符串正确的规则
作用
前端往往有大量数据效验工作，正则对象可以控制字符串的格式，从而境地服务器压力，
提高程序运行效率
正则表达式验证数据格式 前端
服务器验证数值 后端
JS的正则表达式通常都围绕着表单验证
正则对象的创建
a.构造方法
var reg = new RegExp("格式字符串",["修饰符"]);
test
功能:判断目标字符串是否满足正则对象的格式
参数:test(目标字符串)
返回值:boolean
b.字面量
var reg = /格式字符串/修饰符;
正则的格式字符串
格式字符串:普通字符+特殊字符
普通字符:普通的字符，看起来是什么就是什么
特殊字符:拥有特殊含义的字符
a.单个字符
b.组合字符
c.各种括号
至少包含一个a
var reg = /a/
至少包含连续的5个a
reg = /aaaaa/
同时存在，同时消失
^:正则开始
$:正则结束
只能包含一个a
reg = /^a$/
只能包含3个a
reg = /^aaa$/
以b开头 至少3个a 至多5个a
reg = /^ba{3,5}$/
6个5
reg = /^5{6}$/
邮编 6位数字
reg = /^\d{6}$/
定义一个由字母或数字或下划线组成的用户名 范围在6,18之间
reg = /^\w{6,18}$/
定义一个由字母或数字或下划线组成的用户名 但是首字母不为数字
reg = /^\D\w{5,17}$/
定义一个密码 至少6位
reg = /^.{6,}$/
www.baidu.com
reg = /^www.baidu.com$/
写一个3+5
+:{1,}
reg = /^3+5$/
以 13 或 15 开头的手机号
或的表示方法
a. (xxx|xxx|xxx)
reg = /^1(3|5)\d{9}$/
b.[x1x2x3x4]
reg = /^1[35]\d{9}$/
只能是a-f和0-6的区间
reg = /^[a-f][0-6]$/
空格
reg = /^\s$/
[\u4e00-\u9fa5] 中文字符区间
两个中文
reg = /^[\u4e00-\u9fa5]{2}$/
除了
[^x1x2x3]
reg = /^[^abc]$/
密码强弱的判断
由数字，字母，其他字符构成
纯数字，纯字母,纯其他字符为弱
全都有为强
其他情况为中
至少包含
var regNum = /\d+/;
var regChar = /[a-zA-Z]+/;
var regLetter = /[!@#$%]/;
只能
var _regNum = /^\d+$/;
var _regChar = /^[a-zA-Z]+$/;
var _regLetter = /^[!@#$%]$/;
表单验证
action:发送数据的地址，也就是服务器接收数据的文件
method:数据提交的方式，与安全性和效率有关,get和post,默认为get
get:安全性低，但效率高，携带数据量小
post:安全性高，但效率低，携带数据量大
焦点验证表单
失去焦点 onblur
聚焦 onfocus
正则相关的方法
test
功能:判断目标字符串是否满足正则对象的格式
参数:test(目标字符串)
返回值:boolean
exec
功能:返回满足正则对象的子串
参数:exec(目标字符串)
返回值:满足正则对象的子串，存储在长度为1的数组
修饰符
g:全局
i:忽略大小写
字符串相关方法，正则对象作为参数
search方法 返回与正则表达式查找内容匹配的第一个子字符串的位置
用法:str.search(reg)
match
功能:返回满足正则的子串，存储在数组中
参数:match(正则对象)
返回值:满足正则的子串数组
replace
replace(参数1正则对象,参数2):用参数2,替换参数1,返回被替换的字符串
let
let:用来定义变量的关键字
特点:
1.要求变量必须先定义后使用，不能声明提升
2.不能重复定义变量
3.块级作用域（变量在该作用域中不会丢失）
4.暂时性死区(当内部变量与外部变量同名时，内部变量屏蔽外部变量)
const
const:定义只读变量的关键字(创建有名的常量)
特点:
1.被const修饰的变量为只读变量
2.被const修饰的变量必须初始化（赋初值）
3.不能声明提升，必须先定义后使用
4.不能重复定义
5.块级作用域
6.暂时性死区
面试题:var,let,const的异同?
1.都是用来定义变量的关键字
2.var具备声明提升
3.let,const必须先定义后使用,不具备声明提升，不能重复定义变量
块级作用域，暂时性死区
4.const修饰的变量为只读变量，且必须初始化
this与bind
this:函数体内的内置对象,作用域只能在函数体内使用
1.与事件体连用:代表触发该事件的元素本身
2.与普通方法连用(除了事件体和构造方法),调用该方法的对象本身
bind:函数对象的一个方法,作用就是用来改变该函数的this指向,主要修饰匿名函数的this
bind(被修改的this指向)
json和字符串的相互转换
字符串->json对象
注意事项:使用以下转换方法的json对象和字符串,key必须用双引号引起来
JSON.parse(str)
json对象->字符串
JSON.stringify
for...in和for...of
for...in
通常用来遍历json对象,因为遍历的是下标
for(let 索引 in json对象){}
for...of
针对于没有下标的容器，进行遍历
for(let 元素数值 of 容器){}
字符串扩展方法
判断字符串是否包含在另一个字符串中
在ES5 中使用的是 indexOf() 方法，在ES6中可以使用includes()、startsWith()、endsWith()三个方法。
str.includes(参数): 返回布尔值，表示是否找到了参数字符串。
str.startsWith(参数)：返回布尔值，参数是否在源字符串的头部。
str.endsWith(参数)： 返回布尔值，参数是否在源字符串的尾部。
打印中文的问题
unicode
中文解析默认是utf-16
0~65535
超过65535的汉字，中文和编码的读取方式
中文
console.log('\u{21c56}');
打印该汉字对应的编码
console.log(str1.codePointAt(0));
箭头函数:匿名函数的一种写法
let fun = a => a * 2;
console.log(fun(20));
特点:
1.如果只有一个参数,可以省略圆括号
2.如果函数体只有一条语句，则可以省略花括号
3.如果函数体只有一条语句,则自带return
解构赋值
1.解析结构进行赋值
a.数组
b.json对象
2.交换两个变量的值
[a, b] = [b, a];
console.log(a, b);
set集合
set:集合,没有下标,自动去重
let set = new Set(数组);
add(参数) 向集合中添加一个元素
delete(值) 删除集合中某个数
has(值) 判断集合中是否含有某个值
clear() 清空集合
数组去重
let arr = [1,"heihei",1,2,2,3,4,4,5,5,1,"heihei"];
let set = new Set(arr);
通过Array.from(集合):将集合转化为数组
arr = Array.from(set);
console.log(arr);
map
map:键值对的容器,映射
key1=value1,key2=value2...
set(key,value) 向集合中添加一个元素:key以存在，则为改，不存在则为增
get(键) 根据键去取值
delete(键) 删除集合中某个数
has(键) 判断集合中是否含有某个值
clear() 清空集合
ES6的字符串模板
''和""不支持换行
反引号支持换行，常用于页面的拼接
被``包含的字符序列也是字符串
ES6字符串模板中出现变量必须用${变量}
oUl.innerHTML += `<li>${i}</li>`
ES5新增的迭代函数
遍历分为两步
1.循环
2.循环中执行相应功能
数组迭代函数:帮我们把循环实现了，我们只需要写功能
forEach
功能:遍历数组
参数:arr.forEach(回调函数)
回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])
返回值:无
map
功能:遍历数组
参数:arr.map(回调函数)
回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])
返回值:在回调函数添加return,返回一个新数组
filter
功能:过滤,根据回调函数返回的布尔值，决定元素是否被存入新的数组
参数arr.filter(回调函数)
回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])
返回值:根据回调函数返回的布尔值，决定元素是否被存入新的数组
匀速运动
运动原理:
通过定时器改变元素的left或者top(width,heigth)
1.先清空定时器，避免运动混乱
clearInterval(time)
2.计算速度,叠加位移(宽高)
let speed = target>obj.offsetLeft?5:-5
obj.style.left = obj.offsetLeft + speed + "px"
3.达到条件终止定时器
缓冲运动
核心算法：
let speed = (target - obj.offsetTop) / 10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
