es6 初级之let
1.在es6 中，定义变量使用 let.
1.1 var定义变量：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>
var j = 39;
var j = "aaa";
console.log(j);
</script>
</head>
<body>
</body>
</html>
运行结果：
1.2 let定义变量：换成使用ES6 的 let 相同格式定义变量：
let j = 39;
let j = "aaa";
console.log(j);
输出：输出报错
原因：let 是块级作用域，不可以重复定义
1.3 所谓块级作用域，可以理解为{}括起来的范围，或者函数体内部的范围，例如：
let a = 10;
if (a) {
let a = 100;
console.log(a); //100
}
console.log(a); //10
1.4 var 和let的区别：
1.4.1 输出var 循环后的i 值
for (var i = 1; i <= 10; i++) {
}
console.log(i); //
结果：循环后，输出结果为11
1.4.2 输出 let 循环后的 i 值
for (let i = 1; i <= 10; i++) {
}
console.log(i); //外面访问不到
结果：输出后，结果报错，显示没有定义。
1.4.3 在for循环内，i 值可以输出
for (let i = 1; i <= 10; i++) {
//可以访问的到
console.log(i);
}
console.log(i); //外面访问不到
运行结果：
1.5 var 和 let 在函数中的差异
1.5.1 var
function show(flag) {
console.log(a); //undefined
if (flag) {
var a = 'aluoha';
return a;
} else {
console.log(a); //undefined
return null;
}
}
show(false);
show(true);
运行结果：
1.5.2 let
function show(flag) {
console.log(a); //报错了
if (flag) {
let a = 'ghostwu'; //let定义的变量不会提升
return a;
} else {
console.log(a);
return null;
}
}
show(false);
show(true);
运行结果：在第11行直接报错了，因为在第2行的console.log(a)中，a 没有定义
报错原因：i 用let 进行定义，let是块及作用与，只是在{}内起作用，{}外就不起作用了；但是，如果使用var 定义i，var 是全局作用域，会进行变量提升，将var a 提到console.log(a)之前，所以就不会报错
2. let 应用：
获取点击框的索引：
下面这种方式无法获取：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>
window.onload = function() {
var aBtn = document.querySelectorAll("input");
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
console.log(i);
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<input type="button" value="按钮4">
</body>
</html>
结果：无论点击那个按钮，得到的结果都是4
原因：i 循环后，结果是4；而点击事件是一个异步事件，异步事件的执行总是在同步事件的执行之后，执行完循环，才会去执行点击事件
2.1 通常的做法，在input 元素上加上一个自定义的索引 index ，点击的时候，获取index 的值，而不是获取 i 的值，这样就可以达到获取索引的目的了
js代码修正：
<script>
window.onload = function() {
var aBtn = document.querySelectorAll("input");
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
console.log(this.index);
}
}
}
</script>
结果：
2.2 采用闭包的方式获取索引：
window.onload = function() {
var aBtn = document.querySelectorAll("input");
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = (function(j) {
return function() {
console.log(j);
}
}(i));
}
}
结果：
2.3 采用es6 let 方式定义：
window.onload = function() {
var aBtn = document.querySelectorAll("input");
/*
第一次 i = 0, i++之后 ---> 释放
第一次 i = 1, i++之后 ---> 释放
*/
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
console.log(i);
}
}
}
运行结果：
es6 初级之let的更多相关文章
- es6 初级之展开运算符
1.1 先看一个求最大值的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- es6初级之箭头函数实现隔行变色
无论是使用哪种方式实现隔行变色的效果,它的思路都是一样的: 1.定义很多个div 2.给div 加背景 3.鼠标移动到div上时,当前div 背景变色 4.鼠标移出div时,当前div背景恢复 以上4 ...
- es6初级之解构----之二 及 键值反转实现
1.解构: 不定参数,扩展表达式 let arr = [100, 201, 303, 911]; let [one, ...others] = arr; console.log(others.leng ...
- es6初级之解构----之一
1. 访问对象属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- es6 初级之---const 和 默认参数
1. const 的定义: 1.1 常量定义的时候要赋值,不赋值是会报错的: <!DOCTYPE html> <html lang="en"> <he ...
- es6 初级之箭头函数
1.先看一个例子: <script> function show() { console.log('aluoha'); } show(); </script> 2. 改写成简单 ...
- Es6学习指南-1-函数变量
本篇章我们简述的是 es6初级知识点,认识es6,以及es6变量和es5的变量和函数. ECMAScript 6简介 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代 ...
- 互联网公司前端初级Javascript面试题
互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...
- Yeoman+Bower+gulp web前端自动化工作流程(初级教程)
Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...
随机推荐
- MaidSafe区块链项目白皮书解读
MaidSafe.net宣布项目SAFE到社区 1. 介绍 现有的互联网基础设施越来越难以应付超过24亿互联网用户的需求,这个数字在2017年预计将增长到36亿.今天的架构中,中央中介(服务器)存储并 ...
- Java基础知识_毕向东_Java基础视频教程笔记(19-21 IO流)
18天-06-IO流 字节流和字符流 字节流两个基类:InputStream,FileInputStream,BufferedInputStream OutputStream,FileOutputSt ...
- 浏览器兼容java小程序配置说明
最近在使用的一个web应用系统是内嵌了java小程序,遇到了各种浏览器兼容性问题,现梳理如下: 1.通过以下链接检测当前电脑是否已经安装有java https://java.com/zh_CN/dow ...
- elasticsearch 外网访问9200端口访问
可以访问127.0.0.1:9200,但不能访问 公网IP:9200 后面ip就是127.0.0.1的局域网ip,如何解决? 修改配置文件 config/elasticsearch.yml netwo ...
- Linux下单独编译安装PHP扩展包
首先进入PHP源码目录,比如这个: root@vultr:~/php-/ext/soap# 运行下PHP目录下的phpize,接着就可以和普通代码一样,配置,编译,安装了(注意:有些库可能可以配置参数 ...
- 递归锁，event事件和信号量
锁通常被用来实现对共享资源的同步访问.为每一个共享资源创建一个Lock对象,当你需要访问该资源时,调用acquire方法来获取锁对象(如果其它线程已经获得了该锁,则当前线程需等待其被释放),待资源访问 ...
- HDFS分布式文件系统
hadoop致力于构建在廉价的商用服务器上 多副本存储策略(副本数存多少合适) 常见是数据访问方式:流式数据访问(更适合大数据的访问) 随机数据访问(更适合传统的关系型数据库的访问)
- vue和react动画区别
触发动画 vue触发动画是 v-show,v-if ,动态组件或者组件的根节点 react 是CSSTransition上的属性 in 是true 或false触发动画
- 免安装版本Mysql配置
免安装版本mysql配置如下:(本人使用的是5.6.42) 1. 解压后将/bin目录配置在系统变量中 2. 在mysql目录下新建my.ini文件配置如下信息: [mysqld] basedir=D ...
- 图算法之——dijkstra算法
一.算法特点 目标:找出加权图中前往X的最短路径 适用于:无环有向加权图,且各边的权值为正 二.算法思路 三.算法示例演示 如下图,请找出结点v1到其他各个结点的最短路径: 首先创建一个字典(散列表) ...