取消事件绑定
绑定事件的三种方式
方式一:在HTML绑定
<elem on事件名=函数名()></elem>
方式二:事件处理函数
elem.on事件名=function(){}
//取消事件绑定
elem.on事件名=null;
方式三:事件API
elem.addEventListener("事件名",function(){})
//取消事件绑定
function goTo(){
open("https://www.baidu.com");
btn.removeEventListener("click",goTo)
}
btn.addEventListener("click",goTo);
this的指向
- 单个元素绑定事件:this--->该元素
- 多个元素绑定事件:this--->当前触发事件的元素
- 箭头函数:this--->外部对象(外部非箭头函数)
- 函数:this--->当前正在调用这个函数的人
- 定时器:this--->window
ES5强制改变this的指向
临时替换函数中的的this(call/apply)
this---->借用该函数的对象
call
函数名.call(借用的对象,实参,...)
//实参需要依次单个传入
apply
函数名.apply(借用的对象,arr)
//第二个参数只能传入数组,apply会悄悄将数组打散
永久替换函数中的this(bind)
let 新函数名=函数名.bind(永久对象,永久实参,...)
特点:
- 创建了一个和原函数功能完全相同的新函数
- 将新函数的this永久绑定为了指定对象
- 可以将新函数的部分参数永久固定
- bind绑定的新函数没办法再被call/apply借走
三个固定使用场景
-
数组求最大(小)值
Math.max/min.apply(Math,arr) //新方法 Math.max/min(...arr) //...展开数组和对象 -
判断数组
Object.prototype.toString.call/apply(xxx)=="[object Array]" //新方法 Array.isArray(xxx) -
类数组对象转为索引数组
let arr=Array.prototype.slice.call/apply(类数组对象); //新方法 let arr=Array.from(类数组对象)
ES6新增
let
const关键字
箭头函数
模版字符串``
可以直接识别变量,不再需要+运算去拼接,实现了一个简单的JS环境,支持在里面做运算写API
`${变量/API}中文`
解构赋值
如果赋值符号=左右两边的结构一样,就会悄悄解开结构再一一进行赋值
类似数组的解构赋值
let [a,b,c]=[1,2,3]
//赋值一一对应
类似对象的解构赋值
let {a,b=0,c}={b:4,a:6,c:7}
函数传参时的解构赋值
function zwjs({name,age=18,hobby}){
操作
}
zwjs({name:"刘思棋",hobby:"玩"})
函数返回的结果可以有多个
function f1(){
return [a,b,c];
}
for of循环
for(let val of 数组名){}
//val---->值
缺点:
- 没有提供下标,意味不能修改原数组
- 只能遍历索引数组,不能遍历hash数组,意味着也不能遍历对象
Set
类似于数组的一种数据格式
作用:去重数组
[...new Set(arr)]
Map
类似于对象的一种数据格式
let m=new Map();
//添加属性
m.set("键","值")
//获取属性
m.get("键")
//删除属性
m.delete("键")
//清空
m.clear()
//遍历
m.forEach(function(){})