石川es6课程---3、变量let和常量const

一、总结

一句话总结：

let非常好用，尤其是let的块级作用域可以解决之前要（function(){})()立刻执行函数做的块级作用域

1、js中var声明变量会伴随哪些问题？

- 可以重复声明，没有报错和警告
- 无法限制修改（也就是没有常量的概念）
- 没有块级作用域， { }

2、js中如何实现块级作用域？

函数：普通js只有函数才有作用域（function(){})()立刻执行函数
//普通js只有函数才有作用域（function(){})()立刻执行函数

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

//     (function(i){

//         aBtn[i].onclick=function(){alert(i)}

//     })(i)

// }

3、let 和 const的优点？

· 不能重复声明
· 都是块级作用域, { } 块内声明的，块外无效
· let 是变量，可以修改，const 是常量，不能修改

4、let块级作用域应用举例？

+ 本来需要（function(){})()立刻执行函数做块级作用域的地方的应用可以轻松被let代替
+ 直接 var 改 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">

    <title>Document</title>

    <script>

        window.onload= function () {

            /*

            var aBtn = document.getElementsByTagName('input')

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

                aBtn[i].onclick = function () {

                    alert(i)

                }

            }*/

            var aBtn = document.getElementsByTagName('input')

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

                aBtn[i].onclick = function () {

                    alert(i)

                }

            }

            /*

            var aBtn = document.getElementsByTagName('input')

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

                // 封装到函数里，限制作用域

                (function (i) {

                    aBtn[i].onclick = function () {

                        alert(i)

                    }

                })(i)

            }*/

        }

    </script>

</head>

<body>

    <input type="button" value="按钮1">

    <input type="button" value="按钮2">

    <input type="button" value="按钮3">

</body>

</html>

二、变量let和常量const

- var 的问题
- 可以重复声明，没有报错和警告
- 无法限制修改
- 没有块级作用域， `{ }`

- let 和 const
- 不能重复声明
- 都是块级作用域, `{ }` 块内声明的，块外无效
- let 是变量，可以修改
- const 是常量，不能修改

- 块级作用域举例
- 原来用 var 的方式，结果弹出的都是 3
- 或者将变量 封装到函数里，限制作用域，但比较麻烦
- 用 let 最简单，直接 var 改 let，解决作用域问题

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">

     <title>Document</title>

     <script>

         window.onload= function () {

             /*

             var aBtn = document.getElementsByTagName('input')

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

                 aBtn[i].onclick = function () {

                     alert(i)

                 }

             }*/

             var aBtn = document.getElementsByTagName('input')

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

                 aBtn[i].onclick = function () {

                     alert(i)

                 }

             }

             /*

             var aBtn = document.getElementsByTagName('input')

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

                 // 封装到函数里，限制作用域

                 (function (i) {

                     aBtn[i].onclick = function () {

                         alert(i)

                     }

                 })(i)

             }*/

         }

     </script>

 </head>

 <body>

     <input type="button" value="按钮1">

     <input type="button" value="按钮2">

     <input type="button" value="按钮3">

 </body>

 </html>

普通js只有函数才有作用域（function(){})()立刻执行函数

块级作用域

 <!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">

     <title>块级作用域</title>

 </head>

 <body>

     <script>

         {

             var a=12

             let b=13

             b=16

             const c=16

             // c=18//报错Uncaught TypeError: Assignment to constant variable.

             // const c=17//块级作用域内

             //报错Uncaught SyntaxError: Identifier 'c' has already been declared

         }

         let b=13

         const c=19

         alert(a)//正常

         alert(b)//报错a is not defined

         alert(c)

         // let a=19//块级作用域外

         //报错Uncaught SyntaxError: Identifier 'a' has already been declared

     </script>

 </body>

 </html>
 

