ES6笔记————let，箭头函数，剩余参数

一.let,var,const区别

let

关键字用来声明块级变量。

-- 特点就是在{}声明具有块级作用域，var变量无此特点。

-- 防止循环变量编程全局变量。

-- let 关键词无变量提升。

-- let 关键词有暂时性死区的特点。{先声明后使用}

const

声明常量，常量就是值（内存地址）不能变化的量。

对象的本身是可变的，所以可以添加属性，但是地址不可改变

区别

使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

- 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

- 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

**- 使用let，const的声明的变量不属性顶层对象，返回undefined**。

二，解构

**1 **数组解构

let [x, y, ...z] = ['a'];

x // "a"

y // undefined

z // []

let[a,...c] = [1,2,3];//合并运算符可以展开数组也可合并数组

console.log(c);//[2, 3]

console.log(...c);//2 3

let [x,y='2'] = ['a',undefined];

console.log(y);//如果没有定义，可以用默认值

说明：ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

2对象解构

根据key解构

let person = {name:"小帅",age:18};

let {name,age,height} = person;

console.log(name);//小帅

console.log(age);//18

console.log(height);//undefined

说明：对象的解构与数组有一个重要的不同。数组的元素是按顺序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则解构失败就是undefined。

let { realname: myname,height=173 } = { realname: '张三', age: 18};

console.log(Myname);//张三

console.log(Myage)//18

console.log(realname)//realname is not defined

console.log(height)//当属性没有的时候支持默认值

说明：对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

**.3 **字符串解构

let [a,b,c] = "hello";

console.log(a);//h

console.log(b);//e

console.log(c);//l

三，箭头函数

**1 **基础语法

//原js写法

function myFun(k,v){

    return k + v;

}

//es6 写法

const myFun1 = (k,v) => {

    return k+v;

}

**2 **省略写法

如果形参或者代码块只有一句可以简写：

Const myFun = (k) => {return k+1;} 简写：

Const myFun = k => k +1;

*3 对象方法里的this*

如果函数作为对象的方法调用，this指向的是这个上级对象，即调用方法的对象。

const person = {

                       name:"张三",

                       age:18,

                       say:function(){

                              console.log(this.name);// 张三 这时候的this是person的对象

                       }

}

person.say();

4 apply/call调用时的this

myfun1();//对象是Windows

myfun1.call(person1);//对象改变为person1

说明：两者的区别，myfun.call(person,18,29); myfun.apply(person,[18,29]);

*5 箭头函数中this*

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

箭头函数中的this指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。

const obj = { name: '张三'}

             function fn () {

                     console.log(this);//this 指向 是obj对象

                     return () => {

                             console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象

                     }

             }

           

const resFn = fn.call(obj); //{ name: '张三'}

resFn();//{ name: '张三'}

一：全局作用域下this指向
            1:普通函数
            function global(){
                console.log(this);//window
            }
            global();
            2：箭头函数
            const global = ()=>{
                console.log(this);//window
            }
            global();
            
            
            二：对象里面的this指向
            1:普通函数
            const Person = {realname:"张三",age:19,
               say:function(){
                   console.log(this.realname);//当前的对象 "张三"
               }
            }
            Person.say();
            
            2:箭头函数
            const Person = {realname:"张三",age:19,
               say:()=>{
                   console.log(this);//window
               }
            }
            Person.say();
            
            三：构造函数的this指向
            1:普通函数
            
            function  Person(realname,age){
                this.realname = realname;
                this.age = age;
                this.say = function(){
                    console.log(this);
                }
            }
            const P1 = new Person("张三",19);
            P1.say();
            
            const P2 = new Person("李四",19);
            P2.say.call(P1);//原来李四，现在是张三 call和apply改变this指向，区别传输参数的区别
            
            
            2:箭头函数
            
            function  Person(realname,age){
                this.realname = realname;
                this.age = age;
                this.say = ()=>{
                    console.log(this);
                }
            }
            const P1 = new Person("张三",19); 
            P1.say();

            const P2 = new Person("李四",19);
            P2.say.call(P1);//不能改变箭头函数的this指向
            
            
            总结：普通函数与箭头函数this的区别
            1：普通的函数this与调用者有关，调用者是谁就是谁;
            2：箭头函数的this与当时定义的上下文的this有关，this是静态的一旦定义了就无法改变
            

**8 **箭头函数应用

练习1：单击按钮2s后改变按钮文字：按钮被点击，在单击按钮改变文字：点击被取消。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 点击按钮   2s后显示：文字被点击，在点击出现文字：点击被取消。 -->
<!-- （附加：点击10次后提示“今日点击次数已上限，按钮变成灰色”） -->

<body>
    <button>点击</button>
    <script>
        let bth = document.querySelector("button")
        let flag = false
        let num=0
        bth.addEventListener("click", function () {
            flag = !flag
            num++
            if(num>10){   
                this.innerHTML="今日点击次数已上限"
                this.disabled=true
                this.style.backgroundColor="grey"
                return false
            }
            time1=setTimeout(() => { 
                if (flag) {
                    // console.log(this);
                    this.innerHTML="文字被点击"
                }
                else{
                    this.innerHTML="点击被取消"
                }
            }, 100);

        })
    </script>
</body>

</html>

四，剩余函数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数。

1:rest参数
            function demo(...nums){
                console.log(nums);//数组
                console.log(...nums);//解构数组
            }
            demo(1,2,3);
            
            2:rest参数 对象
            function connect({username,...info}){
                console.log(username);
                console.log(info);
            }
            connect(
               {username:"root",password:"123456",port:"3306"}
            )
            
            3:输出数组
            const arr = [1,2,3];
            console.log(...arr);
            
            4:合并两个数组
            const arr1 = [1,2,3];
            const arr2 = [4,5,6];
            console.log([...arr1,...arr2]);
            
            
            5:将类数组转为数组
            const liNode = document.querySelectorAll("li");
            console.log(typeof [...liNode]);
            
            const arr1 =  [1,2,3];
            const arr2 =  [...arr1];//复制数组
            arr1[0] = 10;
            console.log(arr2);
            
            
            6:剩余参数必须放入最后(rest参数) 不然报错
            function demo(a,b,...nums){
                console.log(nums);//数组
            }
            demo(1,2,3,4,5);