2020-09-12---周总结

day1 event（上）

一、什么是事件对象？（黑匣子，行车记录仪，监控）

当绑定事件的对象在触发条件时，发生的信息保存在一个地方，这个地方叫做事件对象。

二、如何获取事件对象？

标准浏览器 ： 事件处理程序
IE：window.event
兼容：event || window.event

事件对象的应用

1.如何获取鼠标的编码值

（1）event.button

	左键	滚轮	右键
标准	0	1	2
IE	1	4	2

（2）which（IE9以下不支持）

左 ：1；滚轮：2；右：3

2.如何获取鼠标的坐标值

（1）鼠标的相对坐标值（相对鼠标所在的对象的坐标值）

event.offsetX
event.offsetY

（2）鼠标的绝对坐标值（相对于body的坐标值）

IE9以下不支持

event.pageX
event.pageY

//兼容
event.pageX = event.clientX + Math.floor(document.body.scrollLeft || document.document.documentElement.scrollLeft)

event.pageY = event.clientY + Math.floor(document.body.scrollTop || document.documentElement.scrollTop)

（3）鼠标的可视区坐标值

event.clientX
event.clientY

（4）鼠标的屏幕坐标值

event.screenX
event.screenY

3.如何获取键盘的编码值

（1）onkeydown / onkeyup

event.keyCode : 监听整个键盘，如果是字母区，只获取大写的编码值

（2）onkeypress

兼容：var code = event.keyCode || event.charCode || event.which
监听编辑区，如果是字母区，或区分大小写

4.如何实现（快捷）键

event.ctrlKey
event.altKey
event.shiftKey

5.阻止事件冒泡的兼容

标准浏览器 ： event.stopPropagation()
IE : event.stopBubble = true;
兼容 ：event.stopPropagation() ? event.stopPropagation() : event.cancleBubble = true

day2 event （下）

一、浏览器默认行为及阻止

1.右键菜单

事件 ：oncontextmenu
阻止 ：return false（既阻止默认行为，也阻止事件冒泡）

2.超链接

//标准浏览器
event.preventDefault()
//IE
event.returnValue = false;

//兼容
var o_a = document.getElementsByTagName('a')[0];
o_a.onclick = functoin(evt){
	var e = evt || window.event;
	e.preventDefault() ? e.preventDefault() : e.returnValue = false;
}

3.拖拽的默认行为

//取消拖拽的默认行为
document.ondragstart = function(){
	return  false;
}

二、事件监听器（可以绑定多个函数在一个对象上）

//标准浏览器
元素对象.addEventListener(事件，函数，布尔值)
//第一个参数：事件（不带on）
//第二个参数：事件处理函数
//第三个参数：是否进行捕获（默认是冒泡：false）
o_btn.addEventListener('click',fn1,false);
o_btn.addEventListener('click',fn2,false);
o_btn.addEventListener('click',fn3,false);

//IE浏览器
元素对象.attachEvent(事件驱动，函数)
//第一个参数：事件驱动（带on）
//第二个参数：事件处理函数
o_btn.attachEvent('onclick',fn1);
o_btn.attachEvent('onclick',fn2);
o_btn.attachEvent('onclick',fn3);

//兼容
//添加
function addEventListener(obj,event,fn,boo){
	//初始化参数
	boo = boo || false;
	if(obj.addEventListener){
		obj.addEventListener(event,fn,boo);
	}else if(obj.attachEvent){
		obj.attachEvent('on' + event ,fn);
	}
}

//移除
function removeEventListener(obj,event,fn,boo){
	//初始化参数
	boo = boo || false；
	if(obj.remomveEventListener){
		obj.removeEventListener(event,fn,foo);
	}else if(obj.detachevent){
		obj.detachEvent('on' + event ,fn);
	}
}

三、事件委托

1.事件委托：

将添加到多个子节点上的事件，我们添加到它们对的父节点上。相当事件委托它的父亲。

2.好处：

（1）提高性能

（2）可以给动态添加的子元素添加事件

3.事件委托的本质

是利用了事件冒泡的原理。

四、拖拽

