ES678...

let和const

在过去js中常常使用var来定义变量，但var的缺陷也异常明显。
例如：

1. var不能用于定义常量
2. var可以重复声明变量
3. var存在变量提升
4. var不支持块级作用域

在推出let和const后，js总是会推荐你使用他们，他们比起var有更多的优点。
例如：

<script id="let和const不能重复声明变量">
    // var声明的变量，可以重复声明
    var ali = '阿里巴巴'
    console.log(ali) // 阿里巴巴

    var ali = '阿里云'
    console.log(ali) // 不会报错，输出 阿里云

    // let和const是不能够重复声明的
    let tencent = '腾讯'
    const google = '谷歌'
    console.log(tencent, google) // 腾讯 谷歌
    
    // 重新声明
    let tencent = '腾讯QQ' // 报错
    const google = '谷歌地图' // 报错
</script>

<script id="let和const不存在变量提升">
    // var声明变量中，程序执行时，会把变量先声明，此时输出变量会得到undefined
    // 在程序中的顺序: var info -> log(info) -> info = 'txt'
    
    console.log(ali) // undefined
    var ali = '阿里巴巴'

    // let和const只能在声明后使用，否则就会报错
    // 在程序中的顺序: log(site) -> 报错
    
    // console.log(tencent) // 报错
    // let tencent = '腾讯'

    console.log(google) // 报错
    const google = '谷歌'
</script>

<script id="const值和对象">
    // const PI = 3.14
    // 修改变量值
    // PI = 6.16
    // console.log(PI) // 报错
    
    // const创建的一个对象，对象内的值是能被改变的，但是本身是不能改变的
    const e1 = {
        name: 'title',
        msg: '天气真好'
    }
    console.log(e1) // 初始值输出
    
    // 修改e1内部的name
    e1.name = 'body'
    console.log(e1) // 值被修改，输出成功
    
    // 修改e1
    e1 = 1
    console.log(e1) // 报错
</script>

<script id="let和const不会作为window属性">
    var v1 = '张三'
    console.log(window.v1) // 张三
    
    let v2 = '王五'
    const v3 = '赵柳'
    
    console.log(window.v2) // undefined
    console.log(window.v3) // undefined
</script>

<script id="let和const支持块级作用域">
    {
        var str = '张三'
    }
    {
        let str1 = '李四'
        const str2 = '王五'
    }
    console.log(typeof str) // string
    console.log(typeof str1) // undefined
    console.log(typeof str2) // undefined
</script>

---

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

<script id="箭头函数">
    let nameArr = ['张三', '周杰伦', '刘德华']
    // 多个参数需要用()包起来
    // 回调中使用
    nameArr.forEach((value, index, array) => {
        console.log(value)
    })

    // 箭头函数没有this,this指向是外层代码块的this,这样可以避免this的指向问题
    let obj = {
        logThis: function () {
            // 普通函数
            setTimeout(function () {
                console.log('this指向window', this)
            }, 1000)

            // 箭头函数
            setTimeout(() => {
                console.log('this指向logThis', this)
            }, 1000)
        }
    }
    obj.logThis()

    // arguments对象
    function logArg() {
        // 普通函数具有arguments对象
        console.log(arguments)
    }
    logArg()

    logArg2 = () => {
        // 箭头函数不具有arguments对象
        console.log(arguments) // 报错
    }
    logArg2()
</script>

---

函数设置默认参数

设置默认参数后，如果没有传值，那么值就是设置好的默认参数

<script id="设置默认参数">
    function logPerson(name, sex = '男', age = 1) {
        console.log(name, sex, age)
    }
    logPerson('张三', '女') // 输出 张三 女 1(默认值)

    logDog = (name, sex = '公', age = 1) => {
        console.log(name, sex, age)
    }
    logDog ('小豆子') // 输出 小豆子 公(默认值) 1(默认值)
</script>

---

延展参数转化

利用延展操作符，可以把参数转换成数组形式

<script id="延展参数转化">
    let logName = function (arg1, ...arg2) {
        console.log(arg1, arg2)
    }
    logName('张三', '李四', '王五', '赵柳') // 在张三之后的参数，都会被归拢到arg2中，以数组形式展现
</script>

---

模板字符串

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

<script id="模板字符串基本应用">
    let name = '张三', gender = '男'

    // 不利用模板字符串进行字符串拼接
    let result = '我叫：' + name + '，性别：' + gender
    console.log(result)

    // 利用模板字符串进行字符串拼接
    let result1 = `我叫：${name}，性别：${gender}`
    console.log(result1)
</script>

<script id="其他应用场景">
    // 利用map+模板字符串返回一组<li>标签，在通过join进行分隔
    let dataArr = ['张三', '李四', '王五', '赵柳']
    let lis = dataArr.map(function (value) {
        return `<li>${value}</li>`
    })
    document.getElementById('box').innerHTML = lis.join('');
</script>

---

解构赋值

<script id="用于数组的解构">
    let nameArr = ['张三', '李四', '王五']
    
	// 传统赋值
    let name1 = nameArr[0]
    let name2 = nameArr[1]
    let name3 = nameArr[2]
    console.log(name1, name2, name3)
    
    // 解构赋值
    let [name4, name5, name6] = nameArr
    console.log(name4, name5, name6)
</script>

<script id="用于对象的解构">
    let obj1 = {
        name: '臧三',
        age: 1,
        gender: '男'
    }
    let {name, age, gender} = obj1
    console.log(name, age, gender)
</script>

<script id="解构重命名">
    let obj = {
        job: '教师',
        time: 3,
        friend: '张娇友'
    }
    // 对time进行重命名
    let {job, time: timeX, friend} = obj
    // 输出timeX
    console.log(job, timeX, friend)
</script>

<script id="省略解构">
    let arr1 = ['中文', '雅黑', '微软']
    let [, font,] = arr1
    console.log(font)
</script>

---

map() 方法

<script id="map">
    // 创建一个map
    let obj1 = {a: 1}, obj2 = {b: 2}
    let map = new Map([
        ['name', '张三'],
        ['age', 17],
        ['sex', '男'],
        [obj1, '今天的天气风很大'],
        [obj2, '适合在被窝睡觉'],
        [[1, 3], 'hhh']
    ])
    console.log(map);

    // size属性
    console.log(map.size);

    // keys()
    console.log(map.keys());

    // values()
    console.log(map.values());

    // entries()
    console.log(map.entries());

    // set()设置,
    // map.set('friends', ['赵柳', '芳芳']).set('dog', '大壮')
    // console.log(map);

    // get()取值
    // console.log(map.get(obj1));
    // console.log(map.get('name'));

    // has()是否拥有
    // console.log(map.has(obj2));

    // delete()删除
    // map.delete(obj2)
    // console.log(map);

    // clear()清除
    // map.clear()
    // console.log(map);
</script>