黑马程序员技术交流社区

标题: 【上海校区】ES6这些就够了 [打印本页]

作者: frainbowv 时间: 2018-9-6 21:32
标题: 【上海校区】ES6这些就够了
刚开始用vue或者react，很多时候我们都会把ES6这位大兄dei加入我们的技术栈中。但是ES6那么多那么多特性，我们真的需要全部都掌握吗？秉着二八原则，掌握好常用的、有用的这个可以让我们的开发快速起飞。
接下来我们就聊聊ES6那些可爱的新特性吧。
1.变量声明const和let在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

[JavaScript] 纯文本查看 复制代码

function aa() {    if(flag) {

        var test = 'hello man'

    } else {

        console.log(test)

    }

  }

以上的代码实际上是：

[JavaScript] 纯文本查看 复制代码

 function aa() {    var test // 变量提升，函数最顶部

    if(flag) {

        test = 'hello man'

    } else {

        //此处访问 test 值为 undefined

        console.log(test)

    }

    //此处访问 test 值为 undefined

  }

所以不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。
接下来ES6主角登场：
我们通常用 let 和 const 来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。怎么理解这个块级作用域？

在一个函数内部
在一个代码块内部

说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域。

看以下代码：

[JavaScript] 纯文本查看 复制代码

  function aa() {

    if(flag) {

       let test = 'hello man'

    } else {

        //test 在此处访问不到

        console.log(test)

    }

  }

let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
再来说说 const
const 声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

[JavaScript] 纯文本查看 复制代码

  const name = 'lux'    name = 'joe' // 再次赋值此时会报错

还有，如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。

[JavaScript] 纯文本查看 复制代码

 const student = { name: 'cc' }    // 没毛病

    student.name = 'yy'

    // 如果这样子就会报错了

    student  = { name: 'yy' }

说说TDZ(暂时性死区)，想必你早有耳闻。

[JavaScript] 纯文本查看 复制代码

 {        console.log(value) // 报错

        let value = 'lala'

    }

我们都知道，JS引擎扫描代码时，如果发现变量声明，用 var 声明变量时会将声明提升到函数或全局作用域的顶部。但是 let 或者 const，会将声明关进一个小黑屋也是TDZ(暂时性死区)，只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。
哦了，说一道面试题

[JavaScript] 纯文本查看 复制代码



        varvar funcs = []

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

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

    }

    funcs.forEach(function(func) {

        func()

    })

这样的面试题是大家很常见，很多同学一看就知道输出十次10
但是如果我们想依次输出0到9呢？
有两种解决方法，直接看一下代码：

[JavaScript] 纯文本查看 复制代码

 // ES5知识，我们可以利用“立即调用函数”解决这个问题    var funcs = []

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

        funcs.push(

          (function(value) {

            return function() {

                console.log(value)

            }

        })(i)

      )

    }

    funcs.forEach(function(func) {

        func()

    })

  // 再来看看es6怎么处理的

    const funcs = []

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

        funcs.push(function() {

            console.log(i)

        })

    }

    funcs.forEach(func => func())

达到相同的效果，ES6 简洁的解决方案是不是更让你心动！！！
2.字符串先聊聊模板字符串

作者: 不二晨 时间: 2018-9-13 16:41

很不错，受教了

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2