在ES6中,增加了2个声明变量的关键字:let 和 const。在这里将详细介绍let与var的区别、Babel对let的处理以及const的简单使用。

1. let

在ES6规范中增加了 let 关键字。let有什么用呢?与var有什么区别呢?

1.1 let 的作用

let,可用于声明一个块级作用域的变量。

如在if()语句内用let声明的变量,不会延伸到if()语句外部。

function foo() {
if (true) {
let x = 1;
}
console.log(x); // error:x is not defined
}
foo();

1.2 let与var的区别

在比较两者区别之前,首先需要了解var的作用域和变量提升:

①var没块级作用域。

②使用var在函数或全局内任何地方声明变量相当于在其内部最顶上声明它,这种行为称为Hoisting(提升)。

了解更多var的知识可访问之前的文章:JavaScript var的作用域和提升

1) 作用域的区别

var:没有块级作用域,因为变量提升的特性,其声明变量的作用域为整个函数或全局范围。

let:拥有块级作用域的特性,其声明的变量作用域范围从声明处一直到当前块级语句(若存在)的结尾,否则会一直延伸到函数结尾(在函数内)或全局结尾。

2) 在全局作用域声明的变量是否作为window对象的成员

var:在全局作用域声明的变量,会作为widnow对象的成员。

let:在全局作用域声明的变量,不会作为window对象的成员。

var x = 1;
let y = 1;
console.log(window.x); // => 1
console.log(window.y); // => undefined:let声明的变量没有附加到window对象上

3) 同级作用域声明同名变量的区别

在在同一个作用域声明2个名称一样的变量时两者的表现:

var:因变量提升特性,声明2个相同的变量没问题。

let:报错,会提示变量已存在。

function foo() {
var x = 1;
let x = 2; // error:Identifier 'x' has already been declared
}
foo();

4) for()循环语句内延迟输出循环变量

在下面代码中使用setTimeout函数延迟输出let和var定义的变量:

function foo() {
for (var x = 0; x < 5; x++) {
setTimeout(function() {
console.log(x); // => 5 5 5 5 5
}, 100);
} for (let y = 0; y < 5; y++) {
setTimeout(function() {
console.log(y); // => 0 1 2 3 4
}, 100);
}
}
foo();

可以看到使用var定义的x变量将会输出5次5,而使用let定义的y变量会依次输出0 1 2 3 4,这是为什么呢?

还是因为var的变量提升特性,第一个循环体的变量x,实际就为1个;而第二个循环体,每循环一次创建一次变量y。

所以上面的代码可转换以下代码:

function foo() {
var x;
for (x = 0; x < 5; x++) {
setTimeout(function() {
console.log(x); // => 5 5 5 5 5
}, 100);
} for (let y = 0; y < 5; y++) {
setTimeout(function() {
console.log(y); // => 0 1 2 3 4
}, 100);
}
}
foo();

1.3 Babel对let的处理

let是属于ES6,当使用Babel将其转换为ES5的代码是时是怎么转换的呢?可得出几种转换场景:

1)在同一作用域范围内,若 let 前面没有用 var 定义过的同名变量时,直接使用 var 代替 let 用于声明变量

2) 在同一作用域范围内,若 let 前面出现过用 var 定义同名变量时,修改 let 声明的变量名,并用 var 代替声明

3) 若在一个循环语句内部,let声明的变量 参与了 延时函数(setTimeout、setInterval)的执行时,那么延时函数会转换一个独立函数

2. const

说明:const用于定义一个常量变量。

2.1 特性

①作用域的范围与let一样,声明前无法使用以const声明的常量。

②同一作用域范围内,const不能声明同名常量。

③const声明的常量不会成为window对象的成员。

④当用const声明的常量为值类型(e.g. String、Number)时,修改此常量的值会报错;但当声明的常量为引用类型(e.g. Array、Object)时,只可以修改此常量的成员。

2.2 示例

1) 修改值类型的常量会报错

const x = 1;
x = 2; // => Uncaught TypeError: Assignment to constant variable.

2) 修改引用类型的常量的成员不会报错

// 1.const声明一个数组
const x = [1, 2, 3];
console.log(x); // => [1, 2, 3]
x[0] = 2; // 修改数组的第一个元素的值
console.log(x); // => [2, 2, 3] // 2.const声明一个对象
const obj = {};
obj.name = 'polk';
console.log(obj.name); // => polk

