一、事件的取消
- 如果你使用的是elem.onclick=()=>{}，取消就用elem.onclick=null
- 如果你使用elem.addEventListener("事件名",回调函数)，取消就用elem.removeEventListener("事件名",回调函数)，事件名和回调函数，必须和添加时的一模一样。
<script>
// 取消绑定事件方法一
/* // btn1绑定点击事件
btn1.onclick = function () {
console.log(1);
}
// 点击btn2的时候取消btn1的点击事件
btn2.onclick = function () {
btn1.onclick = null
} */
// 取消绑定事件方法二
//给btn1绑定点击事件
btn1.addEventListener('click',f1)
btn1.addEventListener('click',f2)
// 点击btn2的时候取消btn1的点击事件
btn2.onclick = function () {
btn1.removeEventListener('click',f1)
}
function f1() {
console.log(11);
}
function f2() {
console.log(22);
}
</script>
二、this的指向
- 单个元素绑定事件this->这个元素
- 多个元素绑定事件this->当前元素
- 箭头函数中的this->外部对象
- 函数中的this->当前正在调用函数的这个人
- 定时器的this->window
<script>
// this的指向
function f1(){
console.log(this);
}
f1();//Window
setInterval(function(){
console.log(this);//Window
},1000)
var th={
"name":"田浩",
}
var ljm={
"name":"刘金明",
}
Object.prototype.zwjs=function(){
return "我的名字叫"+this.name
}
console.log(th.zwjs())
console.log(ljm.zwjs())
</script>
三、ES5强制改变this指向
- call/apply：临时的替换了函数的this - 借用。相当于立刻调用函数，立即执行的。
语法：- 函数名.call(借用的对象,实参,...); - 单独传入每个实参
- 函数名.apply(借用的对象,arr); - 只能传入一个实参要求是一个数组，apply其实会悄悄的打散数组
- bind：永久替换了函数中的this - 买
- 创建了一个和原函数功能完全相同的新函数
- 将新函数的this永久绑定为了指定对象，别人都借不走
- 将新函数的部分参数永久固定
- 语法：
var 新函数=函数名.bind(永久对象,永久实参,...); - 不是立刻执行，需要自己调用 bind绑定的新函数没办法被call/apply再次借走
<script>
// 改变this的指向
function calc(base, bonus1, bonus2) {
console.log(this);
return this.name + "的总工资为:" + (base + bonus1 + bonus2);
}
var th = {
"name": "张三",
}
var ljm = {
"name": "李四",
}
console.log(th.name);//张三
console.log(calc());//Window
// call
console.log(calc.call(th,100,100,100));
console.log(calc.call(ljm,100,100,200));
// apply
console.log(calc.apply(th,[100,100,100]));
console.log(calc.apply(ljm,[100,400,100]));
// bind
var th_calc = calc.bind(th)
console.log(th_calc(500,55,555));
</script>
- 数组获取最大值或最小值
Math.max/min.apply(Math,arr)
- 判断x是不是数组 - 绝对不能使用typeof:只能判断原始/标准类型,不能判断引用类型
Object.prototype.toString.call/apply(x)==="[object Array]";
- 类数组转为普通数组
- 接住=Array.prototype.slice.call/apply(类数组对象)
- 接住=Array.from(类数组对象)
<script>
// 1.数组获取最大值或最小值
var arr = [1,22,3,44,6,23,4,55]
console.log(Math.max.apply(Math,arr));//55
// 2.判断x是不是数组 - 绝对不能使用typeof:只能判断原始/标准类型,不能判断引用类型
var str = '1111'
console.log(Object.prototype.toString.call(arr) == '[object Array]');//true
console.log(Object.prototype.toString.call(str) == '[object Array]');//false
// 3.类数组转为普通数组
var lis = document.querySelectorAll('li')
console.log(Array.prototype.slice.apply(lis));
lis = Array.from(lis)
console.log(lis);
</script>
四、ES6
- 模板字符串：可以直接识别变量，不再需要+运算去拼接了，而且实现了一个简答的js环境，甚至支持再里面书写API
<script>
var price = 5
var count = 3
console.log(`单格为:${price};数量为:${count};总价为:${price*count}`);
</script>
- 解构赋值：解析结构再进行赋值 - 赋值的新方式，并且得到了增强
语法：
- 类似数组的解构赋值： let [a,b,c]=[1,2,3];
let [a,b,c] = [1,2,3]
console.log(a,b,c)//1 2 3
- 类似对象的解构赋值： let {a,b=默认值,c}={c:3,a:1,b:2};//形参可以设置默认值，如果自己传入了，就用自己的
let {name,age,gender} = {name:'张三',age:18,gender:'男'}
console.log(name)//张三
console.log(age)//18
console.log(gender)//男
- 调用函数时，传递实参的顺序无所谓了
function getSalary({n1,n2,n3}) {
return `总薪资为：${n1}+${n2}+${n3}`
}
console.log(getSalary({n2:2000,n1:5000,n3:9000}))
- 函数的返回的结果，可以有多个
function getArr() {
var a = 1
var b = 2
return [a,b]
}
var [a,b] = getArr()
console.log(a,b)//1 2
五、Set和Map新的数据类型
Set：类似于数组的一种数据格式 - 【去重数组，然后再转回数组】
- var s=new Set(arr);
- ...s - 三个点扩展运算符，可以脱掉数组的外套
var arr = [1,2,3,4,5,1,2,3,4,5]
var s = new Set(arr)
console.log(s);//{1, 2, 3, 4, 5}
console.log(...s);//1 2 3 4 5
console.log([...s]);//[1, 2, 3, 4, 5]
- Map：类似于对象的一种数据格式
- var m=new Map();
- 添加：m.set("键","值");
- 获取：m.get("键");
- 清空：m.clear();
- 删除：m.delete("键");
var m = new Map()
m.set('name','张三')
console.log(m);//{'name' => '张三'}
六、for..of循环
for(var v of arr){
v;//值
}
只能遍历索引数组，不能遍历hash数组，意味着也不能遍历对象
<script>
var arr = [1,2,3,4,5,8,8,9,55]
for (var v of arr) {
console.log(v)//v拿到的是数组的每一项
}
</script>
