let/var的使用详解

最新推荐文章于 2023-08-04 09:07:11 发布
最新推荐文章于 2023-08-04 09:07:11 发布
阅读量208 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39368007/article/details/109616391
版权

 ES5中的var是没有块级作用域的(if/for)

 ES6中的let是由块级作用的(if/for)

ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.

ES6中,加入了let, let它是有if和for的块级作用域.

没有块级作用域引起的问题: for的块级

     为什么闭包可以解决问题: 函数是一个作用域.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
  // ES5中的var是没有块级作用域的(if/for)
  // ES6中的let是由块级作用的(if/for)

  // ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.
  // ES6中,加入了let, let它是有if和for的块级作用域.
  // 1.变量作用域: 变量在什么范围内是可用.
  // {
  //   var name = 'why';
  //   console.log(name);
  // }
  // console.log(name);

  // 2.没有块级作用域引起的问题: if的块级
  // var func;
  // if (true) {
  //   var name = 'why';
  //   func = function () {
  //     console.log(name);
  //   }
  //   // func()
  // }
  // name = 'kobe'
  // func()
  // // console.log(name);

  var name = 'why'
  function abc(bbb) { // bbb = 'why'
    console.log(bbb);
  }
  abc(name)
  name = 'kobe'

  // 3.没有块级作用域引起的问题: for的块级
  // 为什么闭包可以解决问题: 函数是一个作用域.
  // var btns = document.getElementsByTagName('button');
  // for (var i=0; i<btns.length; i++) {
  //   (function (num) { // 0
  //     btns[i].addEventListener('click', function () {
  //       console.log('第' + num + '个按钮被点击');
  //     })
  //   })(i)
  // }

  const btns = document.getElementsByTagName('button')
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
  // ES5
  // var i = 5
  // {
  //   btns[i].addEventListener('click', function () {
  //   console.log('第' + i + '个按钮被点击');
  // })
  // }
  //
  // {
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  //
  //
  // {
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  //
  //
  // {
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  //
  // {
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  //
  // // ES6
  // { i = 0
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  //
  // { i = 1
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  // { i = 2
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  // { i = 3
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }
  // { i = 4
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '个按钮被点击');
  //   })
  // }

</script>

</body>
</html>

 

