[JavaScript知识库]【Day9】ES6 增加内容（函数默认值，rest箭头函数this）

日期：1月28日夜

1.函数参数赋值默认值

????????function fn(a=默认值,b=默认值,...) {}

????????参数中可以进行结构的匹配

????????数组的解构

????????对象的解构

2.rest 可变参数

????????在es5 中arguments

????????????????arguments 伪数组，需要注意的是伪数组不具有数组的属性和方法

????????在es6中rest

????????????????rest 是一个真数组，存储所有的实际参数

使用rest 参数的注意事项

????????1. 每个函数中 最多能存在一个rest 参数

????????2、 rest参数只能放在普通参数的后面

?rest 参数 ?...变量就是rest参数 （也叫称为延展）

? ? ? ? ... 用于数组上 [a,b,c] 将数组的中括号去掉 ?a,b,c

? ? ? ? ... 用于对象上 {a:x,b:x,c:x} 将对象的大括号去掉 ?a:x,b:x,c:x

? ? ? ? ... 可以将伪数组转为真是数组 ?例如 arguments 转为真实数组

? ? ? ? ... 用于数组/对象 适用场景

? ? ? ? ? ?合并数组或者是合并对象

案例：

let arr = ["上元教育","上元it","上元会计"]  //数组

        console.log(...arr);

        let obj = {                 //对象
            name:"小明",
            age:18,
            gender:"男"
        }
        console.log({...obj});

        console.log("-------------------------------");
        let arr01 = ["上元教育","上元it","上元会计"]   // 数组的合并
        let arr02 = ["北京","上海","广州"]
        const arr03 = [...arr01,...arr02]
        console.log(arr03);
        
        const arr04 = [...arr01,...arr02,"小明","小红"]
        console.log(arr04);
        console.log("-------------------------------");

        let obj01 = {
            name:"小明",
            age:18,
            gender:"男"
        }

        let obj02 = {
            name:"小红",
            address:"苏州市"
        }
        // 将两个对象合并
        const obj03 =  {...obj01,...obj02}
        console.log(obj03);
        const obj04 =  {...obj01,...obj02,id:1001}
        console.log(obj04);
        console.log("-------------------------------");
        const arr05 =  [50,30,80,60,20,70]
        console.log(arr05.getMax()); // 80   //getmax 是封装在数组上实列函数
        console.log(arr05.getMin()); // 20
        console.log("-------------------------------");
        // ... 将伪数组转为真实数组 
        function myFun() {

            console.dir(arguments);
            // ... 将伪数组转为真实数组 
            console.dir([...arguments]);

        }
        
        myFun(1,2,3)

3.箭头函数

箭头函数： 箭头函数就是匿名函数

????????定义函数方式：

? ? ? ? ? ? 方式一： 声明式

? ? ? ? ? ? ? ? function myFunction() {? } ?myFunction 函数名字

? ? ? ? ? ? 方式二： 表达式 （箭头函数只能用表达式）

? ? ? ? ? ? ? ?let myFunction = function() {? } myFunction变量名 ?用于接受后面的变量名

? ? ? ? ?箭头函数定义: 只能使用表达式

? ? ? ? ?1.语法：

? ? ? ? ? ? () ?=> { 函数体 }? ?（可以理解成 function换成?=> ，并放到括号后面）

? ? ? ? ?2.箭头函数可以简写

? ? ? ? ? ?2.1 如果函数体只有一行 可以省略掉函数体的{}

? ? ? ? ? ?2.2 如果函数的形式参数只有一个 可以省略掉包括形参的()

? ? ? ? ? ?2.3 如果函数体只有一行 并且这一行还是包含return的返回值 ?可以省略掉return

? ? ? ? ? ? ? ?以及函数体的{}

? ? ? ? ?3.箭头函数的注意事项

? ? ? ? ? ? 3.1 箭头函数不可以new 箭头函数无法创建对象?

? ? ? ? ? ? 3.2 箭头函数没有arguments 我们要使用可变参数 只能用 ...rest

? ? ? ? ? ? 3.3 箭头函数自身没有this ?箭头函数的this指向上一级的this

? ? ? ? ?函数分类：

? ? ? ? ? ? 1. 无参数无返回值

? ? ? ? ? ? 2、有参无返回值

? ? ? ? ? ? 3、 无参有返回值

? ? ? ? ? ? 4. 有参有返回值

4.this的指向问题? （重点）

? this的指向：

? ? ? ? ? ? 任意函数都有this关键字? ? （箭头函数自身没有this，箭头函数的this指向上一级的this）

? ? ? ? ? ? 默认情况下 this 指向函数的调用者

? ? ? ? ? bind 改变this的指向

? ? ? ? ? ? ?每个函数都有一个bind函数 ?bind函数的第一个参数就表示 真实的this指向

? ? ? ? ? ? ?当这个函数调用这个bind 会返回一个新的函数

? ? ? ? ? bind(参数1，参数2...参数n)

? ? ? ? ? ? 参数1 this的实际指向

? ? ? ? ? ? 参数2- 参数n ?原函数 形参所对应的实参

? ? ? ? ?es 5 中改变this的指向 ?可以使用bind

案例1：

function func01() {
            console.log(this);
        }

        func01()      //此时this指向的是windows
        
        const obj = {
            name:"obj",
            func02:function() {
                console.log(this);
            }  
        }

        obj.func02()      //此时this指向的是obj

案例2：

const stu = {
           name:"小明",
           age:18,
           gender:"男",
           say:function() {
               // this 指向stu
               console.log(this.name+"在说话.....");
           }
       }

       const {say} = stu;
        say.bind(stu)()
       say()

案例3：

 const obj03 = {
            name:"小明"
        }

        const obj04 =  {
            name:"小红",
            func04:function(a,b) {
                console.log(this,a,b);
            }
        }

      //  obj04.func04(10,20)

       // obj04.func04.bind(obj03)(10,20)  上下两种方法皆可
        obj04.func04.bind(obj03,10,20)()

总结：本章节的难度在于 this的指向问题，需要多加练习