声明后未赋值，表现相同

(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. vs_u8前缀

    1.ZC: 个人测试下来,VS2015开始 支持 u8前缀. 2.What's New for Visual C++ in Visual Studio 2015 https://msdn.micros ...

  2. IE8 JSON is not defined

    问题原因: 昨天遇到了一个问题.就是用ajax从后台查询数据时,返回信息无法显示,经过提示发现是IE控制台提示: JSON is not defined 错误. 而且这个问题在本人自己的电脑上是不存在 ...

  3. CPU上下文切换详解

    CPU上下文切换详解 原文地址,译文地址,译者: 董明鑫,校对:郑旭东 上下文切换(有时也称做进程切换或任务切换)是指CPU 从一个进程或线程切换到另一个进程或线程.进程(有时候也称做任务)是指一个程 ...

  4. FastJson中文乱码

    初学springboot使用fastJson替换默认的jackson后出现中文乱码 解决方式1: import java.util.ArrayList; import java.util.List; ...

  5. IOS-更优雅地使用Static Cell

    更优雅地使用Static Cell 在项目开发中,经常会用到static cell来实现一些固定的列表界面(如:个人中心等),在static cell被点击时,如何判断被点击的cell是哪一个,有什么 ...

  6. New Concept English Two 6 13

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

  7. nginx 配置 getsimplecms 配置文件

    getsimplecms的安装需要两个php类库,一个是dom操作,一个是gd library. 所以先安装这两个类库,重启php解释器. yum install php-xml; yum insta ...

  8. 第3课 进化后的const分析

    C语言中的const const修饰的变量是只读的,本质还是变量 const修饰的局部变量在栈上分配空间(改变这个空间的值,这个变量就会改变) const修饰的全局变量在只读存储区分配空间 const ...

  9. I.MX6 eMMC 中启动U-boot存放的首地址

    /************************************************************************************ * I.MX6 eMMC 中 ...

  10. http的报文结构和状态码的含义

    HTTP响应报文解剖 响应报文结构 HTTP的响应报文也由三部分组成(响应行+响应头+响应体): 以下是一个实际的HTTP响应报文: ①报文协议及版本: ②状态码及状态描述: ③响应报文头,也是由多个 ...