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);
}

    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

时间: 2024-08-27 15:55:50

ES6新特性:let和const的使用的相关文章

ES6新特性

ES6新特性概览 箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs. 我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐.当引入箭头操作符后可以方便地写回调了.请看下面的例子. var array = [1, 2, 3]; //传统写法 array.forEach(f

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

ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中.要查看ES6的支持情况请点此. 目前想要

ES6新特性概览

转自:http://www.cnblogs.com/Wayou/p/es6_new_features.html ES6学习可参考:http://es6.ruanyifeng.com/ 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6

JavaScript学习--Item24 ES6新特性概览

ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中.要查看ES6的支持情况请点此. 目前想要

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

JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> Promise 块级作用域的let和const 类 模块化 注意:这个列表十分主观并且带有偏见,其他未上榜的特性并不是因为没有作用,我这么做只是单纯的希望将这份列表中的项目保持在十个. 首先,一个简单的JavaScript时间线,不了解历史的人也无法创造历史. 1995年:JavaScript以LiveS

ES6 新特性

ES6新特性 1.变量 (1).var 的问题:可以重复声明;  无法限制修改;  没有块级作用域; (2).新加let: 不能重复声明;  变量-可以重新进行赋值;  块级作用域; (3).新加const:不能重复声明;  常量-不可以重新进行赋值;  块级作用域; //var a=1; //var a=2; //alert(a); //可以重复声明 //let a=1; //let a=2; //alert(a);//不可以重复声明 const a=1; const a=2; alert(a

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

声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什么会有这个新特性,这更于理解. 所以,后续不会再写个关于 ES6 系列的文章了,就在这篇里大概的列举一下,大体清楚都有哪些新特性就好了,以后需要用时再去翻一翻阮一峰的书. 正文-ES6新特性 ES6 新标准规范相比于 ES5 旧标准规范中,无非就三个方面的改动:新增.更新.废弃. 由于更新和废弃需要

ES6新特性三: Generator(生成器)函数详解

本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改变. ② 写法: function* f() {} ③ 作用:就是可以完全控制函数的内部状态的变化,依次遍历这些状态. ④ 运行过程:当调用Generator函数的时候,该函数并不执行,而是返回一个遍历器(可以理解成暂停执行).通过调用next()开始执行,遇到yield停止执行,返回一个value

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

对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() 方法,我们先来看一下 Object.assign() 方法: Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象.如下: const target = { a: 1, b: 2 }; const source = { b: 4, c: 5

H5,C3,ES6新特性

H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其他设备的解析 便于团队开发和维护 2.表单新特性 3.多媒体视频(video)和音频(audio) 4.web存储 sessionstorage:关闭浏览器清空数据,储存大小约5M. localstorage:永久生效,存储大小20M,多窗口下都可以使用 都只能储存字符串 C3的新特性 1.选择器: