let命令的介绍

let是ECMAScript6中新增的关键字，用于声明变量。它的用法类似于var

var a = 3

let b = 4

let变量的声明

let 命令的特点不允许在同一作用域下声明已经存在的变量，也就是不能重复声明（不允许多个变量的变量名相同）

// var a = 1;

// var a = 3;//重复声明变量不会报错，a变成了3

// let b = 4;

// let b = 6;//会报错：Identifier 'b' has already been declared （变量名已经存在）

var a = 2;

let a = 3;   //这样也会报错：SyntaxError: Identifier 'a' has already been declared

let 命令的特点—没有预解析

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

console.log(a)//不会报错，会显示a这个变量的值为undefined

var a = 1;

console.log(b)//会报错:b is not defined(…),该变量未定义

let b = 4;

变量a用var命令声明，会发生变量提升，即脚本开始运行时，变量a已经存在了，但是没有值，所以会输出undefined。

变量b用let命令声明，不会发生变量提升。这表示在声明它之前，变量b是不存在的，这时如果用到它，就会抛出一个错误。

let 命令的特点—块级作用域

一对{}包括的区域成为代码块，块级作用域指一个变量或者函数只有在该区域才起作用

{

   let a = 10;

   var b = 1;

}

console.log(a) // ReferenceError: a is not defined.

console.log(b) //

let命令的特点—暂时性死区

let f = 10;

function fn() {

    f = 7;        //暂时性死区

    let f = 2;

}

fn();  //执行结果依然报错，原因是在fn函数内又声明了一遍变量f
let f = 10;

function fn() {

    f = 7;        //暂时性死区

    // let f = 2; // 这里重复声明f变量会报错

    console.log(f) // 打印结果是7

}

console.log(f) // 打印结果是10

fn();

let在for循环中的应用

在实验之前先来看一下var在for循环中的应用中会产生什么样的问题和解决问题的方法以及案例

for(var i = 0;i<10;i++){

    setTimeout(function(){

        console.log(i)//打印结果是10个10，因为for执行了10次 ，i的值已经到了10，setTimeout才开始第一次执行

    })

}

for(var i = 0;i<10;i++){

    (function(i){     //这里使用闭包的方式

        setTimeout(function(){

            console.log(i);  //打印结果依次是：1,2,3,4,5,6,7,8,9,10

        })

    })(i)

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <button>1</button>

    <button>2</button>

    <button>3</button>

    <button>4</button>

    <button>5</button>

</body>

</html>

<script>

    var btns = document.querySelectorAll('button');

//    for(var i = 0;i<btns.length;i++){

//        btns[i].onclick = function () {

//            console.log(i)

//        }

//    }

//    for(var i = 0;i<btns.length;i++){

//        btns[i].index = i;    //自定义属性

//        btns[i].onclick = function () {

//            console.log(this.index)

//        }

//    }

    for (var i = 0;i<btns.length;i++){

        (function (i) {

            btns[i].onclick = function () {

                console.log(i)

            }

        })(i)

    }

</script>

上面代码中我们可以使用使用自定义属性的方式解决这个问题也可以使用闭包的方式解决这个问题

再来看一下使用let在for循环中的应用会不会出现上述的问题，在循环语句之内是一个父作用域，在循环体之中是一个子作用域

for(let i = 0;i<10;i++){

    setTimeout(function(){

        console.log(i);    //打印结果依次是：1,2,3,4,5,6,7,8,9,10

    })

}
for(let i = 0;i<10;i++){

    let i = 10;

    console.log("for:"+i);    //结果都是10

}

console.log(i);   //报错：ReferenceError: i is not defined
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <button>1</button>

    <button>2</button>

    <button>3</button>

    <button>4</button>

    <button>5</button>

</body>

</html>

<script>

    var btns = document.querySelectorAll('button');

    for(let i = 0;i<btns.length;i++){

        btns[i].onclick = function () {

            console.log(i)

        }

    }

</script>

下面来一个日常工作中非常常见的需求——就是选项卡功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            display: none;

        }

        .show{

            display: block;

        }

        .active{

            background-color: yellow;

        }

    </style>

    <script type="text/javascript">

        "use strict"

       window.onload = function(){

        var tabs = document.getElementsByTagName('input');

        var divs = document.getElementsByTagName('div');

        for(var i=0;i<tabs.length;i++){

            tabs[i].index = i;

            tabs[i].onclick = function(){

                for(var j=0;j<tabs.length;j++){

                    divs[j].className = '';

                    tabs[j].className = '';

                }

                this.className = 'active';

                divs[this.index].className = 'show';

            }

        }

//           var tabs = document.getElementsByTagName('input');

//           var divs = document.getElementsByTagName('div');

//

//           for(let i=0;i<tabs.length;i++){

//

//               tabs[i].onclick = function(){

//                   for(let j=0;j<tabs.length;j++){

//                       divs[j].className = '';

//                       tabs[j].className = '';

//                   }

//                   this.className = 'active';

//                   divs[i].className = 'show';

//               }

//           }

       }

    </script>

