A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© frainbowv 中级黑马   /  2018-9-6 21:32  /  1088 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

刚开始用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.字符串先聊聊模板字符串

1 个回复

倒序浏览

很不错,受教了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马