ES6中变量let的属性以及在for循环中的使用

ES6中变量let的属性以及在for循环中的使用

大家好,又见面了,我是你们的朋友全栈君。

let和var的差别

1、let没有变量提升,申明变量的同时必须对变量赋值

2、let不允许重复申明变量

3、let的作用域是块级作用域,这一点在for循环中可以提现

<ul id=”ul1″>
  <li class=”li”>1</li>
  <li class=”li”>2</li>
  <li class=”li”>3</li>
  <li class=”li”>4</li>
</ul>

<script>

window.onload = function () {

  var app = document.getElementsByClassName(‘li’);

  // for循环变量输出
  // for (var i = 0; i < app.length; i++) {

    // // 在for循环里绑定的事件要等循环结束后才会执行
    // app[i].onclick = function () {

    // console.log(i)
    // };
  // }
  // // 第一个循环这里点击输出的都是4

  // // 第一个for循环拆解后就是下面这个for循环
    // for (var i = 0; i < app.length; i++) {
      // var ss = function () {

        // console.log(i)
      // };
    // }
  // // 在for循环运行结束后再执行点击事件,调用ss函数,此时变量i的值当然是4
  // app[0].onclick = ss
  // app[1].onclick = ss
  // app[2].onclick = ss
  // app[3].onclick = ss

 

  // let申明的变量只在块级作用域{}中,所以在for循环外调用会报undefined
  // for (let i = 0; i < app.length; i++) {
    // let ss = function () {

      // console.log(i)
    // };
  // }
  // // 在for循环运行结束调用ss报错
  // app[0].onclick = ss
  // app[1].onclick = ss
  // app[2].onclick = ss
  // app[3].onclick = ss

  // 使用let变量可以直接在for循环变量输出i
  for (let i = 0; i < app.length; i++) {

    app[i].onclick = function () {

      console.log(i)
    };
  }
}

  

</script>

转载于:https://www.cnblogs.com/webwangjie/p/9370763.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107400.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 一文详解MOS管驱动电路的核心设计「建议收藏」

    一文详解MOS管驱动电路的核心设计「建议收藏」MOS管电子产品生产中不可或缺的重要保护器件,在手机、笔记本电脑、蓝牙耳机等都有MOS管的身影,可以这样说,有便携式电子产品的地方一定有MOS管的存在,究竟为何MOS管能在竞争激烈的电子行业中脱颖而出,我觉的最主要的原因莫过于MOS管绝佳的性能,如简化驱动电路、自适应能力强、抗干扰能力强等性能使得MOS管崛起的速度快,今天我们要说的是MOS管在驱动电路中的核心设计,为何能让MOS管在竞争如此激烈的…

    2022年6月19日
    31
  • js 字符串截取(包含中英文)

    js 字符串截取(包含中英文)有一个项目中需要兼容ie6,在使用ztree中很难修改符合ie下面的字符截取样式,于是使用js方法来截取,字符串截取推荐使用: //截取字符串包含中文处理     //(串,长度,增加…)     functionsubString(str,len,hasDot){      varnewLength=0;    

    2022年6月6日
    57
  • Mysql : tinytext, text, mediumtext, longtext[通俗易懂]

    Mysql : tinytext, text, mediumtext, longtext[通俗易懂]Mysql:tinytext,text,mediumtext,longtext(2012-08-0114:26:23)转载▼标签:杂谈 分类:mysql一、数字类型类型 范围 说明 Char(N)[binary] N=1~255个字元binary:分辨大小写 固定长度 std_namecahr(32)…

    2022年8月13日
    4
  • c语言逻辑运算符和逻辑表达式_逻辑运算符与或非

    c语言逻辑运算符和逻辑表达式_逻辑运算符与或非1.逻辑运算符及其运算规则(1)C语言提供三种逻辑运算符:&amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;逻辑与(相当于&amp;amp;amp;amp;amp;amp;quot;同时&amp;amp;amp;amp;amp;amp;quot;)||逻辑或(相当于&amp;amp;amp;amp;amp;amp;quot;或者&amp;amp;amp

    2025年8月23日
    2
  • 多线程(五)—线程的Yield方法

    多线程(五)—线程的Yield方法

    2020年11月12日
    220
  • gtest整理_softest

    gtest整理_softest目录简介使用目的使用时机使用方法测试样例使用心得简介gtest是一个跨平台的C++单元测试框架,由google公司发布。gtest提供了丰富的断言,供开发者对代码块进行白盒测试。使用目的测试代码逻辑是否正确。编译器只能检测出语法错误但是无法检测到逻辑错误,比如一个函数或类是否完成了期望的功能。单元测试可以帮助我们判断代码设计得是否清晰合理。一块代码的逻辑越清晰,它的单元测试就可以设计得越简单。方便并行开发。一个程序的有不同模块相互耦合,某个模块未完成可能影响其他已完成模块的测试,这时可以利用

    2022年9月1日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号