小草dym
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
es6 for循环中let和var区别详解
01-19
let和var区别： for(var i=0;i<5 xss=removed>{ console.log(i);//5个5 },100) } console.log(i);//5 console.log('=============') for(let j=0;j<5 xss=removed>{ console.log(j);//0,1,2,3,4 },100) } ...
javascript中let和var的区别
Burgess_Lee的博客
12-19 1596
let是es6中新增命令，也是用来声明变量的，可能很多小伙伴都像我一样，定义变量的时候都会用var而很少用到let，那么，let和var到底有什么区别呢？ let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。 全局作用域 var 和 let...
JS中let和var的区别
weixin_34273479的博客
12-27 692
1. 定义变量 声明语法 var upperA = 'A'; let upperB = 'B'; const upperC = 'C'; 只声明不初始化的结果，【const定义的常量不可以修改，而且必须初始化。】 // var 声明变量 var upperA; console.log('打印大写的A：%s', upperA); /...
let、var声明变量的区别以及预解析、作用域的详解
qq_54455551的博客
04-17 5374
let、var声明变量的区别以及预解析、作用域的详解
let 和 var 的区别以及什么是暂时性死区？let配合for循环和var配合for循环有什么区别？
小草莓的博客
07-26 1421
1、var有变量提升，let 没有变量提升 2、var 可以重复声明，而let不能重复声明 3、let可以定义块级作用域 { } 4、临时失效区 （暂时性死区） ① 什么是暂时性死区？ ② 表现在哪里？ 5、let 配合for循环的独特应用 ① 用 var 配合 for 循环，有导致什么问题？ ② let非常适合用于for循环内部的块级作用域 6、拓展 ① 为什么ES6规定暂时性死区和 let 、const 语句不出现变量提升？ ② 为什么ES6中需要块级作用域？
vue 块状元素、行内元素、空元素
最新发布
m0_54829066的博客
08-04 527
这些元素不会独占一行，它们会在一行中水平排列，直到容器的宽度装不下，然后就会换行，比如 <span>、<a>、<img>、<button>、<input> 等。这些元素在页面中以块的形式展现，即它们会独占一行，比如 <div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<table> 等。这些元素没有内容，因此在HTML中，它们没有结束标签，比如 <br>、<hr>、<img>、<input>、<meta> 等。在Vue中，你可以使用这些元素来插入换行、水平线、图片、输入框等内容。
JavaScript ES6中const、let与var的对比详解
10-19
主要给大家介绍了在JavaScript中const、let与var对比的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。
详解js中let与var声明变量的区别
01-21
var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明：在ES6之前只有全局作用域和函数作用域，在ES6中新增了块级作用域，用{}花...
let和var
weixin_48242257的博客
12-23 439
let 和 var的区别 let 不能重复声明，但var可以 let会产生块级作用域，且只在自己的作用域内生效，但var不受限制；在ES5中只有函数作用域和全局作用域，当我们在{}中使用了let或者const时，{}的范围就是一个块级作用域，此时let或const只能在{}中访问。 { let a = 1; var b = 2; } console.log(a);//报错 console.log(b);//2 let不存在变量提升 console.log(a);//undefined va
vue学习笔记---块级作用域
多哥仁慈的骆驼
12-09 306
笔记： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮1</button> <butto...
一文读懂JavaScript： “let“ 与 “var“ 的细微差别
m0_61932070的博客
05-14 673
在JavaScript中，"let"和"var"都是用来声明变量的关键字，但它们的作用范围和行为却有着显著的不同。
vue显示地区的组件以及使用方法
就是个div
12-06 560
vant的treeSelect使用
var和let的区别
热门推荐
m0_63574519的博客
06-13 2万+
var和let都用于声明变量，不同的是：1.let声明的变量不能重复声明2.let声明的变量不能变量提升：当使用var声明一个var变量时，该变量会被提升到作用域的顶端，但是赋值的部分不会提升。 在声明a的语句之前就可以输出a，值为undefined，这就是变量提升。使用let声明变量时不能变量提升。3.var是函数作用域，let是块状作用域：在函数里使用var声明了一个变量，那么这个变量在整个函数内都是有效的，例如在for循环里用var声明一个变量，在for循环外也是可以使用的。但是let作用域是块状
教你理解let和var的区别
weixin_43380058的博客
11-22 251
for循环的计数器，就很合适使用let命令。 ```javascript for (let i = 0; i < 10; i++) { // ... } console.log(i); // ReferenceError: i is not defined 上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。 下面的代码如果使用var，最后输出的是10。 ```javascript var a = []; for (var i = 0; i < 10; i++) {
vue的块级作用域
qq_27009517的博客
06-22 248
var let const <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.
深入理解let，var的区别以及变量提升
Triumphs的博客
04-29 7140
let和var的区别是老生常谈的话题，但是不得不说网上很多文章的结论其实是有问题的。查阅了大量官方和网上的资料后，我想总结下let和var的不同，以及谈谈争议最大的话题：let是否有变量提升? let与var let是ES6新增的变量类型，是用来替代var的设计，与var不同的是： let使用块级作用域 let不支持在同作用域中声明标识符相同的变量 let用TDZ禁止了声明前访问 我们...
let和var的区别
qq_43145310的博客
07-12 3404
let与var的区别
vue 中4个级别的作用域
粉丝们务必加入微信粉丝群
03-23 3741
除了 JS 已有的功能外，Vue还具有自己独特的作用域级别。作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的“可见性”。了解 ...
【Vue五分钟】五分钟让你了解vue组件的层级关系
Lushengshi的博客
08-23 1574
【vue五分钟】五分钟让你了解vue组件_丘比特惩罚陆的博客-CSDN博客可以关注更多的博文进行学习了解。好的，我们进入今天的主题，我们知道组件可以进行调用，网页也可以通过分割的方式在页面中进行嵌套，并且可以在组件层级形成父级和子级、兄弟级别的关系，使得网页开发更加的富有层次感。
var let和const的使用场景
04-06
var、let和const是JavaScript中用来声明变量的关键词。它们在使用场景和作用范围上有所不同。 var是ES5中声明变量的关键字，它拥有函数作用域，意味着在一个函数内部声明的变量只在该函数内部有效。var在全局作用域...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值