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 什么是开发流程? 在我看来一个完整 ...

随机推荐

廖雪峰Java6 IO编程-2input和output-4Filter模式
1.JDK提供的InputStream分为两类: 直接提供数据的InputStream * FileInputStream:从文件读取 * ServletInputStream:从HTTP请求读取数据 ...
廖雪峰Java3异常处理-2断言和日志-4使用Log4j
1.Log4j Log4j是目前最流行的日志框架.有两个版本 1.x:Log4j 2.x:Log4j2 Log4j下载地址https://www.apache.org/dyn/closer.lua/l ...
idea 破解方法--可以使用到2099年
破解方式有2种,第一种比较方便第一种比较方便 1.使用注册码破解:http://idea.lanyus.com/ 复制这段: 2. 修改hosts文件: hosts位置:C:\Windows\Sys ...
Jmeter（四十一）分布式测试（转！）
寄语路人休掩鼻,活人不及死人香. -------<随园诗话>袁枚转自:https://www.cnblogs.com/imyalost/p/8306866.html 1.修改Contor ...
[UE4]非常实用的插值Lerp
Alpha的数值范围是0到1. if(Alpha==0) ReturnValue=A if(Alpha==1) ReturnValue=B 如果Alpha在0到1之间,Alpha值越接近0则ReVal ...
aspnet-api-versioning
https://github.com/Microsoft/aspnet-api-versioning
django练习题
1.Web框架的本质是什么?为什么要有Web框架? 所有的Web应用,本质上其实就是一个socket服务端,用户端程序其实就是一个socket客户端.对于真实开发中的python web程序来说,一般 ...
DRF 视图组件代码
序列化器代码 # 声明序列化器from rest_framework import serializersfrom djangoDome.models import Book class Publis ...
MySQL字符集及校对规则的理解
阅读目录:MySQL的字符集和校对规则 MySQL的字符集 MySQL与字符集正确使用字符集 MySQL客户端与字符集字符集编码转换原理字符集常见处理操作字符集的正确实践 MySQL的校对 ...
深入Spring Boot：怎样排查 Cannot determine embedded database driver class for database type NONE
ref:https://www.journaldev.com/13830/spring-boot-cannot-determine-embedded-database-driver-class-for ...

es6 初级之let

es6 初级之let的更多相关文章

随机推荐

热门专题