var和let示例

声明后未赋值，表现相同

(function() {
      var varTest;
      let letTest;
      console.log(varTest); //输出undefined
      console.log(letTest); //输出undefined
    }());

使用未声明的变量，表现不同:

(function() {
  console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
  console.log(letTest); //直接报错：ReferenceError: letTest is not defined

  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
}());

重复声明同一个变量时，表现不同：

(function() {
      "use strict";
      var varTest = 'test var OK.';
      let letTest = 'test let OK.';

      var varTest = 'varTest changed.';
      let letTest = 'letTest changed.'; //直接报错：SyntaxError: Identifier 'letTest' has already been declared

      console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
      console.log(letTest);
    }());

变量作用范围，表现不同：

(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }

  console.log(varTest); //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
  console.log(letTest); //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());

备注：

使用 let 语句声明一个变量，该变量的范围限于声明它的块中。可以在声明变量时为变量赋值，也可以稍后在脚本中给变量赋值。

使用 let 声明的变量，在声明前无法使用，否则将会导致错误。

如果未在 let 语句中初始化您的变量，则将自动为其分配 JavaScript 值 undefined

实例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>建议留言板</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;

        }

    </style>
</head>
<body>
    <h1>简易留言板</h1>
    <div id="box">

    </div>
    <textarea name="" id="msg" cols="30" rows="10"></textarea>
    <input type="button" id="btn" value="留言">
    <button onclick="sum()">统计</button>
</body>
<script type="text/javascript">

    var ul = document.createElement("ul");
    var box = document.getElementById("box");
    box.appendChild(ul);

    var btn = document.getElementById("btn");

    var msg = document.getElementById("msg");

    var count = 0;

    btn.onclick = function () {
        var li = document.createElement("li");

        li.innerHTML = msg.value + "<span>&nbsp;&nbsp;&nbsp;X</span>"

        var lis = document.getElementsByTagName("li");
        if(lis.length == 0){
            ul.appendChild(li);
            count ++;
        }else{
            ul.insertBefore(li,lis[0]);
            count ++;
        }
        msg.value = "";

        var spans = document.getElementsByTagName("span");
        // 方法一let：
        // for( let i = 0; i< spans.length; i++){
        //
        //     spans[i].onclick = function () {
        //         ul.removeChild(spans[i].parentNode);
        //         console.log(typeof  this);
        //         // console.log(typeof spans[i]);
        //         count --;
        //     }
        //
        // }
        // 方法二var：
        for( var i = 0; i< spans.length; i++){

            spans[i].onclick = function () {
                ul.removeChild(this.parentNode);
                console.log(typeof  this);
                // console.log(typeof spans[i]);
                count --;
            }

        }

    }

    function sum() {
        alert("一共发布了"+count+"条留言");
    }

</script>
</html>

View Code