Es6:新手第一篇 let 和 const

Es6 let 和 const

  1. 基础用法

       let a = 10
       console.log(a) //10
       // 代码块内实行
       {
           let b = 5
           console.log(b) // 5
       }

    for轮回内也是比较试用

       for (let i =0;i<3;i++) {
          console.log(i)  // 0,1,2
       }
    
  2. Es6 let敕令只在地点的代码块内运用(块级作用域)
    例1 运用let在函数代码块内运用,Es5中是没有块级作用域的,Es6中的let实际上是为Javascript新增了块级作用域,其实在声明a为10的代码块中则为一个块级作用域,if代码块中也是块级作用域,这就表清楚明了如今有两个块级作用域,重点来了外层代码块不受内层代码块影响,所以a在差别的处所打印出的效果差别

       function f() {
            let a = 10
            if (1===1) {
                let a = 5
                console.log(a) // 5
            }
            console.log(a) // 10
        }
        f()
        

    例2 这个轮回的例子let声清楚明了今后,在轮回{}代码块内都属于i的块级作用域内,所以在内里怎样打印都邑有效果,而在轮回外部打印i的效果则是未定义

        for (let i =0;i<3;i++) {
          console.log(i)  // 0,1,2
        }
        console.log(i) // 如许会报错 i is not defined

    然则var则不一样,var也是声明变量,它则在全局局限内有效,让我们来看看
    例1 如今看看var定义了变量,在内部能够打印出小于三的每一个效果,在代码块外层一样能够获得效果,然则效果和代码块内的不一样,这是由于外层的i是拿到了轮回完成今后的效果

       for (var i =0;i<3;i++) {
          console.log(i)  // 0,1,2
        }
        console.log(i) // 3 为何会获得3,是由于for轮回从0最先实行,i++,1然后是2,只实行2次
        

    例2 这里运用var获得的效果满是5,我们来剖析一下它的实行步骤,起首实行的函数,声明变量a为10,if代码块,然后再次声明a为5(内层转变外层),打印5,实行出代码块再次打印a时,此时a的值已被转变5

       function f() {
            var a = 10
            if (1===1) {
                // 在一个代码块的中变量并不会覆蓋掉代码块表面的变量
                var a = 5
                console.log(a) // 5
            }
            console.log(a) // 5
        }
        f()
  3. Es6 let 不存在变量提拔和暂时性死区
    例1 测试let不存在变量提拔

       {
           console.log(foo) // 报错ReferenceError
           let foo = 1
       }

    假如存在变量提拔的话上面的代码实行应该是

       {
           let a
           console.log(a) //undefined
           a=2
       }

    例2 假如运用let如许操纵实行到if会报错,由于let不存在变量提拔

       function func() {
           if (typeof let == 'undefined') {
           }
           let val = ''
       }

    我们来看看var的变量提拔是什么样的,与let区分在那里
    例1 var的变量提拔(值不提拔)

       {
           console.log(foo) // undefined
           var foo = 1
       }

    例2 var变量提拔(先判断后声明),如许就不会报错

       function func() {
           if (typeof val == 'undefined') {
           }
           var val = ''
       }

    let 存在的暂时性死区社么为let的死区,只如果在let声明之前则为死区

  4. let 声明在同层代码块内,不能够反复声明
    例1 在一个函数内声明雷同的变量名,运用let,如许会报错,假如运用var就会报错

        func()
        function func() {
            let a = 1
            let a = 2
            console.log(a, 'xx')
        }
    例2 如今我们来看看var的实行效果,var 是能够反复声明的
        func()
        function func() {
            var a = 1
            var a = 2
            console.log(a, 'xx') // 2
        }
  5. 作用域和函数声明
    ES5 划定,函数只能在顶层作用域和函数作用域当中声明,不能在块级作用域声明,接下来我们来看看Es5中没有块级作用域,下面的例子实行函数f()打印出的效果为I am inside!由于if内函数会被提拔到顶部,然则在es6中理论的效果为I am outside!,然则会报错!

       function f() { console.log('I am outside!'); }
       (function () {
               if (false) {
                   // 反复声明一次函数f
                   function f() { console.log('I am inside!'); }
               }
           f()
       }())

    以上之所以会在浏览器内报错由于在Es6浏览器中块级作用域的声明相当于var声明的变量(变量提拔),所以我们只管写函数表达式而不是函数声明语句,下面这个在Es6浏览器中获得的效果则为I am outside!,内层作用域不影响外层作用域,假如将let 替换成 var 将照样会报错!

       function f() { console.log('I am outside!'); }
       (function () {
               if (false) {
                   // 反复声明一次函数f
                   let f = function f() { console.log('I am inside!'); }
               }
           f()
       }())
       
       例1 建立函数有两种要领一种是表达式,一种是函数声明,下面的去掉foo的代码会一般实行,这就是区分
       function test() {
           foo() // foo not fun
           bar()
           var foo = function () { // 变量提拔
               alert("this won't run!");
           }
           function bar() {
               alert("this will run!");
           }
       }
       test()
  6. const声明只读常量,常量一旦声明就不能转变,与变量的区分就在上面

       //const一旦声明变量,就必须马上初始化,不能留到今后赋值。
       const foo
       //const敕令声明的常量也是不提拔,一样存在暂时性死区,只能在声明的位置背面运用
       console.log(a) // 会报错
       const a = 1
       // const声明的常量,也与let一样不可反复声明,以下都邑报错
       const b = 1
       const b = 2
       // 准确的声明只需声明一次
       const c = 1
       console.log(c)  //1
      它的实质说白了就是指向内存的数据不得改的,然则另有另一种状况
       const foo = {};
       // 为 foo 增加一个属性,能够胜利
       foo.prop = 123;
       foo.prop = 321;
       console.log(foo.prop); // 321
       
       foo = {} // 就会报错,不能把foo指向另一个地点,但对象自身是可变的,所以依旧能够为其增加新属性。
      Es6声明变量的6种要领(var,function (es5)),let,const, import, class
  7. 顶层对象window和global对象(这里能够看看文档就行,最主要的能够多看看this)

      浏览器window:Es6中的六种要领声明的变量,运用window都能够拿到,由于顶层对象的属性与全局变量是等价的
      
      global:ES5 的顶层对象,自身也是一个题目,由于它在种种完成内里是不一致的。
       浏览器内里,顶层对象是window,但 Node 和 Web Worker 没有window。
       浏览器和 Web Worker 内里,self也指向顶层对象,然则 Node 没有self。
       Node 内里,顶层对象是global,但其他环境都不支撑。
      
    原文作者:me_zhazha
    原文地址: https://segmentfault.com/a/1190000017463154
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