</head>

<body>

    <input type="button" value="tab1" class="active">

    <input type="button" value="tab2">

    <input type="button" value="tab3">

    <div class="show">div1</div>

    <div>div2</div>

    <div>div3</div>

</body>

</html>

ES5-ES6-ES7_let关键字声明变量的更多相关文章

  1. PHP 闭包获取外部变量和global关键字声明变量的区别

    最近在学习workerman的时候比较频繁的接触到回调函数,使用中经常会因为worker的使用方式不同,会用这两种不同的方式去调用外部的worker变量,这里就整理一下PHP闭包获取外部变量和glob ...

  2. es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量

    自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...

  3. C++ —— 类中static和const关键字声明变量的初始化方式总结

    在类中声明变量/常量时,经常会用到static.const关键字.对于该变/常量的初始化问题,网上有许多相关文章,但是大多不够完善,或者存在错误.经过实际验证,总结如下: (注明:测试编译平台为VS2 ...

  4. ES6 let const 声明变量 块级作用域

    ES6 中除了使用 var 定义变量,还有let.const,定义变量. function getValue(condition){ console.log(typeof value2); // un ...

  5. ES6中6种声明变量的方法

    相关阅读:http://es6.ruanyifeng.com/#docs/let 相关阅读:https://www.cnblogs.com/ksl666/p/5944718.html 相关阅读:htt ...

  6. ES6 声明变量的6种方法

    ES5 只有两种声明变量的方法:var命令和function命令. ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令.所以,ES6 一共 ...

  7. ECMAScript 6 入门——ES6 声明变量的六种方法

    ES6 声明变量的六种方法 ES5 只有两种声明变量的方法:var命令和function命令.ES6 除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和cla ...

  8. ES6 声明变量的六种方法

    ES5 只有两种声明变量的方法: var 命令和 function 命令. ES6 除了添加 let 和 const 命令, 后面章节还会提到, 另外两种声明变量的方法: import 命令和 cla ...

  9. es6 快速入门 系列 —— 变量声明：let和const

    其他章节请看: es6 快速入门 系列 变量声明:let和const 试图解决的问题 经典的 var 声明让人迷惑 function demo1(v){ if(v){ var color='red' ...

随机推荐

  1. k8s集群之上游dns--dnsmasq，统一管理kubernetes的dns解析

    1.概述 首先部署好kubernetes集群并采用Coredns进行解析,这样集群内部的服务都能通过内部域名进行访问.但是集群内部的coredns与物理机的dns解析不完全统一,coredns不能解析 ...

  2. Java设计模式学习记录-桥接模式

    前言 这次介绍结构型设计模式中的第二种模式,桥接模式. 使用桥接模式的目的就是为了解耦,松散的耦合更利于扩展,但是会增加相应的代码量和设计难度. 桥接模式 桥接模式是为了将抽象化与实现化解耦,让二者可 ...

  3. Vsftpd+Tengine+SpringMVC实现上传图片

    第三部分:SpringMVC实现上传 1.1 思路 (1)使用SpringMVC上传组件,从页面表单接收图片 (2)使用vsftpd组件,将图片上传到Linux服务器 a.服务端:在Linux上安装f ...

  4. Class<?> getClass()

    getClass()方法属于Object的一部分,它将产生对象的类,并且在打印该类时,可以看到该类类型的编码字符串,前导"["表示这是一个后满紧随的类型的数组,而紧随的" ...

  5. c语言学习笔记-break

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.break使用中的注意事项 1.break如果用于循环,用来终止循环. 2.break如果用于switch,则用于终止swi ...

  6. java.io.IOException No space left on device

    磁盘空间不足 1.df -k,发现程序所在的工作目录/data,居然到了100%. 1604050 free allocated Kb 535144219 used allocated Kb 100 ...

  7. 使用fiddle处理跨域

    认真的用fiddle处理跨域 相信很多前端的同学都或多或少被跨域这个问题烦恼过,网上很多处理的方式其实都是要后端处理, 用fiddle来处理 ,就不必看后端的脸色了,自己安安心心的倒腾接口,何乐而不为 ...

  8. CoreCRM 开发实录 —— 基于 AntDesign 的新 UI

    上一篇说到,因为有新朋友加入,对前端开发有了新的要求.原来基于 Bootstrap 的 UI 就不要了.在网上(其实是 GitHub 上)逛了几圈,最后使用了 antd-admin 这个框架做为基础模 ...

  9. php+smarty轻松开发微社区/微论坛

    今天我们就来分析微社区的基本功能构成吧.首先,每个论坛最主要的是会员在对应的版块下发帖,或者在感兴趣的主题帖下跟帖盖楼.其次,会员能时时看到帖子或版块的基本信息.所以主要大块是: 前台:会员的注册登录 ...

  10. python自动化开发-5

    列表生成式 生成器 迭代器 列表生成式   举个例子 列表[0, 1, 2, 3, 4, 5, 6],要求把列表里的每个值加1,如何实现呢? L=[0, 1, 2, 3, 4, 5, 6] a={i+ ...