资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Es6：新手第一篇 let 和 const

Es6：新手第一篇 let 和 const

AJie / 1038人阅读

Es6 let 和 const

基本用法

</>复制代码 
  1.    let a = 10
  2.    console.log(a) //10
  3.    // 代码块内执行
  4.    {
  5.        let b = 5
  6.        console.log(b) // 5
  7.    }

for循环内也是比较试用

</>复制代码 
  1.    for (let i =0;i<3;i++) {
  2.       console.log(i)  // 0，1，2
  3.    }

Es6 let命令只在所在的代码块内使用（块级作用域）
例1 使用let在函数代码块内使用，Es5中是没有块级作用域的，Es6中的let实际上是为Javascript新增了块级作用域，其实在声明a为10的代码块中则为一个块级作用域，if代码块中也是块级作用域，这就表明了现在有两个块级作用域，重点来了外层代码块不受内层代码块影响，所以a在不同的地方打印出的结果不同

</>复制代码 
  1.    function f() {
  2.         let a = 10
  3.         if (1===1) {
  4.             let a = 5
  5.             console.log(a) // 5
  6.         }
  7.         console.log(a) // 10
  8.     }
  9.     f()
  10.

例2 这个循环的例子let声明了之后，在循环{}代码块内都属于i的块级作用域内，所以在里面怎么打印都会有结果，而在循环外部打印i的结果则是未定义

</>复制代码 
  1.     for (let i =0;i<3;i++) {
  2.       console.log(i)  // 0，1，2
  3.     }
  4.     console.log(i) // 这样会报错 i is not defined

然而var则不一样，var也是声明变量，它则在全局范围内有效，让我们来看看
例1 现在看看var定义了变量，在内部可以打印出小于三的每个结果，在代码块外层同样可以得到结果，但是结果和代码块内的不一样，这是因为外层的i是拿到了循环完成之后的结果

</>复制代码 
  1.    for (var i =0;i<3;i++) {
  2.       console.log(i)  // 0，1，2
  3.     }
  4.     console.log(i) // 3 为什么会得到3，是因为for循环从0开始执行，i++，1然后是2，只执行2次
  5.

例2 这里使用var得到的结果全是5，我们来分析一下它的执行步骤，首先执行的函数，声明变量a为10，if代码块，然后再次声明a为5（内层改变外层），打印5，执行出代码块再次打印a时，此时a的值已经被改变5

</>复制代码 
  1.    function f() {
  2.         var a = 10
  3.         if (1===1) {
  4.             // 在一个代码块的中变量并不会覆盖掉代码块外面的变量
  5.             var a = 5
  6.             console.log(a) // 5
  7.         }
  8.         console.log(a) // 5
  9.     }
  10.     f()

Es6 let 不存在变量提升和暂时性死区
例1 测试let不存在变量提升

</>复制代码 
  1.    {
  2.        console.log(foo) // 报错ReferenceError
  3.        let foo = 1
  4.    }

如果存在变量提升的话上面的代码执行应该是

</>复制代码 
  1.    {
  2.        let a
  3.        console.log(a) //undefined
  4.        a=2
  5.    }

例2 如果使用let这样操作执行到if会报错，因为let不存在变量提升

</>复制代码 
  1.    function func() {
  2.        if (typeof let == "undefined") {
  3.        }
  4.        let val = ""
  5.    }

我们来看看var的变量提升是什么样的，与let区别在哪里
例1 var的变量提升（值不提升）

</>复制代码 
  1.    {
  2.        console.log(foo) // undefined
  3.        var foo = 1
  4.    }

例2 var变量提升（先判断后声明），这样就不会报错

</>复制代码 
  1.    function func() {
  2.        if (typeof val == "undefined") {
  3.        }
  4.        var val = ""
  5.    }

let 存在的暂时性死区社么为let的死区，只要是在let声明之前则为死区

let 声明在同层代码块内，不可以重复声明
例1 在一个函数内声明相同的变量名，使用let，这样会报错，如果使用var就会报错

</>复制代码 
  1.     func()
  2.     function func() {
  3.         let a = 1
  4.         let a = 2
  5.         console.log(a, "xx")
  6.     }
  7. 例2 现在我们来看看var的执行结果,var 是可以重复声明的
  8.     func()
  9.     function func() {
  10.         var a = 1
  11.         var a = 2
  12.         console.log(a, "xx") // 2
  13.     }

作用域和函数声明
ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明，接下来我们来看看Es5中没有块级作用域，下面的例子执行函数f()打印出的结果为I am inside!因为if内函数会被提升到顶部，然而在es6中理论的结果为I am outside!，但是会报错！

</>复制代码 
  1.    function f() { console.log("I am outside!"); }
  2.    (function () {
  3.            if (false) {
  4.                // 重复声明一次函数f
  5.                function f() { console.log("I am inside!"); }
  6.            }
  7.        f()
  8.    }())

以上之所以会在浏览器内报错因为在Es6浏览器中块级作用域的声明相当于var声明的变量（变量提升），所以我们尽量写函数表达式而不是函数声明语句,下面这个在Es6浏览器中得到的结果则为I am outside!，内层作用域不影响外层作用域，如果将let 替换成 var 将还是会报错！

