ES6基础

var 和 let 的区别
var 只是声明一个变量，可以是局部也可以是全局
let 只是局部变量，没有变量提升，没有预处理机制
暂时性死区 
    只要块级作用域存在let命令，它所声明的变量就绑定在这个区域，不再受外部影响
    
let 不允许重复声明 模块内部不允许，各模块之间可以

块级作用域
ES5只有全局作用域和函数作用域
第一种场景 内层变量会覆盖外层变量
    var time = new Date()
    function fun() {
        console.log(time) // 未定义
        if (false) {
            var time = '2020'
        }
    }
    fun()  
    这种情况就是time 会优先选择模块内部的变量来使用
    
第二种场景 变量使用完，并没有及时释放内存，提升为全局变量
    var string = "hello world";
    for(var i=0;i<string.length;i++){
        console.log(string[i]);
    }
    console.log('finished')
    console.log(i)  //i=12,i并没有释放
    
    
ES6就新增了块级作用域 是let自己生成的
    function fun() {
        let num = 200;
        if(true){
            let num = 300;
        }
        console.log(num);
    }
    fun() //打印出200 如果是var 就打印出

const 生成的常量
const也存在块级作用域 也有暂时性死区 也不可重复声明

const 声明的对象和数组  都是只读

const对象冻结
    const obj = Object.freeze()
    obj.name = 'xx';
    obj.age = 30;
    console.log(obj.name);  // undefined
    console.log(obj.age);   //undefined
    console.log(obj);     //Object
    
    
    第二种
    const obj = Object.freeze({
        obj.name:'xx',
        obj.age:30;
    })
   
    console.log(obj.name);  // xx
    console.log(obj.age);   //30
    console.log(obj);     //Object

立即执行函数
(function () {}() )

ES6的结构赋值
    数组解构：
        let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
        let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3
        let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]
        let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3
        let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2
    
    对象解构：
        let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
        let obj = {d: 'aaaa', e: {f: 'bbbb'}}
        let {d, e:{f}} = obj // 嵌套解构 d='aaaa' f='bbbb'
        let g;
        (g = {g: 'aaaa'}) // 以声明变量解构 g='aaaa'
        let [h, i, j, k] = 'nice' // 字符串解构 h='n' i='i' j='c' k='e'
    
    变量赋值ES5
        var data = {userName: 'aaaa', password: 123456}
        var userName = data.userName
        var password = data.password
        console.log(userName)
        console.log(password)
        var data1 = ['aaaa', 123456]
        var userName1 = data1[0]
        var password1 = data1[1]
        console.log(userName1)
        console.log(password1)
     
    变量赋值ES6
        const {userName, password} = {userName: 'aaaa', password: 123456}
        console.log(userName)
        console.log(password)
        const [userName1, password1] = ['aaaa', 123456]
        console.log(userName1)
        console.log(password1)
        
    函数参数的定义
        一般我们在定义函数的时候，如果函数有多个参数时，在es5语法中函数调用时参数必须一一对应，否则就会出现赋值错误的情况，来看一个例子：需要一一对应，这样就会极易出现参数顺序传错的情况，从而导致bug
        
        ES5:
        function personInfo(name, age, address, gender) {
          console.log(name, age, address, gender)
        }
        personInfo('xy', 18, 'heze', 'man')
        
        ES6:
        function personInfo({name, age, address, gender}) {
          console.log(name, age, address, gender)
        }
        personInfo({gender: 'man', address: 'heze', name: 'xy', age: 18})
        
        
    交换变量的值
    
        ES5：
        var a=1, b=2, c
        c = a
        a = b
        b = c
        console.log(a, b)
        
        ES6：
        let a=1, b=2;
        [b, a] = [a, b]
        console.log(a, b)
        
        
    函数的默认参数
        ES5
        function saveInfo(name, age, address, gender) {
          name = name || 'xy'
          age = age || 18
          address = address || 'heze'
          gender = gender || 'man'
          console.log(name, age, address, gender)
        }
        saveInfo()
        
        ES6
        function saveInfo({name= 'xy', age= 18, address= 'heze', gender= 'man'} = {}) {
          console.log(name, age, address, gender)
        }
        saveInfo()
        
    字符串的结构赋值
        和数组一样，因此也有length属性
        const [a,b,c,d,e] = 'HELLO';
        console.log(a); //H
        console.log(b); //E
        console.log(c); //L
        console.log(d); //L
        console.log(e); //O
        
        const {length:len} = 'HELLO';
        console.log(len) // 5
        或者
        const {length} = 'HELLO';
        console.log(length) // 5

