你真的懂let和const吗?

  1. 块级作用域

在ES6之前我们脑海里应该只存在全局作用域和函数级作用域,没有块级作用域。那么为什么要引入块级作用域呢?

  • 避免外层变量被覆盖
var str = "hello";
function d() {
  console.log(str);
  if (false) {
    var str = 'world';
  }
}
d();//undefined

相信很多刚入门的同学看到上述代码会有所不解,其实在全局作用域str变量已经被声明且复制,为什么我函数里面访问不到呢。这里就牵扯到变量提升和函数级作用域的概念。上述代码其实等同于下放代码,当函数被执行的时候生成了一个新的作用域也就是函数作用域,js引擎会把变量声明提到方法体的最前面,大家可以看到只是声明了并没有赋值。所以就是 undefined。

var str = "hello";
function d() {
  var str ;
  console.log(str);
  if (false) {
    str = 'world';
  }
}
d();//undefined
  • 循环变量污染全局变量
var str = 'hello';
for (var i = 0; i < str.length; i++) {
  console.log(str[i]);
}
console.log(i); // 5

很多同学面试的时候可能会遇到上面类似的代码,疑惑点应该在为什么会打印出来为什么会是5,同样的道理代码如同下方。变量会被提升,所以在循环结束之后i就被累加到了5.

var str = 'hello';
var i;
for ( i = 0; i < str.length; i++) {
  console.log(str[i]);
}
console.log(i); // 5

es6的let和const声明符,是不存在变量提升的;同时也只在块级作用域生效。

这个答案应该很明显了吧

var str = "hello";
function d() {
  console.log(str);
  if (false) {
    let str = 'world';
  }
}
d();
  1. 暂时性死区MDN

什么是暂时性死区呢?很多人可能很迷惑。那就听我娓娓道来,如果说我们使用了let和const命令,作用域内会对这些命令声明的变量,在它的声明周期内形成一种封闭作用域。这在语法上,称为“暂时性死区”。代码展示如下:

if (true) {
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError
  let tmp;
  console.log(tmp); // undefined
  tmp = 123;
  console.log(tmp); // 123
}

因为let和const声明是不会被提升的,所以为了保障声明的有效性,js的解释引擎会对变量所处的块级作用域形成一种保护,因此在声明之前使用会有语法错误,是不被允许的。

不能重复声明

function de(){
	var a = "1";
	var a = "2";
	console.log(a);
}
de()//不报错

function de(){
	var a = "1";
	let a = "2";
	console.log(a);
}
de()//报错

function de(){
	let a = "1";
	let a = "2";
	console.log(a);
}
de()//报错

相信大家一般不会声明重复变量编码,所以在这里就不做解释了。如果大家感兴趣可以自己研究或者来现场一起学习。

  1. const常量

const声明符的大多特性和let相同,这里就不多做解释了。大家都知道const是声明常量的,一但变量被声明成常量它就不能再被继续修改了。大家要注意的是这里变量不可被修改的是存储的地址值不可被修改,意思就是简单类型的数据是不能修改的。复合类型的数据(主要是对象和数组)const只能保证这个指针是固定的,而这个具体的对象实例包含的属性是可以被修改的。看看代码我们可能会更清楚:

//实例一
const a = "hello";
console.log(a);//"hello"

a = "world";//Assignment to constant variable

//实例二
const obj = {};
obj.name = "jack";
console.log(obj.name);//"jack"

obj = {};//Assignment to constant variable.

//实例三
const a = [];
a.push('Hello');
console.log(a); //[ 'Hello' ]
a.length = 0;
a = ['Dave'];    // Assignment to constant variable.

正如大家所看到的字符串a被复制后就不能在修改,而对象和数组是可以改变它里面的元素的,但是不能给重新复制一个新的对象实例。由此就可以断定const声明出来的变量存的是固定的地址值。

  • 关于es6还有更多的知识点,请关注我接下来的文章。如发现不当之处欢迎加微信(xiaoqiang0672)批评。

原文发布于微信公众号 - 思梦PHP(sm_php)

原文发表时间:2018-03-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Python编程中的反模式

云豆贴心提醒,本文阅读时间7分钟 这篇文章收集了我在Python新手开发者写的代码中所见到的不规范但偶尔又很微妙的问题。 本文的目的是为了帮助那些新手开发者渡...

36070
来自专栏北京马哥教育

深入 Python 字典的内部实现

字典是通过键(key)索引的,因此,字典也可视作彼此关联的两个数组。下面我们尝试向字典中添加3个键/值(key/value)对: 这些值可通过如下方法访问: 由...

410150
来自专栏逸鹏说道

Python3 与 C# 基础语法对比(String专栏)

Python3 与 C# 基础语法对比:https://www.cnblogs.com/dotnetcrazy/p/9102030.html

13720
来自专栏北京马哥教育

Python编程中的反模式

这篇文章收集了我在Python新手开发者写的代码中所见到的不规范但偶尔又很微妙的问题。

12030
来自专栏PHP实战技术

你真的懂let和const吗?

在ES6之前我们脑海里应该只存在全局作用域和函数级作用域,没有块级作用域。那么为什么要引入块级作用域呢?

432110
来自专栏Deep learning进阶路

C++随记(二)---动态分配内存问题(1)

C++随记(二)---动态分配内存问题(1) 面向对象的编程的一个特点就是在运行阶段(而不是编译阶段)进行决策。运行阶段决策提供了灵活性,可以根据当时的情况进行...

20500
来自专栏前端桃园

ES6之块级作用域

16340
来自专栏IT派

程序员必知的 Python 陷阱与缺陷列表

我个人对陷阱的定义是这样的:代码看起来可以工作,但不是以你“想当然”的方式。如果一段代码直接出错,抛出了异常,我不认为这是陷阱。比如,Python程序员应该都遇...

12840
来自专栏吴裕超

es6 Object的几个新方法

ES5 的 Object.preventExtensions 则可以阻止给对象添加新属性

11030
来自专栏noteless

java集合框架容器 java框架层级 继承图结构 集合框架的抽象类 集合框架主要实现类

java集合框架  框架设计理念  容器 继承层级结构 继承图 集合框架中的抽象类  主要的实现类 实现类特性   集合框架分类 集合框架并发包 并发实现类

17820

扫码关注云+社区

领取腾讯云代金券