ECMAScript6-let和const命令
▓▓▓▓▓▓ 大致介绍
ES6是下一代的JavaScript语言的标准,目标是让JavaScript可以用来编写大型的复杂程序,成为企业级开发语言,要查看浏览器对ES6的支持程度可以用阮一峰大佬写的工具ES-Checker
安装:(需要安装npm(心累),推荐用cnpm)
npm install -g es-checker
es-checker
效果(有具体的支持情况):

▓▓▓▓▓▓ let
let命令,和var的作用一样,都是用来声明变量,只是let命令只在所在的代码块内有效
经典的例子:
var a = [];
for(var i=0;i<10;i++){
a[i] = function(){
console.log(i);
}
}
a[4](); //
console.log(i); //
经典的例子,就不赘述,这里a数组都是引用的同一个i
改用 let:
var a = [];
for(let i=0;i<10;i++){
a[i] = function(){
console.log(i);
}
}
a[4](); //
console.log(i); // ReferenceError: i is not defined
这里i用let声明,就只在本次循环中存在,每次循环都会创建一个i
注意:在for循环中,循环语句是一个作用域,而循环体内部又是一个子作用域
例如:
for(let i=0;i<3;i++){
let i = 'abd';
console.log(i);
}
//abd
//abd
//abd
可以看出循环体内的i和循环语句中的i是分离的
▓▓▓▓▓▓ let的特点
1、不存在变量提升
console.log(a); //undefined
var a = '123'; console.log(b);
let b = '123'; //ReferenceError: b is not defined
2、暂时性死区
如果在一个块级作用域内有let命令,那他声明的变量就绑定这个块级作用域,不受外部的影响
var a = '123';
if(true){
a = '456';
console.log(a); //ReferenceError: a is not defined
let a;
console.log(a); //undefined
}
ES6明确规定,如果区块中存在let或者const命令,这个区块对这些命令声明的变量,从一开始就形成封闭作用域,凡是在声明之前使用这些变量都会报错
这里a是用let声明的,所以在let声明之前使用a都会报错
3、不能重复声明
let不允许在同一个作用域内,声明同一个变量
//报错
{
var a = '123';
let a = '456';
} //报错
{
let a = '123';
var a = '456';
} //报错
{
let a = '123';
let a = '123';
}
注意:在函数内不能重复声明参数
//报错
function test(target) {
let target;
} //不报错
function test(target){
{
let target;
}
}
在第二个函数里不报错,是应为{}中时一个新的子作用域,和参数target不是在同一个块内了
▓▓▓▓▓▓ 块级作用域
let为JavaScript新增了块级作用域
使用var是没有块作用域概念的
var a = '123';
if(true){
var a = '456';
}
console.log(a); //
使用let就有了块作用域
let a = '123';
if(true){
let a = '456';
}
console.log(a); //
外层的代码块不受内层代码块的影响
▓▓▓▓▓▓ 块级作用域和函数声明
ES5规定函数只能在顶层作用域和函数作用域中声明,不能在块作用域中声明
ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
例如:
function f(){
console.log('out');
}
(function(){
if(false){
function f(){
console.log('in')
};
};
f();
}());
在ES5中结果是 'in'。就是函数声明提升,不在多赘述
在ES6中,理想的结果是'out',但是在浏览器中运行时,却会报错,这是为什么?因为如果这么突兀,那么老的代码就会出现很多的问题,所以,ES6规定浏览器可以有自己的的行为方式
1、允许在块级作用域内声明函数。
2、函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
3、同时,函数声明还会提升到所在的块级作用域的头部。
注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。
在ES6中实际执行的代码是
function f(){
console.log('out');
}
(function(){
var f = undefined;
if(false){
function f(){
console.log('in')
};
};
f();
}());
注意:ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。
// 不报错
'use strict';
if (true) {
function f() {}
} // 报错
'use strict';
if (true)
function f() {}
▓▓▓▓▓▓ const命令
const声明一个只读的常量,一旦声明,常量的值就不能改变。所以在使用const时,一旦声明就要立即初始化
const和let一样,只存在与本块作用域中,没有声明提升,存在暂时性死区,不可重复声明
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
例如:
const a = {
id: 1,
name:'qqqq'
};
a.id = 2;
a = {}; //报错
参考资料:
ECMAScript6-let和const命令的更多相关文章
- ECMAScript6 入门-let与const命令
块级作用域 1:let命令声明的变量只在let命令所在的代码块有效--简而言之 大括号既是代码块,也就是说存在块级作用域了. { let a =10; var b =1; } a // Referen ...
- ECMAScript6-let与const命令详解
前言 <ECMAScript入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript6新引入的语法特性. let和const命令,是第一章开始介绍,也是比较基础的知识. ...
- es6学习笔记(1) let和const命令详解
let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...
- let和const命令//////////////////////z
let和const命令 let命令 块级作用域 const命令 全局对象的属性 let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的 ...
- ES6之let(理解闭包)和const命令
ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,E ...
- ECMAScript 6入门 - let和const命令
详细学习链接: http://es6.ruanyifeng.com/#docs/let let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命 ...
- ES6 入门系列 - let 和 const 命令
let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...
- ES6 之 let和const命令 Symbol Promise对象
ECMAScript 6入门 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了. (2016年6月,发布了小幅修订的<ECMASc ...
- let和const命令
let命令 1.let用来声明变量,类似于var,但只在代码块内有效. { let a = 1; var b = 2; } console.log(a); //a is not defined con ...
随机推荐
- SQL2012还原数据库操作在本地服务器上操作和用别的电脑远程连接到服务器进行操作的文件路径差异
在数据库服务器上想还原一个数据库到某个备份文件时期的,服务器的数据库文件本身是保存在 D:\DEVDB目录 通过开发电脑上的MS manager来连接数据库服务器操作还原 虽发现文件卡项上,原始文件名 ...
- MVC View显示详解(RenderBody,RenderPage,RenderSection,Partial)
一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...
- ASP.NET Core中的缓存[1]:如何在一个ASP.NET Core应用中使用缓存
.NET Core针对缓存提供了很好的支持 ,我们不仅可以选择将数据缓存在应用进程自身的内存中,还可以采用分布式的形式将缓存数据存储在一个“中心数据库”中.对于分布式缓存,.NET Core提供了针对 ...
- windows 下 多版本nodejs切换 nvmw
以下教程不适用于nodejs v0.6.5及以下版本 nvmw 下载到本地 Git clone https://github.com/hakobera/nvmw.git 2.设置环境PATH 添加如上 ...
- 【Zookeeper】源码分析之请求处理链(一)
一.前言 前面已经分析了Watcher机制的主要代码,现在接着分析Zookeeper中的请求处理链,其是Zookeeper的主要特点之一. 二.总体框图 对于请求处理链而言,所有请求处理器的父接口为R ...
- HTML学习二
继续上一次的学习: <html> <head> <title>新增雇员</title> <script language="javasc ...
- 一步一步学Python(2) 连接多台主机执行脚本
最近在客户现场,每日都需要巡检大量主机系统的备库信息.如果一台台执行,时间浪费的就太冤枉了. 参考同事之前写的一个python脚本,配合各主机上写好的shell检查脚本,实现一次操作得到所有巡检结果. ...
- Python基础之数据类型
Python基础之数据类型 变量赋值 Python中的变量不需要声明,变量的赋值操作既是变量声明和定义的过程. 每个变量在内存中创建,都包括变量的标识,名称和数据这些信息. 每个变量在使用前都必须赋值 ...
- 规范 : login 对象的account
accountInfo对象是前台pass 给后台,基本上这对象的资源有可能不是完整的. 举个例子:register 需要accountInfo 对象(内容数量是依据项目),但是在login时,不需要给 ...
- VUE2.0实现购物车和地址选配功能学习第五节
第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="c ...