石川es6课程---3、变量let和常量const的更多相关文章

  1. 石川es6课程---18、ES6 复习

    石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...

  2. 石川es6课程---8、字符串

    石川es6课程---8.字符串 一.总结 一句话总结: · es6字符串新增两个方法:startsWith(以什么开头),endsWith(以什么结尾) · 新增反单引号:可以解析变量,可以折行:le ...

  3. 石川es6课程---1-2、ES6简介

    石川es6课程---1-2.ES6简介 一.总结 一句话总结: 从ECMAScript的历史发展来看,太顺了的时候总会遇到一挫折,比如ecma4 1.ECMAScript 和 JavaScript关系 ...

  4. 石川es6课程---17、ES7 预览

    石川es6课程---17.ES7 预览 一.总结 一句话总结: 人的价值恒定规律:无论得意还是迷茫之时,你的价值都不靠外界的评判或者你内心的悲喜而决定.而是当时的恒定的.能够提升他只能靠你提升自己的能 ...

  5. 石川es6课程---13-16、generator-认识生成器函数

    石川es6课程---13-16.generator-认识生成器函数 一.总结 一句话总结: ` generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权 ` 需要调用next() ...

  6. 石川es6课程---12、Promise

    石川es6课程---12.Promise 一.总结 一句话总结: 用同步的方式来书写异步代码,让异步书写变的特别简单 用同步的方式来书写异步代码Promise 让异步操作写起来,像在写同步操作的流程, ...

  7. 石川es6课程---11、json

    石川es6课程---11.json 一.总结 一句话总结: ` 感觉更方便了一点,增加了一些简写 ` key-value 一样时可以简写:console.log({ a,b}}) ` 里面函数可以简写 ...

  8. 石川es6课程---9、面向对象-基础

    石川es6课程---9.面向对象-基础 一.总结 一句话总结: js老版本的面向对象和继承都不是很方便,新版的面向对象向其它语言靠拢,有了class,extends,constructor等关键字,用 ...

  9. 石川es6课程---7、数组

    石川es6课程---7.数组 一.总结 一句话总结: ^ 主要就map(映射:一个对一个),reduce(汇总:一堆出来一个),filter  过滤器,forEach 循环(迭代) 四个方法 ^ 使用 ...

随机推荐

  1. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

    在router目录下的index.js文件中,对path属性加上/:id. 使用router对象的params.id 例如 :  this.$route.params.id

  2. 多线程编程-- part 5.2 JUC锁之Condition条件

    1.Condition介绍 Condition的作用是对锁进行更精确的控制.Condition中的await()方法相当于Object的wait()方法,Condition中的signal()方法相当 ...

  3. selenium 模拟登陆豆瓣，爬取武林外传的短评

    selenium 模拟登陆豆瓣,爬去武林外传的短评: 在最开始写爬虫的时候,抓取豆瓣评论,我们从F12里面是可以直接发现接口的,但是最近豆瓣更新,数据是JS异步加载的,所以没有找到合适的方法爬去,于是 ...

  4. QQ恶搞 - 让艾特你的人语无伦次

    效果图: 实现过程: 代码: ‮ 将上面的代码复制添加到你的群名片后面即可. 原理解析: 这个代码是一个Unicode控制字符 - RLO,它可以控制在它后面的所有文本都已倒序的方式显示.在qq群艾特 ...

  5. Navicat安装、使用教程

    下载地址:Navicat的安装包及破解文件 一. Navicat安装 Navicat既可安装在服务器端,也可以安装在客户端.安装在服务器端,导入数据时可使用默认用户,也可以使用远程用户:安装在客户端, ...

  6. symfony3 使用命令行工具生成Entity实体所踩的坑

    1.把配置文件汇总连接邮箱的配置信息注释掉了,在创建Entity时php bin/console doctrine:generate:entity报错 2. 错误原因是实体文件映射到数据库中的字段时候 ...

  7. 两种解决springboot 跨域问题的方法示例

    两种解决springboot 跨域问题的方法示例,哪种方法看情况而定,自己选择.社会Boolean哥,人狠话不多,直接上代码. 第一种实现方式:       此种方式做全局配置,用起来更方便,但是无法 ...

  8. 安装vim自动补全插件

    1 安装VIM 2 安装vim插件管理工具.过程见链接.(谢谢) 3 在.vimrc中添加下列代码 Bundle 'Valloric/YouCompleteMe' 保存退出后打开vim,在正常模式下输 ...

  9. ASP.NET c# 实验日记（1）

    第一次写有一些紧张,以前学过html,c语言,vb,c#等语言.也自己翻过有关javascript的书,现在的目的是怎么把学习经验写的更具结构化和条理化,大佬勿喷. 在一个集成开发平台里第一步就是新建 ...

  10. 面试复习题（二）JavaSE高级（未完成）

    一.Java中的反射 3.说说你对Java中反射的理解 Java中的反射首先是能够获取到Java中要反射类的字节码,获取字节码有3种办法. class.forName(className) 类名.cl ...