zoukankan      html  css  js  c++  java
  • 【系统学习ES6】第一节:新的声明方式

    【系统学习ES6】

    本专题旨在对ES6的常用技术点进行系统性梳理,帮助大家对其有更好的掌握。计划每周更新1-2篇,希望大家有所收获。

    以前用ES5时,声明变量只能用varES6的出现,为我们带来了两种新的声明方式:letconst。我们可以先简单记忆:

    • var:声明全局变量

    • let:声明局部变量

    • const:声明常量

    var声明

    varES6里是用来声明全局变量的,我们先看一个简单的例子:

    var a = "lemoncool";
    console.log(a);

    控制台输出了“lemoncool”。但这个例子不足以声明a是全局变量。我们继续声明一个函数,在函数体中看是否可以拿到函数外面声明的a

    var a = "lemoncool";
    var testFun = function(){
     console.log(a);

    testFun();

    控制台同样输出了“lemoncool”,说明函数中可以拿到外部声明的a,这可以说明var声明的变量确实是全局的。如果你觉得这个例子说服力还不够,那我们继续看。

    var a = "lemoncool";
    var testFun = function(){
      a = '23';

    testFun(); 
    console.log(a);

    此时控制台会输出多少呢?是"23"。我想,这个例子,足以说明var是全局声明的。

    let 声明

    我们试着用let再次执行上面的例子:

    var b = "lemoncool";
    var testFun = function(){
      let b = '23';

    testFun(); 
    console.log(b);

    函数执行后,再打印b,你觉得会输出多少呢?结果是此时输出的是"lemoncool"。为什么?

    因为我们在函数里用通过let声明了 b,这时的 b ="23"只在函数作用域内有效,属于局部变量。外面的打印,拿不到函数的局部变量,所以拿不到"23"。

    那如果我们只在函数体里声明b,外部的声明删掉,打印就会输出"23"么?

    var testFun = function(){
      let b = '23';

    testFun(); 
    console.log(b);

    不好意思,报错了。不在外部声明,即使函数里声明再多花样,外部依然拿不到。

    上面两个例子,说明了let声明的是局部变量。let声明的变量,只在区块内起作用,外部拿不到,也是不可以调用的。有关作用域问题,大家可以自行查阅资料深入了解。

    所以let不会存在变量提升的bug,可以有效防止数据污染。同时,let不允许在相同作用域内,重复声明同一个变量。

    在合理场景下,我们要努力去习惯用let代替var

    const 声明

    在开发中,有些变量从声明后就不允许改变。这种变量叫常量。这时就需要用到const声明。

    我们通过一个反例,看一段错误代码:

    const c = "lemoncool";
    c = 'hello';
    console.log(c);

    执行这段代码时,会报错。原因是const声明的变量不可改变。

    const c = "lemoncool";
    console.log(c); //"lemoncool"
    const d; // SyntaxError: Missing initializer in const declaration

    这段代码同样会报错, 意味着,const一旦声明必须初始化,否则会报错。

    图片 Qconst声明的变量初始化不允许再改变,是针对所有类型么?

    A:答案是“”,简单类型(数值 number、字符串 string 、布尔值 boolean),的确是这样。但是对于复杂类型(对象 object,数组 array,函数 function),const只能保证变量指针是固定的,至于指针指向的数据结构,是否发生变化,就有些无法控制。所以使用 const 声明复杂类型对象时要慎重。

    图片

    暂时性死区

    var temp = "lemoncool";
    if (true) {
     console.log(temp);
     const temp = '123456';
    }

    你以为会输出“lemoncool”?NO,会报错。

    ES6 明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。 凡是在声明之前就使用这些变量,就会报错。

    所以,在代码块内,使用letconst命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

    上面代码中,在const命令声明变量temp之前,都属于变量temp的“死区”。


    到此,三种声明方式的使用方法及注意事项已梳理完毕。没有整理很细,因为细的知识点太多,不知从何说起。大家作为一个大纲,举一反三。

    下一节我们会一起讨论【解构赋值】,感谢大家支持,希望大家在每一节中都有所得。

    前端便利贴 公棕号【前端便利贴】记录着一个程序媛的所见所得所想,分享日常技术笔记,内容覆盖了阅读、技术和个人思考~,关注公棕号更早获取更多文章。

    觉得有用的话,小手点点【推荐】再走吖~~

    作者:Lemoncool
    更多:没有办法维护原创版权,欢迎关注我的公粽号:前端便利贴,文章更早、更全,免费获取完整代码
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利.
  • 相关阅读:
    MVC简介
    Scrapy中的item是什么
    Git删除文件操作
    vi编辑文件出现Can't open file for writing错误
    CentOs安装Scrapy出现error: Setup script exited with error: command ‘gcc’ failed with exit status 1错误解决方案
    Python脚本运行出现语法错误:IndentationError: unindent does not match any outer indentation level
    激活MyEclipse 6.5方法-通过一段Java程序生成激活码
    oninput,onpropertychange,onchange的用法和区别【转载】
    Myeclipse6.5项目启动时由于数据库连接失败的错误日志
    IE和Firefox的Javascript兼容性总结
  • 原文地址:https://www.cnblogs.com/lemoncool/p/15078380.html
Copyright © 2011-2022 走看看