1.思想

鼠标按下
	求鼠标的相对坐标值
	移动事件
		盒子的坐标值 = 鼠标的绝对坐标值 - 鼠标的相对坐标值
	鼠标弹起
		取消移动事件

2.伪代码

对象.onmousedown = function(){
	相对坐标值X = 事件对象.offsetX；
	相对坐标值Y = 事件对象.offsetY;
	对象.onmousemove = function(){
		对象.style.left = 事件对象.pageX - 相对坐标值X + 'px';
		对象.style.top = 事件对象.pageY - 相对坐标值Y + 'px';
	}
	对象.onmouseup = function(){
		对象.onmousemove = null;
	}
}

3.代码实现

function drag(){
	var ele = document.querySlector(selector);
	ele.onmousedown = functionevt(){
		var e = evt || window.event;
		var disX = e.offsetX;
		var disY = e.offsetY;
		document.onmousemove = function(evt){
			var e = evt || window.event;
			ele.style.left = e.pageX - disX + 'PX';
			ele.style.top = e.pageY - disY + 'px';
		}
		document.onmouseup = function(){
			document.onmousemove = null;
		}
		//取消鼠标的拖拽行为
		document。ondragstart = function(){
			return false;
		}
	}
}

五、滚动事件

• 火狐 ：DOMMouseScroll event.detail +向下 -向上 3
• 非火狐：onmousewhell event.wheelDelta +线上 -向下 120

day3 正则表达式

一、什么是正则表达式

匹配字符串的一组规则。

二、如何声明正则表达式

1.字面量

/正则表达式/标志位

2.构造函数

new RegExp（‘正则表达式’，‘标志位’）

三、正则的方法

1.正则表达式.test（字符串）

判断字符串中是否包含了正则表达式，如果有，返回true，否则，返回false

2.正则表达式.exec（字符串）

返回数组

字符串处理正则的方法：

1.字符串.match（正则表达式）：

返回数组

2.字符串.search（正则表达式）：

查询正则匹配的字符串在父串中第一次出现的下标位置，没有匹配，返回-1

3.字符串.replace（）：

替换

exec 与 match 的区别

//无g无组的情况  返回第一次匹配到的字符
	var str = 'how do you do';
	var re = /do/;
	console.log(re.exec(str));  //['do']
	console.log(str.match(re));  //['do']

//有g无组的情况
	var str = 'how do you do';
	var re = /do/g
	//exec不受g的影响，依然返回第一次匹配到的字符
	console.log(re.exec(str));  //['do']
	//match将返回所有匹配到的字符
	console,log(str.maatch(re));  //['do','do']

//无g有组的情况 都返回数组，数组中的第一个元素是整个正则匹配的内容。其它元素是由组匹配的内容
	var str = 'abc 123,abc 123';
	var re = /([a-z]+) (\d+)/;
	console.log(re.exec(str));  //['abc 123','abc','123']
	console.log(str.match(re));  // ['abc 123','abc','123']

//有g有组的情况
	var str = 'abc 123,abc 123';
	var re = /([a-z]+) ([\d]+)/g;
	//exec,不受g的影响，返回数组，第一个元素是整个正则匹配的内容，其它元素是由组匹配到的内容
	console.log(re.exec(str));  //['abc 123','abc','123']
	//match将返回所有匹配到的父级（整个正则匹配的内容）
	console.log(str.match(re)); //['abc 123','abc 123']
	

总结：

• exec不受g的影响，如果没有组，则只获取第一次匹配到的内容。如果有组，则获取一个父级，多个子级。
• match
  1. 没g没组：只获取一个匹配的内容
  2. 有g没组：获取所有匹配的内容
  3. 有g没组：获取一个父级，多个子级
  4. 有g有组：获取多个父级

四、正则的元字符

{} [] ()

{}:限制{}前面的一个或一组字符连续出现的次数

• {m} ：限制{}前面的一个或一组字符连续出现m次
• {m,}：限制{}前面的一个或一组字符连续出现m至无限次
• {m,n}：限制{}前面的一个或一组字符连续出现m至n次

