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的“死区”。


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

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

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

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

     
  • 相关阅读:
    poj 2488 DFS
    畅通工程 并查集模版
    KMP 模板
    poj 1426 DFS
    poj 2528 线段数
    poj 3468 线段数 修改区间(点)
    CVPR2012文章阅读(2)A Unified Approach to Salient Object Detection via Low Rank Matrix Recovery
    如何制定目标
    Saliency Map 最新综述
    计算机视觉模式识别重要会议杂志
  • 原文地址:https://www.cnblogs.com/wl-blog/p/15093101.html
Copyright © 2011-2022 走看看