粗看ES6之变量

Posted !win !

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了粗看ES6之变量相关的知识,希望对你有一定的参考价值。


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);

测试地址

以上是关于粗看ES6之变量的主要内容,如果未能解决你的问题,请参考以下文章

粗看ES6之面向对象写法

学习es6之(变量的解构赋值)

ES6 之 解构赋值

ES6学习笔记之变量声明let,const

ES6 之 let和const块级作用域

ES6 之 数组的解构赋值