ES6部分特性 | let关键字 | 模板字符串 | 对象简化赋值 | 箭头函数 | this

ES6 | let关键字

• var有变量提升，不报错。

			/**
             * var有变量提升，不报错。
             * 等同于: var school -> console.log(school) -> school='xxx'
            */
            console.log('school', school)   // undefined,不报错
            var school =XXOO大学'
            // let和var关键字的用法基本一致
            let food = '酸辣鸡杂'
            console.log('food:', food)
            console.log('city:', city)  // Uncaught ReferenceError: Cannot access 'city' before initialization
            let city = '北京'

ES6 | 模板字符串

• 使用 ` 包裹文本
• 在需要替换的位置使用 ${} 占位,并填入内容即可

			/**
             * 使用 ` ` 包裹文本
             * 在需要替换的位置使用 ${} 占位,并填入内容即可
            */
            let name = 'Alin'
            let school = 'XXOO大学'
            let food = '酸辣鸡杂'
            let temStr = `My name is: ${name}, 我毕业的学校是：${school}, 我喜欢吃的菜是：${food}`
            console.log(temStr)

ES6 | 对象的简化赋值

• 如果属性名和变量名相同，可以简写
• 方法可以省略function关键字

			/**
             * 如果属性名和变量名相同，可以简写
             * 方法可以省略function关键字
            */
            let name = 'Alin'
            let school = '中北大学'
            let food = '酸辣鸡杂'
            let person = {
                name,   // name: name
                school,
                age: 18,
                // eatFood:function(){
                //     console.log(`${name}爱吃${food}`)
                // }
                eatFood(){
                    console.log(`${name}爱吃${food}`)
                }
            }
            console.log(person)
            person.eatFood()

ES6 | 箭头函数

• function 省略掉，替换为=>
• 参数只有一个时，可以省略( )
• 函数体只有一行时，可以省略{ }
• 函数体只有一行时，并且有返回值时，如果省略了{ }，必须省略return

			/**
             * - `function` 省略掉，替换为` =>`
             * - 参数只有`一个`时，可以省略`( )`
             * - 函数体只有`一行`时，可以省略`{ }`
             * - 函数体只有`一行`时，并且有`返回值`时，如果省略了`{ }`，必须省略`return`
            */ 
            // 无参数，一行，无返回值的函数
            let func1 = function() {
                console.log('func1,Hello ES6')
            }
            // let func1 = () => console.log('func1,Hello ES6')

            // 1个参数，一行，无返回值的函数
            let func2 = function(p1) {
                console.log('func2,p1:', p1)
            }
            // let func2 = p1 => console.log('func2,p1:', p1)

            // 2个参数，多行，无返回值的函数
            let func3 = function(p1, p2) {
                console.log('func3,p1:', p1)
                console.log('func3,p2:', p2)
            }
            // let func3 = (p1, p2) => {
            //     console.log('func3,p1:', p1)
            //     console.log('func3,p2:', p2)
            // }

            // 无参数，一行，有返回值的函数
            let func4 = function(){
                return 'func4'
            }
            // let func4 = () => 'func4'

            // 1个参数，一行，有返回值的函数
            let func5 = function(p1){
                return 'func5:' + p1
            }
            // let func5 = p1 => 'func5:' + p1

            // 2个参数，多行，有返回值的函数
            let func6 = function(p1, p2){
                console.log('func6,p1:', p1, ',p2:', p2)
                return 'p1:' + p1 + ',p2:' + p2
            }
            // let func6 = (p1, p2) => {
            //     console.log('func6,p1:', p1, ',p2:', p2)
            //     return 'p1:' + p1 + ',p2:' + p2
            // }

            func1()
            func2('ppppp')
            func3('1', 'p222')
            console.log('func4:', func4())
            console.log('func5:', func5('param'))
            console.log('func6:', func6('paramA','paramB'))

ES6 | 箭头函数的this

• 创建时的this是谁，运行的时候this就是谁
• 谁 '.'出来的，就是谁

/**
             * 创建时的this是谁，运行的时候this就是谁
            */
            let person = {
                name: '菜菜',
                food: '鸡杂',
                sayHi(){
                    console.log('sayHi',this)
                    // 保存this
                    let that = this
                    window.setTimeout(function(){
                        console.log('window-setTimeout-this',this)
                        console.log('window-setTimeout-that',that)
                    }, 100)
                    setTimeout(()=>{
                        console.log('setTimeout-this', this)
                    })
                }
            }
            // this: 谁 '.'出来的，就是谁
            person.sayHi()