JavaScript第14天

1、事件的取消绑定

        1、如果使用elem.οnclick=()=>{}，那么elem.οnclick=null

        2、如果使用elem.addEventListener("事件名",回调函数);那么：elem.removeEventListener("事件名",回调函数);—事件名和回调函数必须和添加时一模一样

2、this的指向：

        1、单个元素绑定事件this—>这个元素

        2、多个事件绑定元素this—>当前元素

        3、箭头函数中的this—>外部对象

        4、函数中的this—>当前正在调用函数的这个人

        5、定时器的this—>window

3、ES5强制改变this的指向

        1、call/apply：临时的替换函数的this—借用

                语法：函数名.call（借用的对象，实参，...）；—单独传入每个参数

                        函数名.apply（借用的对象，arr）；—只能传入一个实参要求是一个数组，apply会悄悄打散数组

                强调：call/apply：相当与立刻调用函数，立即执行

        2、bind：永久替换函数中的this—买

                3件事：

                        1、创建一个和原函数功能完全相同的新函数

                        2、将新函数的this永久绑定为了指定对象，别人借不走

                        3、将新函数的部分参数永久固定

                        语法：

                                var 新函数=函数名.bind（永久对象，永久参数，...）；—不是立刻执行，需要自己调用

                        强调：bind绑定的新函数没办法被call/apply再次借走

                        三个固定套路：

                                1、Math.max/min.apply(max,arr);—也能支持数组参数

                                2、Object.prototype.toString.call/apply(x);—判断xx是不是一个数组

                                3、类数组转为普通数组

                                        1、接住=Array.prototype.slice.cll/apply(类数组对象)

                                        2、接住=Array.from(类数组对象)

4、ES6

        1、let  const关键字、箭头函数

        2、模板字符串：可以直接识别变量，不需要+运算去拼接，而且实现一个简答js环境，支持在里面书写API

<script>
    consloe.log(`我的名字叫${name}`);
</script>

        3、解构赋值：

                1、概念：解析结构在进行赋值—赋值的新方式，并且得到了增强

                2、如果赋值符号，左右两边的结构一样，就会悄悄地解开/脱掉结构在一 一进行赋值

                3、语法：

                        1、类似数组的解构赋值

<script>
    let [a,b,c]=[1,2,3];
    console.log(a);
    console.log(b);
    console.log(c);
</script>

                        2、类似对象的解构赋值

<script>
    let {a,b=默认值,c}={a:1,c:2,b:3};
    console.log(a);
    console.log(b);
    console.log(c);
</script>

                        3、调用函数，船体实参的顺序无所谓

<script>
    function f({name,age,hobby}){
        return  `我的名字脚${name}，今年${age}岁，喜欢${hoby}`

    }
    console.log(f({hobby:"偷看漫画数",age:"15",name:"小明"}));
</script>

                        4、函数的返回结果，可以有多个

 

<script>
function f(){
    let a=1;
    let b=2;
    return [a,b];
}
let [a,b]=f();
console.log(a,b);
</script>

                                只要以后见到：方法名（{里面当着键值对就是使用了ES6的解构赋值}）

4、Set和Map新的数据类型：

        1、Set：类似于数组的一种数据格式—[去重数组，然后在转回原数组]

<script>
    let s=new Set(arr);
</script>

                 ...s  — 三个点扩展运算符，可以脱掉数组的外套

                一句话完成：[...new Set(arr)];

        2、Map：类似于对象的一种数据格式

                语法：

<Script>
    let m=new Map();
</Script>

                添加:m.set("键","值");

                获取:m.get("键");

                清空:m.clear();

                删除:m.delete("键");

5、新的循环

        语法：

<Script>
    for(let v of arr){
        v;
    }
</Script>

        缺陷：

                1、没有提供下标，意味着不能修改原数组

                2、只能遍历索引数组，不能遍历hash数组，意味着也不能修改遍历对象