谈谈神秘的ES6——（二）ES6的变量

我们在《零基础入门JavaScript》的时候就说过，在ES5里，变量是有弊端的，我们先来回顾一下。

首先，在ES5中，我们所有的变量都是通过关键字var来定义的。而这种变量呢，是存在弊端的，1.可重复声明；2.无法限制修改；3.没有块级作用域。而这三个弊端，可能会导致变量使用混乱、或者变量值受到污染。举一个最简单的例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script type="text/javascript">
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            console.log(i);//都是5
        }
    }
</script>

</html>

上边这个例子呢，很明显，这个i呢，我们在点击时，i其实已经循环完毕，在ES5中，想要解决这个问题，就只能用闭包了。关于闭包，等我们讲JS进阶的时候，再详细讲一讲。

<script type="text/javascript">
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = (function (j) {
            return function () {
                console.log(j);
            }
        })(i)
    }
</script>

而在ES6里边呢，我们上述的三个弊端，已经有了比较好的解决方案。

在ES6中，首次提出了let和const两个关键字，let用来声明变量，不可重复声明，可以修改，有块级作用域；const用来声明常量，不可修改，同样不可重复声明，有块级作用域。

let a = 10;
let a = 20; //Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 10;
const b = 20; //Uncaught SyntaxError: Identifier 'b' has already been declared

const c = 10;
c = 20;//Uncaught TypeError: Assignment to constant variable.

好了，这节课就说到这里，下一节课，我们来讲讲函数。

如果想跟着振丹继续学习，可以微信关注【振丹敲代码】（微信号：JandenCoding）

新博文微信同步推送，还附有讲解视频哦~

也可直接扫描下方二维码关注。

来源：oschina

链接：https://my.oschina.net/u/3881109/blog/1861130

标签

变量