声明后未赋值，表现相同

(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>

var和let示例的更多相关文章

  1. ES6中的var let const应如何选择

    javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...

  2. 【转载】在Javascript中 声明时用"var"与不用"var"的区别

    原文链接:http://www.2cto.com/kf/201204/128406.html[侵删]   Javascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有 ...

  3. 数据可视化之DAX篇（九） 关于DAX中的VAR,你应该避免的一个常见错误

    https://zhuanlan.zhihu.com/p/67803111 本文源于微博上一位朋友的问题,在计算同比增长率时,以下两种DAX代码有什么不同? -------------------- ...

  4. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  5. Linux Shell 截取字符串

    Linux Shell 截取字符串 shell中截取字符串的方法很多 ${var#*/} ${var##*/} ${var%/*} ${var%%/*} ${var:start:len} ${var: ...

  6. FreeBSD_11-系统管理——{Part_7 - AUDIT}

    相关概念 EVENT 事件,审计系统计录的对象,包括用户登陆.网络与文件操作等各方面 CLASS 类,对具有相同或类似属性的事件的分組 RECORD 记录,审计系统生成的日志中的每一条信息 TRAIL ...

  7. 转载-------makefile 使用总结

    转载自:http://www.cnblogs.com/wang_yb/p/3990952.html 1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的 ...

  8. makfile

    1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, 那很多项目中各种库和代码之 ...

  9. linux下使用Apache+php实现留言板功能的网站

    一.首先我们的linux服务器上要安装Apache和php 请参考:http://www.cnblogs.com/dagege/p/5949620.html 二.关闭防火墙服务,关闭selinux 请 ...

随机推荐

  1. Vi/Vim三种模式

    命令模式,底线命令模式,输入模式:

  2. SpringBoot创建多模块方式以及打包方式

    springboot重构多模块的步骤 模型层:model 持久层:persistence 表示层:web 步骤: 正常创建一个springboot项目 修改创建项目的pom文件,将jar修改为pom ...

  3. PHPUnit简介及使用（thinkphp5的单元测试安装及使用）

    PHPUnit简介及使用(thinkphp5的单元测试安装及使用) 一.总结 一句话总结:直接google这个phpunit(how to use phpunit),然后去官网看使用样例和手册,那些英 ...

  4. Python 实现图片上表格的写入

    直接上代码:import matplotlib.pylab as pltimport numpy as npplt.figure()axes=plt.gca()y= np.random.randn(9 ...

  5. Mybatis整合Spring -- typeAliasesPackage

    Mybatis整合Spring 根据官方的说法,在ibatis3,也就是Mybatis3问世之前,Spring3的开发工作就已经完成了,所以Spring3中还是没有对Mybatis3的支持. 因此由M ...

  6. Hibernate主键生成器

    主键生成器负责生成数据表记录的主键:increment:为long,short或者int类型主键生成唯一标识.只有在没有其他进程往同一张表中插入数据时才能使用.在集群下不能使用! identity:在 ...

  7. HDU 4751 Divide Groups (2-SAT)

    题意 给定一个有向图,问是否能够分成两个有向完全图. 思路 裸的2-sat--我们设一个完全图为0,另一个完全图为1,对于一个点对(u, v),如果u.v不是双向连通则它们两个不能在一组,即u和v至少 ...

  8. linux中安装tomcat

    01.去官网下载指定的安装包http://tomcat.apache.org/download-70.cgi 链接地址 02.在software目录下 使用命令wget 刚才复制的地址即可 03.使用 ...

  9. Centos7 防火墙常用命令 开启 关闭防火墙

    如果你的系统上没有安装使用命令安装 #yum install firewalld  //安装firewalld 防火墙 开启服务 # systemctl start firewalld.service ...

  10. L181 The microscopic structure of a cat’s tongue helps keep its fur clean

    T.S. eliot's mystery cat, Macavity, besides being a criminal mastermind able to evade the combined r ...