day31（Es6新特性）this，json与字符串相互转换，箭头函数，综合案例，解构赋值，字符串新增方法

let

特点

let是定义变量的关键字,与var的作用相同
    let a = 123;
    console.log(a);
特点：
    1.必须先定义后使用
    2.不能重复定义
    3.块级作用域，被let修饰的变量，在该作用域下，变量不会丢失，也不能在该作用域外使用
            {   
        let a = 123;
    }
    console.log(a);
    var oLis = document.querySelectorAll("li");

    for(let i=0; i<oLis.length; i++){
        oLis[i].onclick = function(){
            console.log(i);
        }
    }
    console.log(i);
    4.暂时性死区:当内部变量与外部变量同名时，内部变量屏蔽外部变量（暂时性死区（TDZ：Temporal Dead Zone）：实际上，在块作用域开始的时候，let所声明的变量已经存在，但是他不允许被访问，直到该变量的声明语句出现，从块作用域开始到该变量声明语句间的区域被称为暂时性死区）
    let a = 123;
    {
        let a = 456;
        console.log(a);
    }
    console.log(a);

const

特点

1.被 const 修饰的变量称为只读变量（对于数组等容器来讲主要在于不能
	用重新赋值的办法来改变其内容，也即不能改变或产生新的地址）（无
	论是内置基本类型还是引用类型，const 修饰的是栈空间存储的内
	容）
2.必须初始化
3.必须先定义后使用
4.不能重复定义
5.块级作用域
6.暂时性死区

软性规则：习惯上只读变量名大写

注意点一

const arr = [6,4,7,3,8];
    arr[1] = 6666;--------------以const定义数组arr，此处修改他
    	的第一个元素的数值是可以的，并不会报错，因为const修饰的是
    	引用类型存储在栈空间的地址，而不是它存储在堆空间的数据本
    	身，当我们直接去改变数据本身是可以改变的
    arr = [6,7,8];----------------------这里的修改则会报错，因
    	为直接赋值去掉数组元素是改变了栈空间中堆空间数据存放的地
    	址，而栈空间的内容正是被const所修饰，而无法改变的（但此处
    	使用api则可以在不报错的情况下修改数组元素及其数值，因为
    	api是在原数组的基础上进行修改，并不会产生新的地址）
	console.log(arr);

注意点二

var,let,const的异同?

    1.都是用来定义变量的关键字
    2.var自带声明提升
    3.const修饰只读变量且必须初始化（只修饰存储在栈空间的内容）
    4.let和const的共同点：
        必须先定义后使用，
        不能重复定义，
        块级作用域，
        暂时性死区。

this

this:函数体内的内置对象（只能在函数体内使用）

与事件体连用

与事件体连用->代表触发该事件的元素本身
   document.onclick = function(){
        console.log(this);
    }

    var oInput = document.querySelector("input");
    oInput.onblur = function(){
        console.log(this.value);
    }

与普通方法连用（除了事件体及构造方法）

与普通函数连用(除了事件体以及构造方法)->调用该普通函数的对象
function fun(){
        console.log(this);
    }

    window.fun();

    let json = {
        a:123,
        fun:function(){
            console.log(this);
        }
    }

    json.fun();

bind

作用 参数 以及 代码演示

作用：修改事件体内this的指向，bind是函数对象的一个函数
参数：函数对象.bind(希望this指向的目标元素)
代码展示：
     let fun = function(){

    }
fun.bind()--->        function(){
                                
                            }.bind() 
                            
案例：
style：
     #box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
html：
    <div id="box"></div>
script：
    let oBox = document.querySelector("#box");
    document.onclick = function(){
        this.style.display = "none";
    }.bind(oBox);

json对象和字符串的相互转换

字符串转json对象

将json格式字符串转换为JSON对象通常我们称之为JSON的反序列化
语法：JSON.parse(json格式字符串)----------常用（转成的json对象通过返回值带回）
    let str = '{"name":"laowang","age":18}';
    let json = JSON.parse(str);
    console.log(json.name,json.age);

json对象转字符串

将json对象转化为json格式字符串形式通常我们称之为JSON的序列化
语法：JSON.stringify(json对象)（转成的json对象形式的字符串通过返回值带回）
    let json = {"name":"laowang","age":18};
    let str = JSON.stringify(json);
    console.log(str);

for。。。in 与 for。。。of

for…in

