[JavaScript知识库]【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，解构以及字符串符号都是需要很好掌握的