您现在的位置:首页 >> 前端 >> 内容

ES6-let与const

时间:2017/9/9 9:09:00 点击:

  核心提示:1.let命令基本概念let语法类似于var,不同点在于let定义的变量只在定义它的代码块中有效。{var a = 1;let b = 2;}a // 输出1b // 报错Uncaught Refer...

1.let命令

基本概念

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

{

var a = 1;

let b = 2;

}

a // 输出1

b // 报错Uncaught ReferenceError: b is not defined

var定义的变量要么为全局变量,要么是在函数之中的局部变量。上述代码块中的a即为全局变量,所以在代码块外也可调用此变量。而在代码块外调用变量b报错可证明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在未定义之前调用打印b的代码会报错,表明使用let命令定义的变量是不存在变量提升的。

b = 3;

let b = 2;

//Uncaught ReferenceError: b is not defined

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

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

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

重复定义检查

相同作用域内,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(vari=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循环中的变量i是var定义的,在全局范围内都有效,而每个标签被点击所执行的函数内部的i都指的是这个全局的i。而使用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。

Tags:ES S6 6L LE 
作者:网络 来源:csdnxcn的博客