石川es6课程---3、变量let和常量const
石川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].οnclick=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做块级作用于应用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 window.onload= function () {
10 /*
11 var aBtn = document.getElementsByTagName('input')
12 for (var i=0; i < aBtn.length; i++) {
13 aBtn[i].onclick = function () {
14 alert(i)
15 }
16 }*/
17 var aBtn = document.getElementsByTagName('input')
18 for (let i = 0; i < aBtn.length; i++) {
19 aBtn[i].onclick = function () {
20 alert(i)
21 }
22 }
23 /*
24 var aBtn = document.getElementsByTagName('input')
25 for (var i = 0; i < aBtn.length; i++) {
26 // 封装到函数里，限制作用域
27 (function (i) {
28 aBtn[i].onclick = function () {
29 alert(i)
30 }
31 })(i)
32 }*/
33 }
34 </script>
35 </head>
36 <body>
37 <input type="button" value="按钮1">
38 <input type="button" value="按钮2">
39 <input type="button" value="按钮3">
40 </body>
41 </html>普通js只有函数才有作用域（function(){})()立刻执行函数
块级作用域
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>块级作用域</title>
8 </head>
9 <body>
10 <script>
11 {
12 var a=12
13 let b=13
14 b=16
15 const c=16
16 // c=18//报错Uncaught TypeError: Assignment to constant variable.
17 // const c=17//块级作用域内
18 //报错Uncaught SyntaxError: Identifier 'c' has already been declared
19 }
20 let b=13
21 const c=19
22 alert(a)//正常
23 alert(b)//报错a is not defined
24 alert(c)
25 // let a=19//块级作用域外
26 //报错Uncaught SyntaxError: Identifier 'a' has already been declared
27 </script>
28 </body>
29 </html>转载于:https://www.cnblogs.com/Renyi-Fan/p/11589900.html
石川es6课程---3、变量let和常量const相关推荐
- 石川es6课程---18、ES6 复习
石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...
- 石川es6课程---8、字符串
石川es6课程---8.字符串 一.总结 一句话总结: · es6字符串新增两个方法:startsWith(以什么开头),endsWith(以什么结尾) · 新增反单引号:可以解析变量,可以折行:le ...
- 石川es6课程---1-2、ES6简介
石川es6课程---1-2.ES6简介 一.总结 一句话总结: 从ECMAScript的历史发展来看,太顺了的时候总会遇到一挫折,比如ecma4 1.ECMAScript 和 JavaScript关系 ...
- 石川es6课程---17、ES7 预览
石川es6课程---17.ES7 预览 一.总结 一句话总结: 人的价值恒定规律:无论得意还是迷茫之时,你的价值都不靠外界的评判或者你内心的悲喜而决定.而是当时的恒定的.能够提升他只能靠你提升自己的能 ...
- 石川es6课程---13-16、generator-认识生成器函数
石川es6课程---13-16.generator-认识生成器函数 一.总结 一句话总结: ` generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权 ` 需要调用next() ...
- 石川es6课程---12、Promise
石川es6课程---12.Promise 一.总结 一句话总结: 用同步的方式来书写异步代码,让异步书写变的特别简单 用同步的方式来书写异步代码 Promise 让异步操作写起来,像在写同步操作的流程 ...
- 石川es6课程---11、json
石川es6课程---11.json 一.总结 一句话总结: ` 感觉更方便了一点,增加了一些简写 ` key-value 一样时可以简写:console.log({ a,b}}) ` 里面函数可以简写 ...
- 石川es6课程---9、面向对象-基础
石川es6课程---9.面向对象-基础 一.总结 一句话总结: js老版本的面向对象和继承都不是很方便,新版的面向对象向其它语言靠拢,有了class,extends,constructor等关键字,用 ...
- 石川es6课程---7、数组
石川es6课程---7.数组 一.总结 一句话总结: ^ 主要就map(映射:一个对一个),reduce(汇总:一堆出来一个),filter 过滤器,forEach 循环(迭代) 四个方法 ^ 使用 ...
最新文章
- python使用imbalanced-learn的AllKNN方法进行下采样处理数据不平衡问题
- OLTP与OLAP是什么？OLTP与OLAP的主要区别是什么？
- 阿里巴巴宣布开源限流降级中间件——Sentinel
- SpringBoot 那些自带 Buff 的工具类，你用过几个？
- alv导出本地文件DUMP
- 冒险实施SAP HANA 农夫山泉缘何做第一个“吃螃蟹”者？
- factorytalkview 卡 86_徕卡M党的街拍小贴士
- TcxComboBox控件说明
- 操作系统知识点大总结【进程同步与互斥】
- 1、和一定时找数组中的两个数
- 关于三极管的理解---根据IC符号简易迅速判断三极管导通情况
- NBA球员数据的爬取
- cubase计算机音乐,Cubase与Nuendo电脑音乐制作从新手到高手 (200例)
- python3下载网页视频_三种下载网页视频的的方法（亲测！非常详细）
- 每天一个RL基础理论(7)——总结篇
- python元祖封包_python的封包与解包
- c语言解除键盘锁定,笔记本键盘被锁怎么办|笔记本解除键盘锁定的四种方法
- 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染 1
- 自协方差函数的Matlab实现
- 微信点餐系统中出现的小问题记录