ES6常用新特性（vue中常用）

刚开始用vue或者react，很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性，掌握好常用的。

?1.let 和 const 命令
?
let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。
?
什么是会计作用域？

?{}大括号内的代码块即为let 和 const的作用域。

案例 向一个数组中插入0～9

//

var funcs = 

    for (var i = 0; i < 10; i++) {

        funcs.push(function() { console.log(i) })

    }

    funcs.forEach(function(func) {

        func()

    })



//

// ES5告诉我们可以利用闭包解决这个问题

    var funcs = 

    for (var i = 0; i < 10; i++) {

        func.push((function(value) {

            return function() {

                console.log(value)

            }

        }(i)))

    }

    // es6

    for (let i = 0; i < 10; i++) {

        func.push(function() {

            console.log(i)

        })

    }

。

2.模板字符串
js 拼接模板很头疼，es5 之前 += + 各种“” ‘’
?
es6直接``

    //es5 

    var name = 'lopo'

    console.log('hello' + name)

    //es6

    const name = 'lopo'

    console.log(`hello ${name}`) //hello lopo

    console.log(`hello ${name==='xz'?'213':'hehe'}`) // hello hehe

3.函数
?函数默认值
es6 可为参数提供默认值，以方便初始化

//es5

    function action(num) {

        num = num || 200

        //当传入num时，num为传入的值

        //当没传入参数时，num即有了默认值200

        return num

    }

//es6

    function action(num = 200) {

        console.log(num)

    }

    action() //200

    action(300) //300



    

箭头函数
?
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字

//es5

    [1,2,3].map((function(x){

        return x + 1

    }).bind(this))

//es6 仅有一个参数的时候，是可以省略掉括号的

    [1,2,3].map( x => {x + 1} )

    [1,2,3].map( x => x + 1 )

//有参数

    var people = (name, age) => {

        const fullName = 'h' + name

        return fullName

    } 

?
.....未完待续......