ES6-let 与 const


1.let命令 


基本概念

let语法类似于var,不同点在于let定义的变量只在定义它的代码块中有效。

{
var a = 1;
let b = 2;
}
a // 输出1
b // 报错 Uncaught ReferenceError: b is not defined

var 定义的变量要么为全局变量,要么是在函数之中的局部变量。上述代码块中的 即为全局变量,所以在代码块外也可调用此变量。而在代码块外调用变量 b 报错可证明 只在定义它的代码块中有效。


不存在变量提升和暂时性死区

ES6 中的 let 命令是不存在变量提升”现象的,变量提升指的是在变量未经定义之前便可调用。

console.log(a);
var a = 1;
// undefined


console.log(b);
let b = 2;
// Uncaught ReferenceError: b is not defined

上述代码,使用 var 定义的变量 a 发生变量提升,在脚本程序运行时变量已经存在了,只是还未定义值,所以输出 undefined。而变量 b 在未定义之前调用打印 的代码会报错,表明使用let 命令定义的变量是不存在变量提升的。

b = 3;
let b = 2;
// Uncaught ReferenceError: b is not defined

当你输入上述代码却得到报错的结果是不是很疑惑呀,为什第一句代码没有把变量 b 定义为一个全局变量呢?

没错!“罪魁祸首” 就是 let 命令,因为从当前作用域的头部一直到 let 命令声明变量 之前,b都是不可用的,这在语法上称为暂时性死区(temporal dead zone)

ES6中规定暂时性死区letconst不出现变量提升,能够有效地避免在声明变量之前就使用它。


重复定义检查

相同作用域内,var 可以让同一个变量名在同一个作用域里被定义多次,而 let 则不允许。以下是几个例子。

{
let a = 1;
var a = 2;
}


{
let b = 2;
let b =3;
}


function test(argument){
let argument = 4;
}
test();

上述三块代码均会报出变量名已经声明的错误。


let 用途

下面考虑一种需求:需要动态往HTML中一个ID为“list”的标签中插入十个li标签,并且每个li标签都带有一个提示本标签被点击的点击事件。

var list = document.getElementById('list');
for( let i=1;i<=10 ;i++){
let item = document.createElement('li');
item.appendChild(document.createTextNode('Item '+i));
item.onclick = function(e){
console.log('Item '+i+' is clicked.');
};
list.appendChild(item);
}

上述代码利用 for 循环完成了上述需求。这时候你会想这个和 let 命令有什么关系,我换成 var 岂不是也能实现。下面我们来检验一下换成 var 可行吗?

var list = document.getElementById('list');
for( var i=1;i<=10 ;i++){
let item = document.createElement('li');
item.appendChild(document.createTextNode('Item '+i));
item.onclick = function(e){
console.log('Item '+i+' is clicked.');
};
list.appendChild(item);
}

当我们点击上述代码生成的 li 标签时,会发现无论点击哪个都会打印出“Item 11 is clicked.”。下面我来解释一下为什么会出现这种情况,因为在 for 循环中的变量 var定义的,在全局范围内都有效,而每个标签被点击所执行的函数内部的 都指的是这个全局的 。而使用 let 命令时,循环体的每一次执行都产生一个作用域,每次绑定点击事件时,函数都能保留当前计数器的数值和引用。

注意:
let、const 命令定义的全局变量不属于顶层对象的属性。
let a = 1;
window.a // undefined


2.const命令


基本概念

const 命令用来定义常量,一旦声明,不可改变。这也意味着声明变量的同时就需要进行初始化,不可留到以后赋值。

const Max_Age;
Max_Age = 100;
// Uncaught SyntaxError: Missing initializer in const declaration

const 命令与 let 命令一样:
1.只在声明的块级作用域有效;
2.常量不可提升,同样存在暂时性死区;
3.不可重复声明。


原理

变量与内存之间的关系由三部分组成:变量名、内存绑定及内存地址。const 的实现原理便是在常量名和内存地址之间创建一个不可变的绑定。在某些情况下,并非是值不可变的。对于基本类型(数值,字符串等)而言,常量指向的内存地址便保存着实际值。而对于对象、数组等引用类型,常量指向的只是一个指针,const 只能保证这个指针是不可变的,如下:

const obj = {};
obj.item = 456;
obj.item; // 输出456
obj = {}; // Uncaught TypeError: Assignment to constant variable.

冻结对象

上述说明当用 const 定义对象时,并不能保证值不可变,下面我们就介绍如何获取值不可变的对象。除了冻结对象,如果对象的属性指向的还是对象,那么这个属性也该被冻结。如下代码便可获取值不可变的对象。

const deepFreeze = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach((key,i) => {
if(typeof obj[key] === 'object')
{ deepFreeze(obj[key]);}
});
};


3.建议

1. 一般情况下,使用 const 命令对值进行存储;
2. 当一个值容器存储的值确认会被改变时才使用 let 进行定义;
3. 不再使用 var

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • let和const let命令 let用法类似var,但是所声明的变凉,只在let命令所在的代码块内有效 for循...
    李诺哦阅读 360评论 0 1
  • let 和 const 命令 let 命令 块级作用域 const 命令 顶层对象的属性 gl...
    安小明阅读 978评论 0 0
  • let 命令 块级作用域 const 命令 顶层对象的属性 global 对象 let 命令 基本用法 ES6 新...
    嘉奇呦_nice阅读 1,623评论 0 2
  • let 命令 块级作用域 const 命令 顶层对象的属性 global 对象 let 命令 基本用法 ES6 新...
    卞卞村长L阅读 587评论 0 0
  • var缺陷 1.重复声明 2.没有块级作用域,只有函数作用域 let特性 1.不能重复声明 2.作用域为块级 co...
    余生筑阅读 323评论 0 0