• ES6新特性:let和const的使用


      (声明, 本文的所有代码均在node的最新稳定版本v4.4.3中执行的, 如果在浏览器中执行请把JS的运行环境提升为ES6)

      以前一直用var定义变量, 现在有了两种新的定义变量的方式, 1: let, 2: const;本文大概概括下使用letconst定义变量有哪些好处;

      let:

        1:声明提前

      使用var声明变量,存在声明提前的问题, 输出的tmp为"undefined":

    {
        var tmp = new Date();
    
        let f = function (){
            console.log(tmp); //undefined
            if (false){
                //使用var声明变量的声明提前;
                var tmp = "hello world";
            }
        }
    
        f();
    }

      如果我们把定义tmp的方式改为let呢? 那么tmp输出的结果为当前的日期。

    {
        var tmp = new Date();
    
        let f = () => {
            console.log(tmp); //输出的结果为当前的日期
            if (false){
                //使用let的方式声明, tmp的作用域只有在离他最近的一个{}括号中;
                let tmp = "hello world";
            }
        }
    
        f();
    }

        2:块状作用域

      letconst不但拥有块状作用域, 还也不存在声明提前这个玩意儿, 以下代码会报ReferenceError

    {
        let tmp = 123;
        {
            tmp = 234;
            let tmp = 456;
        }
    }

      使用let声明的元素作用域更加明确, 不会出现作用域混乱的情况, 可以减少bug的产生;

    {
        let foo = 0;
        {
            let foo = 1;
            foo = 2;
        }
        console.log(foo);
    }

      以上这段代码相当于是IIFE(立即执行函数表达式), 效果和以下的相同;

    {
        var foo = 0;
        (function(){
            var foo = 1;
            foo = 2;
        }());
        console.log(foo);
    }

      再来猜猜这个的结果是什么,( var 形式声明的变量会提升到{}外面去哦 , {}形式的块状作用域相当于是if(true){//code}的写法):

    {
        var foo = 0;
        {
            var foo = 1;
            foo = 2;
        }
        console.log(foo);
    }
    View Code

        3:重复声明

      使用let声明的变量不能重复声明,否则会出现一下错误:

    SyntaxError: Identifier 'a' has already been declared

      注意: 在全局下用let声明变量和用var声明变量还是有区别的:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
    </head>
    <body>
    <script>
        "use strict";
        let foo = 1;
        console.log(window.foo); //输出 undefined
        var bar = 1;
        console.log(window.bar); //输出1
    </script>
    </body>
    </html>

      const:

      使用const定义的常量, 而且定义一次以后不能再进行更改, 否者会报错;

      使用const定义的常量, 拥有let一样的特性(无声明提前有块状作用域, 重复声明);

      但是要注意, 如果给常量定义的是对象,只要该对象指向在内存中的地址不发生改变, 数据可以随便改的(这涉及到计算机的传值和传址);

      对象:

    {
        const foo = {};
        foo.bar = 1111;
        console.log(foo.bar);
    }

      数组:

    {
        const foo = [];
        foo.push(1);
        foo.push(2);
        console.log(JSON.stringify(foo));
    }

      这些新语法让JS更加规范, 也更加适合大项目, 我仿佛猜到以后要用private和public声明变量了....( ╯□╰ )

      参考:

      阮一峰:http://es6.ruanyifeng.com/#docs/let

      https://github.com/DrkSephy/es6-cheatsheet#var-versus-let--const

    作者: NONO
    出处:http://www.cnblogs.com/diligenceday/
    QQ:287101329
    微信:18101055830 

  • 相关阅读:
    iframe标签用法详解
    Redis 数据备份与恢复,安全,性能测试,客户端连接,管道技术,分区(四)
    Redis 有序集合(sorted set),发布订阅,事务,脚本,连接,服务器(三)
    Redis 命令,键(key),字符串(String),哈希(Hash),列表(List),集合(Set)(二)
    Redis 安装,配置,简介,数据类型(一)
    Python2.x与3​​.x版本区别
    Python主流框架
    python面向对象( item系列,__enter__ 和__exit__,__call__方法,元类)
    Json对象与Json字符串互转(4种转换方式)
    JSON.parse和eval的区别
  • 原文地址:https://www.cnblogs.com/diligenceday/p/5450939.html
Copyright © 2020-2023  润新知