功能：遍历下标或json的key，常用于遍历json对象（也可以用来遍历数组等，但是如果数组对象的原型链上添加了自定义属性，需要通过hasOwnProperty()判断属性是否属于数组本身，forin的特性就是会吧原型链上的自定义属性一起遍历）
语法:for(let 索引 in 容器){
       循环体内的索引:a.数组是下标 b.json就是key
    }
 let json = {
        "name":"老王",
        "age":18
    }
for(let index in json){
        console.log(json[index]);
    }

for…of

功能：遍历元素内容（注意事项:不能遍历json）
    常用于遍历没有下标的容器-------------set（集合），map（映射）
    let arr = [6,5,7,"heihei",8,9,3];

    for(let item of arr){
        console.log(item);
    }

箭头函数

特点以及代码演示

箭头函数:匿名函数的另一种写法
    let f = function(){
        console.log("f");
    }
    let f = ()=>{
        console.log("f");
    }
    f();
    document.onclick = ()=>{
        console.log("haha");
    }
特点:
    1.当箭头函数只有一个参数时，可以省略参数的()
    let f = a=>{
        console.log(a+5);
    }
    f(8);

    2.当函数体只有一条语句时,可以省略{}
    let f = a=> console.log(a+5);
    f(8);

    3.当函数体只有一条语句时,则自带return
    let f = a => a + 13;
    console.log(f(10));
关于this：
    箭头函数的this问题--->代表箭头函数父元素的前缀/父元素的this指向（箭头函数没有this指向，如果上下文存在函数，会继承上下文函数的this指向，如果上下文没有函数，则继承全局变量的前缀，也即window）
    document.onclick = ()=>{
        console.log(this);-----------------此处this代表的不是document，而是window，因为函数document的父元素前缀是window
    }
    
    let stu = {
        "name":"凢凢",
        "show":()=>{
            console.log(this);
        }
    }

    stu.show();----------------被调用时，函数show里面的this代表的是window，是函数show所在的父元素stu的前缀window

综合案例：五星好评

代码演示

style：
    * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 27px;
            height: 27px;
            background: url(img/star.gif) no-repeat top center;
            float: left;
        }    
html：
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
script：
    var hbs = document.getElementsByTagName("div");
    for (let i = 0; i < hbs.length; i++) {
        hbs[i].onmouseover = function () {
            for (let j = 0; j < hbs.length; j++) {
                if (j <= i) {
                    hbs[j].style.backgroundPosition = "bottom center";
                } else {
                    hbs[j].style.backgroundPosition = "";
                }
            }
        }
        hbs[i].onclick = function () {
            for (let h = 0; h < hbs.length; h++) {
                if (h <= i) {
                    hbs[h].style.backgroundPosition = "bottom center";
                } else {
                    hbs[h].style.backgroundPosition = "";
                }
                hbs[h].onmouseover = null;--------------点击事件之后，所有的星星需要循环解绑划入事件
            }
        }
    }

解构赋值

解构赋值:解析结构进行赋值
    1.定义变量时批量赋值
        a.数组方式赋值
            let x,y;
            x = 1;
            y = 2;
            let [x,y] = [1,2];
            console.log(x,y);
        b.json对象方式赋值--->可以去掉json访问属性时的前缀：let {key1，key2} = json对象；
        
            上下文环境：在访问json对象的属性时，可能出现很长的前缀，比如：xxx.xxx.xxx.xxx.xxx.name
            let stu = {
                "name":"马浩奇",
                "age":18
            }
        
            let {name,age} = stu;
        
            console.log(name,age);
    2.交换两个变量的值
    let x,y;
    x = 123;
    y = 456;

    [x,y] = [y,x];

    console.log(x,y);-------------此时X,Y原本的赋值已经被交换，x = 456，y = 123；
    补充：无参交换
    var a = 1,b = 2;
        a = a + b;
        b = a - b;
        a = a - b;
        console.log(a,b)---------------此时a，b值发生交换

字符串新增方法

includes

功能：判断字符串是否包含目标字符串
参数：字符串.includes("目标字符串")
	let str = "hello world.js";
	console.log(str.includes("yingying"));

startsWith

功能：判断字符串是否以目标字符串作为开头
参数：字符串.startsWith("目标字符串")
	let str = "hello world.js";
	console.log(str.startsWith("el"));

endsWith

功能：判断字符串是否以目标字符串作为结尾（常用来判断文档后缀名，来判断文档类型）
参数：字符串.endsWith("目标字符串")
	let str = "hello world.js";
	console.log(str.endsWith(".js"));