粗看ES6之变量

标签： javascript

var定义变量面临的问题

可以重复定义
无法限制变量不可修改
无块级作用域

ES6变量定义升级

新增let定义变量
新增const定义常量

let特性

有块级作用域
不可重复定义

const特性

有块级作用域
不可重复定义
不可修改

解决的痛点

example1 :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="button" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
  <script>
    /*
    *如下代码如果想做到点击每个按钮弹出当前按钮的索引，
    *用var的话要么就是通过自定义属性，或者用一个自执行函数创造一个作用域
    *但是你把var i=0换成let i=0就能很好的实现你所想要的
    */
    var btnList = document.getElementsByTagName('input');
    var len = btnList.length;
    for(var i=0;i<len;i++){//(var let =0;i<len;i++)
      btnList[i].onclick = function(){
        alert(i);
      }
    }
  </script>
</body>
</html>

测试地址

example2:

    /*
    *在做复杂项目的时候经常会因为重复定义变量导致莫名BUG，
    *但是当你如果把如下代码var换成let来定义，你将会发现控制台会丢给你一个大大的变量
    *已定义的错SyntaxError: Identifier 'a' has already been declared
    */
    var a = 1;
    var a = 2;
    alert(a);

测试地址

example3

    /*
    *当前想固定一个变量为不可变值时，以前是无法实现的
    *但是现在通过const定义的常量如果你再去修改会在控制台报一大错
    */
    const PI = 3.1415926;
    PI = 'aaa';
    alert(PI);

测试地址