3. 扩展阅读

let MDN :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

const MDN :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

End
菜单加载中...

JavaScript ES6 let、const的更多相关文章

  1. 我的Vue之旅、02 ES6基础、模块、路径、IO

    自定义模块 为什么要模块?模块化源代码能给我们带来什么好处? 试想一个巨无霸网购平台,在没有模块化的情况下,如果出现bug,程序员就要在几百万行代码里调试,导致后期维护成本上升,为了解决问题,模块化按 ...

  2. JavaScript 变量声明:var、let、const

    1. 概述 1.1 说明 在ES5 声明变量的方法:var命令和function命令. 在ES6 声明变量的方法:var命令.function命令.let命令.const命令.import命令.cla ...

  3. JavaScript中var、let和const的区别(转载)

    一.前言 在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,声明的方式有 var . let . c ...

  4. 【ES6】var、let、const三者的区别

    首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM ...

  5. JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

    JavaScript:学习笔记(7)——VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...

  6. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  7. 浅谈ES6——ES6中let、const、var三者的区别

    在了解let.const.var的区别之前,先了解一些什么是es6 Es6 全称ECMAscript 是JavaScript语言的一个标准,其实Es6本质就是JavaScript的一个版本,为什么叫E ...

  8. ES6 学习笔记(一)let、const与作用域

    一.let命令 1.1用法 1.1.1 let类似于var,但所声明的变量只在let命令所在的代码块有效. 如: { let a = 10 var b = 20 } console.log(b) co ...

  9. ES6学习笔记一:let、const、解构赋值

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7236342.html 感谢阮一峰老师的无私奉献,开源推动世界!教程地址:http://es6.ruanyife ...

随机推荐

  1. Git知识总览(二) git常用命令概览

    上篇博客我们从 git clone 和 git status 两个命令开始,引出了一系列的git操作命令, 请参见:<Git知识总览(一) 从 git clone 和 git status 谈起 ...

  2. NUnit实战,第一个测试类,测试事件触发是否是并行的

    以前测试都是新建一个控制台测试的方式来进行,感觉版本管理啥的非常麻烦.也是非常原始的办法.后来想以前有写过测试单元,不过好久没弄了.Nuget了NUnit后写了正式的第一个测试类. 测试用例: 测试事 ...

  3. apidoc快速生成在线文档,apidoc生成静态文件的生成规则以及原理分析

    在老大的指引下,需要将系统的json文件格式转换成apidoc的json格式,也就是json格式的重组,但是这个apidoc的生成格式是不固定的,因为apidoc有自己一套的生成规则,我需要研究一下是 ...

  4. wifipineapple插件:codeInject的使用

    如果在中间人攻击的时候, 能在用户的网页中插入任意代码, 可以说已经完成一半了 wifipineapple有个codeInject插件, 可以让连上这个网络所有设备浏览网页的时候, 在网页中插入任意h ...

  5. Centos7(Linux)网络配置,自动获取ip地址

    Centos7.0 Vmware 网络桥接配置,利用DHCP自动获取ip地址 首先要将Vmware10.0.3设置为桥接模式. CentOS 7.0默认安装好之后是没有自动开启网络连接的! cd  / ...

  6. C++返回值优化RVO

    返回值优化,是一种属于编译器的技术,它通过转换源代码和对象的创建来加快源代码的执行速度.RVO = return value optimization. 测试平台:STM32F103VG + Keil ...

  7. es5预览本地文件、es6练习代码演示案例

    es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...

  8. 关于ODP.NET连接数监控及相应的windbg分析提示

    1.关于ODP.NET的Windows计数器问题 使用微软的缺省驱动时,可以通过windows性能监视器很方便的监控数据库连接数,选择.NET Data Provider for Oracle/Sql ...

  9. Linux-RED HAT6.8扩容

    项目快上线了,在准生产测试,遇到了一个问题,那就是Linux硬盘资源不够用了,这个问题是当时在装系统的时候,应该装机人员的失误造成的,具体如下: 这个报错原因就是硬盘资源不够用了,使用命令:df  - ...

  10. 树形dp总结

    转自 http://blog.csdn.net/angon823 介绍 1.什么是树型动态规划 顾名思义,树型动态规划就是在"树"的数据结构上的动态规划,平时作的动态规划都是线性的 ...