声明后未赋值，表现相同

(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. xtu 1242 Yada Number 容斥原理

    Yada Number Problem Description: Every positive integer can be expressed by multiplication of prime ...

  2. charles抓取https中出现unknow

    http正常抓包,https则出现unknown 1.安装证书 Help->SSL Proxying->Install Charles Root Certificate 但是!!!装完并没 ...

  3. Ubuntu 分区方安

    方案一: / 40G/boot 200MBswap 1G-2G /home 20G 剩 下的分为几个独立的分区,不用指定挂载点,而是安装完成后修改 /etc/fstab ,将这些区挂载在/home的子 ...

  4. AutoFac IoC DI 依赖注入

    AutoFac IoC DI 依赖注入 记录点点滴滴知识,为了更好的服务后来者! 一.为什么使用AutoFac? 之前介绍了Unity和Ninject两个IOC容器,但是发现园子里用AutoFac的貌 ...

  5. Custom Ribbon in SharePoint 2010 & which not wrok when migrate from 2010 to 2013

    博客地址 http://blog.csdn.net/foxdave 1. First of all, let me show you the ribbon modal in our project w ...

  6. Multiple Object Tracking using K-Shortest Paths Optimization简要

    参考文献:Multiple Object Tracking using K-Shortest Paths Optimization 核心步骤: 两步:一.detection 二.link detect ...

  7. 控制led灯并显示自己的数值

    前提是有led.jar包封装好了东西 1.并设置好led灯的模式并打开串口. 2.在布局中创建一个EditText ,Button.并利用-.getText.toString().trim(); 来获 ...

  8. 每天一个linux命令（性能、优化）：【转载】iostat命令

    Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.同 ...

  9. 【java基础】java关键字final

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.下 ...

  10. Windows 2008 关闭远程桌面的单用户多会话模式

    Windows 2008 关闭远程桌面的单用户多会话模式 在腾讯云上购买了一台云服务器. 因为设置了自动登录,在远程桌面连接后会启动一个新的会话,然后软件被运行了两次,端口被占用,无法起动. 还有可能 ...