【Day9】ES6 增加内容（变量，解构，模板字符串）

日期：1月27日夜

 1.变量： let 和 const 类似于 es5 中的var

        let 特点

                   1. 不允许重复声明变量

                   2. 具有块级作用域（存在局部变量）

                      {}  if while for...

                   3. 不存在变量提升 

                  4. 不影响作用域链【dom】

         const 特点

                   1. 不允许重复声明

                   2、定义的值不允许被修改的  const 修饰的变量是常量

                   3、 不存在变量提升

                  4. 存在块级作用域

let 和const 区别

            let 修饰变量

            const 修饰是常量

             const 修饰的常量 必须有初始值 否则报错

             const 修饰简单数据类型 表示  值不能发生改变

                      修饰复杂数据类型 表示  地址不能发生改变  但是 值可以被改变

2.解构赋值

           数组的结构：  数组的索引和变量的索引一一匹配

           对象的结构 ： 对象的key和变量名 一一匹配

                                  原型上的属性和函数可以被结构

           字符串的结构：字符串数组的解构

        对象解构函数时： 需要注意  函数中this 的指向

案例1：数组解构

const arr = ['上元教育',,'上元会计']
       // 数组中的元素 一个一个拿出来
       const [a1,a2,a3] = arr;

       console.log(a1,a2,a3); // '上元教育',undefined,'上元会计'

案例2：数组解构

const stu = {
            name : "小蔡",
            age : 25,
            hobby : "学习",
            say : function(){
                console.log("正在说话");
            }
        }
        const {name,age,hobby,say} = stu;
        console.log(name);
        console.log(say);
        say()

案例3：静态函数解构

const {abs} = Math;  //解构内置对象的静态函数
       console.log(abs(-1));
       console.log("--------------");

案例4：原型解构

function Person (){
            
        }
        Person.prototype.name = "小张"
        Person.prototype.a = function(){
            console.log("这是人类");
        }
        const stu = new Person()
        stu.a()
        console.log(stu.name);

案例4：字符串解构

const str = "我爱学习web";

       // console.dir(new String(str));
       // 将字符串中的元素 一一解构出来 
       const [b1,,b3,b4,b5,b6,b7] = str
       console.log(b1,b3,b4,b5,b6,b7);

3.模板字符串

        支持换行

             字符串支持解析 js代码  ${js代码|变量|常量|函数}

        字符串定义的方式

             ""   ''    ``

案例： 字符串

var title = "上元教育"

        const {random} = Math

        const arr = ['北京','上海','深圳']
        const obj = {
            name:"小明",
            age:18
        }

        const str = `
            <ul>
                <li>${title}</li>
                <li>${1+1}</li>
                <li>${myFun("xxx")}</li>
                <li>${Math.random()}</li>
                <li>${random()}</li>
                <li>${arr[1]}</li>
                <li>${obj.name}</li>
            </ul>`

            console.log(str);

        function myFun(a) {
            return a;
        }

总结：本章节，let和const，解构以及字符串符号都是需要很好掌握的