var o_txt = document.querySelector('input');
//失焦事件 + 正则表达式 === 表单验证
o_txt.onblur = function(){
	//获取输入的内容
	var str = this.value;
	//定义一个正则表达式
	var re = /^金{3}$/;
	if(re.test(str)){
		close();
	}
}

[] : 表示范围

/^[abc]{3,}$/ : 表示字符串必须是至少3位的 a~c中的字符
/^[a-z]$/i 相当于 /^[a-zA-Z]$/
[0-9]
[\u4e00 - \u9fa5]  : 中文

var o_txt = document.querySelector('input');
//失焦事件 + 正则表达式 === 表单验证
o_txt.onblur = function(){
	//获取输入框的内容
	var str = this.value;
	//定义一个正则表达式
	var re = /^金{3,}$/;
	if(re.test(str)){
		close();
	}
}

() : 表示组

* + ? 限制前面的一个或一组字符串连续出现的次数

* ：限制前面的一个或一组字符连续出现 0 至 无限 次

+ ：限制前面的一个或一组字符连续出现 1 至 无限 次

？: 限制前面的一个或一组字符连续出现 0 至 1 次

^ $

^

1. 放到正则表达式的开头：表示断头，限制字符串开头必须为什么
2. 放到[]的开头：表示取反

$

表示断尾限制字符串必须以什么结尾

. | \

. : 模糊匹配任意一个字符

| ： 或者

\ : 转义符

• \d : 表示数字[0-9]
• \D : 表示非数字 [^ 0-9]
• \w : 表示字母、数字、下划线[a-zA-Z0-9_]
• \W：表示非（字母、数字、下划线）
• \s : 空白
• \S：非空白
• \b : 单词边界
• \B：非边界

五、标志位 i & g

1. i ：表示不区分大小写
2. g：表示全局匹配

• 邮政编码检测 ：/^\d{6}$/
• 手机号检测：/^1(2|3|4|5|7|8|9)\d{9}$/
• 身份证检测：/ ^ [1-9]\d{5}[1-9]\d{3}(0[1-9]|1[0-2])(0[1-9]|(1|2)\d|3[01])\d{3}(\d|x|X)$/

day4 ES6（上）

一、严格模式

“use strict”；注：写在作用域开头
影响：

1. 声明变量必须使用关键字
2. 函数的参数不能重复使用
3. 函数中的参数的改变不影响arguments中的值
4. 取消了arguments中的callee方法
5. 取消了with解析对象
6. 新增关键字 eval arguments
7. 取消了八进制

二、修改上下文this指向

• 默认：this指向当前所在作用域（function/script）所绑定的对象（当前函数被谁调用了，this就代表谁）
• 函数的方法

1. bind（对象，参数1，参数2，……）返回函数
2. call（对象，参数1，参数2，……）返回对象
3. apply（对象，数组|arguments） 返回对象

三、JSON方法

[]
{}
JSON.parse() : 将严格额json格式的字符串解析为对象
JSON.stringify() : 将对象转为JSON字符串

四、新增关键字 let & const

1.let ：用户声明变量，取代var

1. 声明变量，必须先声明，后使用。变量不再做提升
2. 在同一个作用域中，不重复声明一个变量
3. 声明的全局变量不再是window的属性
4. 产生了块级作用域（for循环本身是一个块级作用域，循环体又是for下面的一个子级快作用域）

2.const ：声明常量

注：一次声明，不能重新赋值（栈中的值不能变，堆中的数据可变）（基本数据类型的值不能变。复合数据类型的存储的数据可变，地址不能变）

五、变量的解构赋值

解构（分解结构）
保持赋值号两边格式一致
数组的解构赋值 [] = []
对象的解构赋值 {} = {}
好处:

1. 交换数据
2. 函数的形参可以赋默认值
3. 函数的参数可以不按照顺序传递
4. 函数的返回值可以一次返回多个函数

六、字符串扩展方法

1.includes（字符串，start）

返回布尔值，判断是否包含，从start开始向右找

2.startWith（字符串，start）

返回布尔值，判断是否在字符串的开头，从start开始向右找

