2020.11.21 ES6--11 解构赋值 ES6新增字符串的简易声明（反引号） 对象声明的简化 箭头函数 传参时可以赋初始值

ES 6–11

解构赋值

定义：允许按照一定模式从数组和对象中提取变量，并对变量进行赋值

类型一：数组类型的解构赋值

  //类型一：数组类型
        const Name = ['邓柱', '灯珠', '灯柱'];
        //定义四个变量分别对应数组中的值
        let [a, b, c] = Name;
        console.log(a);
        console.log(b);
        console.log(c);

类型二：对象类型的解构赋值

    //类型二：对象的解构
        const zhao = {
            name: '赵本山',
            xiaopin: function() {
                console.log('我会小品');
            }
        }
        let {
            name, //将name等从 zhao中解出来 就可以直接用了，定义了一个变量等于zhao中的name;
            xiaopin
        } = zhao;
        console.log(name); //不需要写 zhao.name
        console.log(xiaopin);

、、、、
、、、、、
、、、、、
、、、、、

ES6新增字符串的简易声明

用反引号声明

   let str = `邓柱无敌啦`; //反引号

特性：内容之间可以出现换行符；//字符串可以拼接 : ${ 字符变量 }；

//特性：内容之间可以出现换行符
        let string =
            `邓柱
            又
            行啦`;

        console.log(string);


        //字符串可以拼接 :  ${ 字符变量 }；
        let string2 = `${str} 这是好的`
        console.log(string2);

、、、、、、
、、、、、
、、、、、
、、、、、、
、、、、、、

对象声明的简化：可以直接在{}内书写变量和函数，作为对象的属性和方法；

//对象声明的简化
        //可以直接在{}内书写变量和函数，作为对象的属性和方法；
        let change = function() {
            alert('邓柱在改变');
        }
        let duixiang = {
            a, //调用了前面定义的变量a
            change, //直接调用方法函数
            //新的方法创建
            improve() {
                alert(str);
            }

        }

箭头函数

箭头函数的定义

        //箭头函数
        //箭头函数的定义：
        let fn = (a, b) => {
                return a + b;
            }
            //省掉了function

箭头函数的特性

箭头函数的特性 一: 箭头函数中的this是静态的 始终指向函数声明时的this的值

   // call 可以改变函数内部的属性name值

特性二：不能作为构造函数去实例化对象

特性三：当 传入参数只有一个时 小括号（）可以省略；当函数内部的代码只有一句时 ，{}可以省略。

如：

箭头函数的应用

一、

在设置 setTimeout时 如果用常规方法不能用this来指代点击的地方
因为 setTimeout 中的 this 指向的是全局作用域
如果用剪头表达式就可以 因为 箭头表达式中的this是静态的不会改变；
、、、、、、
二、
array.filter()方法：括号内为数组中的数满足什么条件的能被返回

        const arr = [1, 3, 4, 5, 6, 12];
        let result = arr.filter(function(item) {
            if (item < 6) {
                return true;
            } else {
                return false;
            }
        });
        console.log(result);

通过箭头函数可以更加简便的书写：

let result = arr.filter(item => item < 6);

、、、、、、、、
、、、、、、、、
、、、、、、、、、
、、、、、、、、、、
、、、、、、、
、、、、、、、、、

传参时可以赋初始值

 function add(a, b, c = 10) {
            return a + b + c;
        }
        add(1, 2, 10);

传参赋初始值和解构赋值的连用

在传参时 将传入的对象参数解构赋值，并且还可以添加新的属性dislike ='girl’

//在传参时 将传入的对象参数解构赋值，并且还可以添加新的属性dislike ='girl';
        function person({
            dislike = 'girl',
            name,
            age,
            hobby
        }) {
            alert(name +
                age +
                hobby +
                dislike);
        }

        //在调用person
        person({
            name: '邓柱',
            age: '19',
            hobby: 'processing'

        });