（声明， 本文的所有代码均在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

ES6新特性：let和const的使用的更多相关文章

  1. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  2. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  3. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  4. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...

  5. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

  6. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

  7. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  8. ES6新特性三： Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  9. 34.js----JS 开发者必须知道的十个 ES6 新特性

    JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...

  10. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

随机推荐

  1. NOIP2007矩阵取数[DP｜高精度]

    题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵所有元素: 2. ...

  2. unity3d 的Quaternion.identity和transform.rotation区别是什么

    Quaternion.identity就是指Quaternion(0,0,0,0),就是每旋转前的初始角度,是一个确切的值,而transform.rotation是指本物体的角度,值是不确定的,比如可 ...

  3. marquee标签、插入百度地图

    marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>... ...

  4. [No00005F]读书与心智

    读千卷书,行万里路,不够…还得有个对谈者相伴,才更有意思.十月七号晚上,与友人谈读书,线上直播,三百观众相伴,四小时畅谈,不亦乐乎! Part1:读书的载体 散发出最浓郁的知识芬芳和铭刻下最隽永的历史 ...

  5. C++ ODB 框架(未实践使用)

    http://www.codesynthesis.com/products/odb/doc/manual.xhtml#17.1

  6. .Net程序员学习Linux最简单的方法

    有很多关于Linux的书籍,博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...

  7. java类型转换

    //java类型转换public class Demo2 { public static void main(String[] args){ int num1 = 55; int num2 =77; ...

  8. BZOJ 1066 【SCOI2007】 蜥蜴

    Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为$1$,蜥蜴的跳跃距离是d,即蜥蜴可以跳 ...

  9. git工作区、暂存区、版本库之间的关系

    区分三者关系 Git最让你迷惑的无非是它里面的各种概念了,如果是刚开始接触Git希望看完本篇介绍之后有一个清晰的认识,笔者认识也有限这里只说说个人对使用Git的感受,说一下它里面的几个最常用的概念的理 ...

  10. [转]使用URLDecoder和URLEncoder对中文进行处理

    一 URLEncoder HTML 格式编码的实用工具类.该类包含了将 String 转换为 application/x-www-form-urlencoded MIME 格式的静态方法.有关 HTM ...