初识ES6入门笔记（一）let 与 const

Bivesou

于 2019-09-04 16:12:06 发布

阅读量159

点赞数 1

分类专栏： ES6 文章标签： ES6

本文链接：https://blog.csdn.net/Bivesou/article/details/100539032

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ES6简介

ES6全称ECMAScript 6.0，是JavaScript（js）的下一个版本标准，2015年6月发布。
ES6完善了JavaScript许多先天的不足，比如类。以及ES6有着更加简洁的新语法特性。但目前有些浏览器的JavaScript版本并不支持ES6，但大多数高版本的浏览器也是支持ES6的，不过只实现了 ES6 的部分特性和功能。

ES6 let 与 const

在JavaScript中我们知道有一关键字 var ，但是这个关键字声明出来的变量有一个非常神奇的特性，在var关键字的声明下变量可以被重复声明！什么意思呢。我们来看代码：

var a = 0;
var a = 3;
console.log(a);

我们运行此代码在浏览器中并不会报错，但a到底打印的是第一个a还是第二个a呢？
在这里插入图片描述
此时打印为3，因为第二个a会把第一个a覆盖。
而且var声明下的变量还有很多不方便的现象发生，为了避免这些情况，在ES6中新加两个非常重要的JavaScript关键字 let 与 const 接下来我们开始一起来看看这两个关键字的用处：
let声明的变量拥有下面几个特性：
1.不可重复声明
2.只在当前代码块内有效
3.不存在变量提升
const声明的变量拥有下面几个特性：
1.不可重复声明
2.常量不可修改
3.不存在变量提升

let不可重复声明

我们在上面var的例子中可以发现var关键字声明下的变量是可以被重复声明的，当我们在开发时很有可能不注意的情况下声明了两个相同名称的变量，导致前面的变量被覆盖而编译器不报错，这样的错误是非常难找到原因的，当我们使用let时我们便不用当心此类事情的发生，接下来我们来看代码：

let a = 1;
let a = 2;
//此时编译器将会报错 Identifier 'a' has already been declared
var b = 3;
var b = 4;
//用var声明的变量不会报错 b=4

let只在当前代码块内有效

在var声明下的变量有效范围是函数，也就是说在当前函数下都是有效存在的，而相比之下let只在当前的代码块中有效

<body>
    <input type="but" value="按1">
    <input type="but" value="按2">
    <input type="but" value="按3">
<script>
    var but=document.getElementsByTagName('input');
    for(var i = 0;i<but.length;i++){
        but[i].onclick=function(){
            alert(i)
        }
    }
</script>
</body>

在此代码中我们用了for循环来看看var与let的不同，因为var的有效范围为函数，而且可以重复声明导致覆盖，所有打印处理的 i 都会是3，大家可以复制在自己的代码中然后再运行试一下。
按原来的方式我们会在外层在给它一个函数就可以解决这个问题：

<body>
    <input type="but" value="按1">
    <input type="but" value="按2">
    <input type="but" value="按3">
<script>
    var but=document.getElementsByTagName('input');
    for(var i = 0;i<but.length;i++){
	    (function (i){
	        but[i].onclick=function(){
	            alert(i);
	        };
			})(i);
    }
</script>
</body>

但现在我们知道了有let这个关键字这个关键字的作用域为所在当前代码块，所以我们只需要把var关键字更换为let就可以解决这个问题了

<body>
    <input type="but" value="按1">
    <input type="but" value="按2">
    <input type="but" value="按3">
<script>
    var but=document.getElementsByTagName('input');
    for(let i = 0;i<but.length;i++){
        but[i].onclick=function(){
            alert(i)
        }
    }
</script>
</body>

这样就可以完美的运行出我们想要的结果了。

let不存在变量提升

我们知道在var关键字的声明下会有变量提升的情况出现，也就是如下情况：

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

此时编译器并不会报错，而是打印出 undefined，这是因为用var关键字声明的变量会出现变量提升，会相当于如下代码：

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

因此a会出现已经声明但未赋值的情况。
但如果我们用let来声明变量就不会有这个情况的发生：

console.log(a); //ReferenceError: a is not defined。
let a = 1;

此时会出现：ReferenceError: a is not defined。
变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

const 常量不可修改

const其他两个特性可参考let，我们再来说说const常量不可修改这个特性：
const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
废话不多说我们直接看代码：

const Pi = 3.14159;

这样我们便生成出一个常量Pi，当我们试图去修改这个常量时，系统会提示我们：

const Pi =3.14159;
Pi = 1;

在这里插入图片描述
当我们使用const声明了一个变量但没用赋值会怎么样呢：

const Pi;

在这里插入图片描述
这时会提示我们：Missing initializer in const declaration
所以const常量一旦声明必须初始化

暂时性死区

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量之前使用它会报错。这被称为暂时性死区。

Bivesou

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识ES6入门笔记（一）let 与 const

ES6简介ES6全称ECMAScript 6.0，是JavaScript（js）的下一个版本标准，2015年6月发布。ES6完善了JavaScript许多先天的不足，比如类。以及ES6有着更加简洁的新语法特性。但目前有些浏览器的JavaScript版本并不支持ES6，但大多数高版本的浏览器也是支持ES6的，不过只实现了 ES6 的部分特性和功能。ES6 let 与 const在JavaSc...
复制链接

扫一扫

专栏目录