ES6新特性：let和const的使用

时间：2023-03-09 17:50:45
ES6新特性：let和const的使用

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

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

　　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：块状作用域

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

{

    let tmp = ;

    {

        tmp = ;

        let tmp = ;

    }

}

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

{

    let foo = ;

    {

        let foo = ;

        foo = ;

    }

    console.log(foo);

}

　　以上这段代码相当于是IIFE（立即执行函数表达式）， 效果和以下的相同；

{

    var foo = ;

    (function(){

        var foo = ;

        foo = ;

    }());

    console.log(foo);

}

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

{

    var foo = ;

    {

        var foo = ;

        foo = ;

    }

    console.log(foo);

}

　　　　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 = ;

    console.log(window.foo); //输出 undefined

    var bar = ;

    console.log(window.bar); //输出1

</script>

</body>

</html>

　　const：

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

　　使用const定义的常量， 拥有let一样的特性（无声明提前， 有块状作用域， 重复声明）；

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

　　对象：

{

    const foo = {};

    foo.bar = ;

    console.log(foo.bar);

}

　　数组：

{

    const foo = [];

    foo.push();

    foo.push();

    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

相关文章