3.endWith（字符串，start）

返回布尔值，判断是否在字符串的结尾，从start开始向左找

let str = 'how do you do';
console.log(str.includes('do',4)); //true
console.log(str.startWith('do',4)); //true
console.log(str.endWith('do',4)); //false

4.repeat(n) ：重复字符串

注：

1. 如果n是小数，则取整数重复
2. 如果n是非数字类型，则转为数字，如果不能转，转为NaN，按0重复
3. 如果n <= -1 ，报错

5.模板字符串 ：替换 +（连接）

· ${变量} ·

七、箭头函数

（）=>{}
特点：

1. 箭头函数中没有this指向
2. 不能创建构造函数，也不能new
3. 如果返回对象，在外面包裹小括号
4. 建议在回调函数中使用！

八、Symbol：ES6新增的一种基本数据类型！可以确保变量中的值是惟一的

• 基本数据类型：number string boolearn null undefined symbol
• 复合数据类型：object

九、set 构造函数（重复）

1.如何创建set对象？

let set - new Set();
let set = new Set([1,4,2,2,3,1,1,1,3,4]);

2.属性

size：获取长度

3.方法：

（1）add（）：添加元素

（2）has（）：判断一个元素是否在set中

（3）delete（）：删除一个元素

（4）clear（）：清空set对象

4.遍历set对象

forEach((value,key,set) => {})
keys();
values();
entries();
for of 循环
for(变量 of set){}

let set = new Set();
set.add(1).add(2).add(3).add(4).add(5);
console.log(set);

//遍历set
set.forEach((value,key,set) => {
	console.log('value:'+value + 'key:'+ key + 'set:' +set );
})

//for of key
for(let key of set.keys()){
     console.log('key:' + key);
     }
     
//for of value
for(let value of set.values()){
     console.log('value:' + value);
}

//for of key value
 for(let [key,value] of set.entries()){
    console.log('key:' + key,'value' + value);
}

day 5 ES6（下）

十 Map 构造函数

1.创建map对象

 let map = new Map();

        let map = new Map([
            [1,1],
            ['1',2],
            [true,3],
            [[],4],
            [{},5]
        ]);

2.属性

size：长度

3.方法

set() : 添加map属性
        get() : 获取属性
        has() : 判断是存在指定的属性,返回布尔值
        delete() : 删除属性
        clear() : 清空map

4.遍历map

forEach((value,key,map)=>{})

        keys() : 获取所有key
        values() : 获取所有value
        entries() : 获取所有的key和value

        for of


        let map = new Map();
        console.log(map);
        map.set(1,1).set(2,2).set(3,true).set(4,false).set(true,7);
        // map.clear();
        // console.log(map);
        // console.log(map.get(true));
        // console.log(map.delete(4));
        // console.log(map.has(4));

        //forEach
        map.forEach((value,key,map)=>{
            console.log(value,key,map);
        })

        //key
        for(let key of map.keys()){
            console.log('key:' + key);
        }
        //value
        for(let value of map.values()){
            console.log('value:' + value);
        }
        //key value
        for(let [key,value] of map.entries()){
            console.log('key:' + key,"value:" + value);
        }

十一、生成器函数 ： ES6提出的异步编程解决方案

1. 同步：按步骤依次执行
2. 异步：同时进行

function * fn(){
        yield 'how';
        yield 'are';
        yield 'you';
        return '?';
    }

    let fun = fn();
    console.log(fun.next());  //{value : how ,done : false}  false : 表示后面还有语句待执行. true:表示结束
    console.log(fun.next());
    console.log(fun.next());
    console.log(fun.next());
    console.log(fun.next());
    console.log(fun.next());
    console.log(fun.next());

十二、class 类

class 类名{
	constructor([参数]){
		//属性
		this.属性 = 值；
	}
	方法名([参数]){
		……
	}
}

extends：继承 父类拥有的属性和方法，继承后，子类将拥有

class 子类名 extends 父类名{
	constroctor([参数]){
		super([参数]);
		this.属性 = 值；
	}
	方法名([参数]){
		……
	}
}