zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    vue.js报错:Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    安装node
    java四大特性理解(封装继承多态抽象)
    在成功道路上,你要百败百战
    职场观察:高薪需要什么?
    jBPM4工作流应用开发指南
    WebService技术简介
    如何获得Android设备名称(ADB命令详细介绍)
    how-to-fix-fs-re-evaluating-native-module-sources-is-not-supported-graceful
    QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法
  • 原文地址:https://www.cnblogs.com/fmgao-technology/p/9272512.html
Copyright © 2011-2022 走看看