ES5-ES6-ES7_let关键字声明变量
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关键字声明变量的更多相关文章
- PHP 闭包获取外部变量和global关键字声明变量的区别
最近在学习workerman的时候比较频繁的接触到回调函数,使用中经常会因为worker的使用方式不同,会用这两种不同的方式去调用外部的worker变量,这里就整理一下PHP闭包获取外部变量和glob ...
- es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量
自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...
- C++ —— 类中static和const关键字声明变量的初始化方式总结
在类中声明变量/常量时,经常会用到static.const关键字.对于该变/常量的初始化问题,网上有许多相关文章,但是大多不够完善,或者存在错误.经过实际验证,总结如下: (注明:测试编译平台为VS2 ...
- ES6 let const 声明变量 块级作用域
ES6 中除了使用 var 定义变量,还有let.const,定义变量. function getValue(condition){ console.log(typeof value2); // un ...
- ES6中6种声明变量的方法
相关阅读:http://es6.ruanyifeng.com/#docs/let 相关阅读:https://www.cnblogs.com/ksl666/p/5944718.html 相关阅读:htt ...
- ES6 声明变量的6种方法
ES5 只有两种声明变量的方法:var命令和function命令. ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令.所以,ES6 一共 ...
- ECMAScript 6 入门——ES6 声明变量的六种方法
ES6 声明变量的六种方法 ES5 只有两种声明变量的方法:var命令和function命令.ES6 除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和cla ...
- ES6 声明变量的六种方法
ES5 只有两种声明变量的方法: var 命令和 function 命令. ES6 除了添加 let 和 const 命令, 后面章节还会提到, 另外两种声明变量的方法: import 命令和 cla ...
- es6 快速入门 系列 —— 变量声明：let和const
其他章节请看: es6 快速入门 系列 变量声明:let和const 试图解决的问题 经典的 var 声明让人迷惑 function demo1(v){ if(v){ var color='red' ...
随机推荐
- Deep learning with Python 学习笔记（9）
神经网络模型的优化 使用 Keras 回调函数 使用 model.fit()或 model.fit_generator() 在一个大型数据集上启动数十轮的训练,有点类似于扔一架纸飞机,一开始给它一点推 ...
- Spring @Pathvariable
先记录下@PathVariable的用法吧: @RequestMapping("/demo/{id}") @ResponseBody public User getUser(@Pa ...
- 前后端分离demo 旅馆管理系统
模型设计 旅馆管理系统,主要涉及到登记入住,退房以及客房和客人信息管理:经过分析抽像出涉及到的实体以及各实体之间的关系: 可以看出整个业务以客房为中心,入住,退房,定价,收费都是以客房为基本单 ...
- 子shell以及什么时候进入子shell
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 子shell的概念贯穿整个shell,写shell脚本时更是不 ...
- centos每天自动备份mysql数据库
#!/bin/bash PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin export PATH #数据库用户名 db ...
- js判断字符串是否在数组中
先加一个扩展函数: Array.prototype.contains = function (obj) { var index = this.length; while (index–) { ...
- [android] 手机卫士应用程序更新和签名
弹出升级对话框 获取AlertDialog.Builder对象,通过new出来 调用Builder对象的setTitle()方法,参数:文本 调用Builder对象的setMessage()方法,参数 ...
- SVN多项目并行版本管理解决方案
1.背景 随着公司业务拓展,各业务部门频繁的需求变更,导致系统集成冲突的问题日益突出. 2.现状 基于SVN版本管理模式,多分支版本并行,分支合并主干交付.多分支开发存在依赖关系且有交付的先后顺序, ...
- 【 js 工具 】如何使用Git上传本地项目到github?(mac版)
在此假设你已经在 github 上创建好了一个项目,像这样: 并且你已经完成了自己的项目代码, 同时你也已经安装了 git,然后 let's start. 首先,建一个文件夹比如文中演示的是 微信小程 ...
- spring boot （2）：spring boot 打包tomcat、tomcat 部署多个项目、服务器部署项目SSL 设置（阿里云）
一.spring boot 内置tomcat配置https: 关于自签名证书可以看下上一篇 spring boot1 更详细的可以看转载 https://www.jianshu.com/p/8d4ab ...