web中let和const的示例分析

这篇文章将为大家详细讲解有关web中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声明出来的变量存的是固定的地址值。

关于"web中let和const的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。