声明后未赋值，表现相同

(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. Tornado教程目录

    第一章:引言 第二章:表单和模板 第三章:模板扩展 第四章:数据库 第五章:异步Web服务 第六章:编写安全应用 第七章:外部服务认证 第八章:部署Tornado

  3. [OSG]OSG的相关扩展

    参考:osg官网 http://www.osgchina.org/index.php?view=article&id=176 http://trac.openscenegraph.org/pr ...

  4. 前端引用公共html模块方案

    最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头.页尾等,这样就导致一个地方的修改要在 ...

  5. django使用bootstrap快速美化 admin后台

    使用django-admin-bootstrappe快速美化后台 两步: 1.pip install django-admin-bootstrapped  安装应用 2.在setting.py里面添加 ...

  6. New Concept English Two 6 13

    $课文11 礼尚往来 105. I was having dinner at a restaurant when Tony Steele came in. 我正在一家饭馆吃饭,托尼.斯蒂尔走了进来. ...

  7. BZOJ2121: 字符串游戏（DP）（字符串删单词，求最多可以删去多少）

    2121: 字符串游戏 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 672  Solved: 376[Submit][Status][Discuss ...

  8. .Net调用Java端带有WS-Security支持的Web Service各方案实战【转】

    原文:http://www.xuebuyuan.com/641669.html 到现在为止,我们AEP平台已经发布很长一段时间了,也有很多ISV接入并上线了,就语言而言,目前主要有三类:Java..N ...

  9. 结构化日志类库 ---- Serilog库

    在过去的几年中,结构化日志已经大受欢迎.而Serilog是 .NET 中最著名的结构化日志类库 ,我们提供了这份的精简指南来帮助你快速了解并运用它. 0. 内容 设定目标 认识Serilog 事件和级 ...

  10. An internal error occurred during: "Android Library Update".

    打开 proj.android下的.cproject文件,把多余的CConfiguration配置节删掉,只留第一个就行了.