zoukankan      html  css  js  c++  java
  • 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 

  • 相关阅读:
    (转载)SAPI 包含sphelper.h编译错误解决方案
    C++11标准的智能指针、野指针、内存泄露的理解(日后还会补充,先浅谈自己的理解)
    504. Base 7(LeetCode)
    242. Valid Anagram(LeetCode)
    169. Majority Element(LeetCode)
    100. Same Tree(LeetCode)
    171. Excel Sheet Column Number(LeetCode)
    168. Excel Sheet Column Title(LeetCode)
    122.Best Time to Buy and Sell Stock II(LeetCode)
    404. Sum of Left Leaves(LeetCode)
  • 原文地址:https://www.cnblogs.com/diligenceday/p/5450939.html
Copyright © 2011-2022 走看看