</>复制代码 
  1.    function f() { console.log("I am outside!"); }
  2.    (function () {
  3.            if (false) {
  4.                // 重复声明一次函数f
  5.                let f = function f() { console.log("I am inside!"); }
  6.            }
  7.        f()
  8.    }())
  9.    
  10.    例1 创建函数有两种方法一种是表达式，一种是函数声明，下面的去掉foo的代码会正常执行，这就是区别
  11.    function test() {
  12.        foo() // foo not fun
  13.        bar()
  14.        var foo = function () { // 变量提升
  15.            alert("this won"t run!");
  16.        }
  17.        function bar() {
  18.            alert("this will run!");
  19.        }
  20.    }
  21.    test()

const声明只读常量，常量一旦声明就不能改变，与变量的区别就在上面

</>复制代码 
  1.    //const一旦声明变量，就必须立即初始化，不能留到以后赋值。
  2.    const foo
  3.    //const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用
  4.    console.log(a) // 会报错
  5.    const a = 1
  6.    // const声明的常量，也与let一样不可重复声明,以下都会报错
  7.    const b = 1
  8.    const b = 2
  9.    // 正确的声明只需声明一次
  10.    const c = 1
  11.    console.log(c)  //1
  12.   它的本质说白了就是指向内存的数据不得改的，但是还有另一种情况
  13.    const foo = {};
  14.    // 为 foo 添加一个属性，可以成功
  15.    foo.prop = 123;
  16.    foo.prop = 321;
  17.    console.log(foo.prop); // 321
  18.    
  19.    foo = {} // 就会报错，不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
  20.   Es6声明变量的6种方法（var，function （es5）），let，const， import， class

顶层对象window和global对象（这里可以看看文档就行，最重要的可以多看看this）

</>复制代码 
  1.   浏览器window：Es6中的六种方法声明的变量，使用window都可以拿到，因为顶层对象的属性与全局变量是等价的
  2.   
  3.   global：ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。
  4.    浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
  5.    浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
  6.    Node 里面，顶层对象是global，但其他环境都不支持。
  7.

GPU云服务器 云服务器 第一篇 Lets Let const

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100247.html

相关文章

  • ES6学习摘要（01）（新人学习）

    摘要：入门一前言由于最近本人在学习，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于的新人学习摘要吧。的作用域与命令相同只在声明所在的块级作用域内有效。块级作用域新增方式和实际上为新增了块级作用域。同时，函数声明还会提升到所在的块级作用域的头部。 ECMAScript6/ES6 入门 一、前言 由于最近本人在学习ES6，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于ES6的新人学习摘要吧。...

    dmlllll 评论0 收藏0

  • 新手快速学习ES6语法,用最快的速度入门ES6就看这里

    摘要：的作用域与命令相同只在声明所在的块级作用域内有效。数值和布尔值的解构赋值解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。上面代码中，数值和布尔值的包装对象都有属性，因此变量都能取到值。默认值解构赋值允许指定默认值。 最近正在学习ES6,对于ES6的语法有一些自己的理解, 想写这篇文章帮助跟我一样的新手快速入门ES6而不至于连代码都看不懂. 至于开发环境的搭建什么...

    vspiders 评论0 收藏0

  • ES6学习第一节 块级作用域的声明以及绑定 （一） let声明

    摘要：块级作用域绑定变量声明的变量声明与其他的一些计算机语言不同，在类的语言中，变量总是在被声明的地方创建而在中变量创建的位置取决于你如何声明它，为我们提供了新的声明方式用来让开发者能够更好的控制变量的作用域我们通过声明的变量，无论其声明位置在哪 块级作用域绑定 1.变量声明 JS的变量声明与其他的一些计算机语言不同，在类C的语言中，变量总是在被声明的地方创建；而在JS中变量创建的位置取决于...

    chanthuang 评论0 收藏0

  • 新手开发中常用ES6基础知识总结

    摘要：感觉对我这种没实习没工作的新手，虽然一些高级的功能暂时用不上，但是一些基础的知识还是为平时的开发提供了巨大的便利。学习告一段落，现在结合平时的开发，总结一些常用的知识。日常开发中，块级作用域中使用的变量，尽量使用或者声明。使用时，进行合并。 很早之前就学过TypeScript和ES6，后来做项目的时候零零散散用了些。这几天又系统地把ES6的知识看了一遍。感觉对我这种没实习没工作的新手，...

    Paul_King 评论0 收藏0

  • 我去！又是勇士和骑士？--NBA资讯小程序

    摘要：话不多说，先来一张我科的图坐镇资讯小程序出来啦作为一个刚接触小程序不久的前端小白菜，恰逢最近如火如荼的双抢七大战骑士与勇士又又又又又一次的巅峰对决实话真的看腻了决定写一个资讯的小程序来玩玩。 showImg(https://segmentfault.com/img/remote/1460000015202389?w=580&h=580);话不多说，先来一张我科的图坐镇 NBA资讯小程序...

    DesGemini 评论0 收藏0

发表评论

登陆后可评论

0条评论

AJie

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<