声明后未赋值，表现相同

(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. pairs 和 ipairs异同

    同:都是能遍历集合(表.数组) 异:ipairs 仅仅遍历值,按照索引升序遍历,索引中断停止遍历.即不能返回 nil,只能返回数字 0,如果遇到 nil 则退出.它只能遍历到集合中出现的第一个不是整数 ...

  2. [转][osg]osg渲染引擎框架图，流程图（根据《最长一帧》整理）

    转自:http://m.blog.csdn.net/article/details?id=49679731 本文参考<<osg最长一帧>>, <<OpenScene ...

  3. Java Spring-JdbcTemplate增删改查

    2017-11-11 21:13:13 Spring 框架中提供了对持久层技术支持的类 : JDBC : org.springframework.jdbc.core.support.JdbcDaoSu ...

  4. n人围圈报数,报3出圈

    题目:有n个人围成一圈,顺序排号.从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位. Scanner scanner = new Scanner(System. ...

  5. 006PHP文件处理—— 目录操作 删除目录 删除置顶类型文件

    <?php /** * 目录操作 删除目录 删除置顶类型文件 */ //echo rmdir('61') or die('目录删除失败'); //删除一个目录中有其他文件的内容的方法: //第1 ...

  6. web service与EJB的区别

    1.WebService可以说是跨平台的,因为它采用的是XML技术,说穿了就是把你的请求按照该WebServece的标准将参数传过去,然后服务器返回结果,当然了最重要的是参数的传递和结果的返回都是采用 ...

  7. Python 编程核心知识体系-基础|数据类型|控制流（一）

    Python知识体系思维导图: 基础知识 数据类型 1.序列 2.字符串 3.列表和元组 4.字典和集合 循环 & 判断

  8. redux-thunk中间件源码

    浅析redux-thunk中间件源码 大多redux的初学者都会使用redux-thunk中间件来处理异步请求,其理解简单使用方便(具体使用可参考官方文档).我自己其实也一直在用,最近偶然发现其源码只 ...

  9. 實驗項目wordcount

    wordcount 1.设计思路 第一步 :主函数参数使用命令行参数,定义一个文件指针fp. 第二步:判断能否用只读的形式打开命令行指针中的文件,并让指针指向打开函数,若不能则输出不能读取文件,否则下 ...

  10. 在SSH项目中实现分页效果

    在实现分页的时候,我使用的是数据库下面的User表,实现的效果是通过分页查询 能够将表中的数据分页显示,点击相关的按钮实现:首页.上一页.下一页.末页的显示 1新建一个dynamic web proj ...