从函数返回多个值
    function fun(){
        return [1,2,3]
    }
    可以这样写
    console.log(fun())
    但是我们要取第二个，就需要提前定义一个数组来接收，再循环
    这时候就需要用到解构赋值,比较方便
    var [x,y,z] = fun()
    console.log(x);
    console.log(y);
    console.log(z);
    
    
    function fun(){
        return {
            name:'xy',
            age:'18'
        }
    }
    
    var [name,age] = fun()
    console.log(name);
    console.log(age);
    

Map 结构
    let map = new Map();
    let obj = {
        name: 'Leon',
        sex: 'male'
    };
    map.set(obj,'myObject');
    map.get(obj); // "myObject"
    map.has(obj) //true
    map.delete(obj) //true
    map.has(obj) // false
    
    实例的属性和操作方法
    
        set(key,value):
        set方法设置键名key对应的键值为value，然后返回整个 Map 结构。
        let map = new Map();
        map.set('dsssddddddddsdsdsdssfw',8);
        map.set({a:1},'ddsdsds');
        
        get(key):
        获取key的值
        map.get('dsssddddddddsdsdsdssfw')//8
        
        has(key)
        has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
        map.has('dsssddddddddsdsdsdssfw'); //true
        
        delete(key)
        delete方法删除某个键，返回true。如果删除失败，返回false。
        map.delete('dsssddddddddsdsdsdssfw');
        map.has('dsssddddddddsdsdsdssfw')//false
        
        clear()
        清空Map对象
        map.size // 2
        map.clear()
        map.size // 0
        
        
    遍历方法
    方法  作用
    keys()  返回键名的遍历器
    values()    返回键值的遍历器
    entries()   返回所有成员的遍历器
    forEach()   遍历 Map 的所有成员
    
        const map = new Map([
          ['F', 'no'],
          ['T',  'yes'],
        ]);
        
        for (let key of map.keys()) {
          console.log(key);
        }
        // "F"
        // "T"
        
        for (let value of map.values()) {
          console.log(value);
        }
        // "no"
        // "yes"
        
        for (let item of map.entries()) {
          console.log(item[0], item[1]);
        }
        // "F" "no"
        // "T" "yes"
        
        // 或者
        for (let [key, value] of map.entries()) {
          console.log(key, value);
        }
        // "F" "no"
        // "T" "yes"
        
        // 等同于使用map.entries()
        for (let [key, value] of map) {
          console.log(key, value);
        }
        // "F" "no"
        // "T" "yes"

Map与其他数据结构的转换
    Map转为数组：
        const myMap = new Map()
          .set(true, 7)
          .set({foo: 3}, ['abc']);
        [...myMap]
        // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
    数组 转为 Map

        new Map([
          [true, 7],
          [{foo: 3}, ['abc']]
        ])
        
    Map 转为对象
        
        function strMapToObj(strMap) {
          let obj = Object.create(null);
          for (let [k,v] of strMap) {
            obj[k] = v;
          }
          return obj;
        }
        
        const myMap = new Map()
          .set('yes', true)
          .set('no', false);
        strMapToObj(myMap)
        
    对象转为 Map
        
        function objToStrMap(obj) {
          let strMap = new Map();
          for (let k of Object.keys(obj)) {
            strMap.set(k, obj[k]);
          }
          return strMap;
        }
        
        objToStrMap({yes: true, no: false})