石川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].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的更多相关文章
- 石川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 循环(迭代) 四个方法 ^ 使用 ...
随机推荐
- 应对Hadoop集群数据疯长，这里祭出了4个治理对策！
一.背景 在目前规模比较大的互联网公司中,总数据量能达到10PB甚至几十PB数据量的公司,我认为中国已经有超过了20家了.而在这些公司中,也有很多家公司的 日数据增长达到100TB+ 了. 所以我们每 ...
- ajax的交互原理，同步和异步的区别
ajax的交互原理分别为: 创建对象——建立连接——发送数据——注册回调——执行回调 var xhr=new XMLHttpRequest()//创建对象 xhr.open(请求,url,true或者 ...
- html基础知识（总结自www.runoob.com）
HTML属性 属性 描述 class 为html元素定义一个或多个类名(classname)(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式(inline style) ...
- vue路由（基于VScode开发）
index.js如果在router目录下,代表这个js文件只是路由使用 main.js中为全局,需要引入使用到的组件,一般vue中不用写东西vue中el挂载哪个就哪个组件为根目录,传值数据绑定的时候在 ...
- 在 React 组件中使用 Refs 指南
原文:Fullstack React's Guide to using Refs in React Components作者:Yomi Eluwande译者:博轩 译文:https://segment ...
- TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈
TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈 本文对TVM的论文进行了翻译整理 深度学习如今无处不在且必不可少.这次创新部分得益于可扩展的深度学习系统,比如 TensorFlo ...
- Ubuntu18.10中pip install mysqlclient 出现EnvironmentError: mysql_config not found错误
Complete output from command python setup.py egg_info: sh: 1: mysql_config: not found Traceback (mos ...
- [转自SA]浅谈nginx的工作原理和使用
nginx apache 简单对比 nginx 相对 apache 的优点: 轻量级,同样起web 服务,比apache 占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的,而 apac ...
- centso 7 Keepalived 配置脚本
#!/bin/bash #This is keepalived bashshell. #MASTER/BACKUP yum install -y openssl openssl-devel keepa ...
- deep_learning_Function_softmax_cross_entropy_with_logits
[TensorFlow]tf.nn.softmax_cross_entropy_with_logits的用法 [TensorFlow]tf.nn.softmax_cross_entropy_with_ ...