ES6学习笔记之let与const用法实例分析

本文实例讲述了ES6学习笔记之let与const用法。分享给大家供大家参考，具体如下：

在ES6中不是var，而是通过let来声明变量，用const来声明常量，有如下一些不同：

1、let与const作用域只限于当前代码块{}，而var则没有这种限制。

2、使用let、const申明的变量作用域不会被提升。例如：

console.log(str);
var str="var declare";

控制台输出undefined；因为变量申明是在任意代码执行前处理的，在代码区中任意地方声明变量和在最开始（最上面）的地方声明是一样的。也就是说，看起来一个变量可以在声明之前被使用！这种行为就是所谓的“hoisting”，也就是变量提升，看起来就像变量的声明被自动移动到了函数或全局代码的最顶上。注意：仅仅是声明提升了，定义并不会被提升。因此console.log()可以检测到str的声明，但是却没有定义，提示undefined。

console.log(str2);
let str2="let declare";

控制台报错：can't access lexical declaration `str2' before initialization，let不会把声明提升到全局之前，因此在console输出str2时会报错未声明。

3、在相同的作用域下不能申明相同的变量，利用var可以声明两次同一个变量，并且后一个会覆盖前面的声明，而let、const不可以。

4、for循环体现let的父子作用域

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  btns[i].οnclick=function () {
    alert("第"+i+"个按钮");
  }
}

由于var会提升作用域，当btns[i]在本代码块{}找不到i时，会找到之前的for中的i。在函数循环执行时，并没有触发onclick，i一直++到5。当任意按钮点击的时侯触发onclick，此时i==5，因此无论按那个按钮都会显示“第5个按钮”。

解决方法一：闭包处理

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  (function (i) {//通过参数传递i，在另一个函数内的i
    btns[i++].οnclick=function () {
      alert("第"+i+"个按钮");
    }
  })(i);
}

闭包处理：闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量,i是另一个函数作用域内的变量，不会随着外循环而改变。

方法二：使用let的情况下，会自己区分为两个作用域，每个btns[i]内的函数对应不同的变量i

for (let i=0;i<btns.length;i++){//内部为新的let作用域
  btns[i].οnclick=function (){
    alert("第"+i+"个按钮");
  }
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • ES6中let 和 const 的新特性

    在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量.本文给大家介绍ES6中let 和 const 的特性,具体内容如下所示: let的特性: 1.不存在变量提升现象:即声明前使用,报ReferenceError.适用于for循环计数器. 2.暂时性死区:即在块级作用域内使用let声明变量,该变量只能在该作用域内使用. 3.不允许重复声明:let声明过的变量不能再次声明,否则报错. const的特性:

  • 深入浅出ES6之let和const命令

    let和const声明的变量只在代码块内有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 不存在变量提升 变量一定要在声明后使用,否则报错 var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; } 不允许重复声明 // 报错 function () { let a = 10; var a = 1; } 块级作用域 f

  • ES6新特性一： let和const命令详解

    本文实例讲述了ES6新特性中的let和const命令.分享给大家供大家参考,具体如下: 1. let 命令 ① 在js中是没有块级作用域的,var 声明的变量作用域是整个函数体,而let可以起到这一作用 { let a = 1; var b = 2; } console.log(b); // 2 console.log(a); // a is not defind ② 而let可以起到这一作用啊在js中变量和函数的声明会提升到当前作用域最顶部执行.这样就会出现问题. var a = []; //

  • JavaScript ES6中const、let与var的对比详解

    ECMAScript 6 新增 const 和 let 命令,用来声明变量. 声明方式 变量提升 作用域 初始值 重复定义 const 否 块级 需要 不允许 let 否 块级 不需要 不允许 var 是 函数级 不需要 允许 变量提升:const 和 let 必须先声明再使用,不支持变量提升 console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 =

  • JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别... var x = 1; y = 4; console.log(x);//1 console.log(y);//4 console.log(window.x);//1 console.log(window.y);//4 简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么... delete x; delet

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • ES6 let和const定义变量与常量的应用实例分析

    本文实例讲述了ES6 let和const定义变量与常量的应用.分享给大家供大家参考,具体如下: 关于 let let是小作用域的变量的声明 { var a = 12; let b = 15; { console.log(a); // 12 console.log(b); // 15 } } let 是块级作用域,不会被提升:var是函数级的变量,存在变量提升,外部可访问 console.log(a); // Uncaught ReferenceError: a is not defined,直接

  • ES6中let、const的区别及变量的解构赋值操作方法实例分析

    本文实例讲述了ES6中let.const的区别及变量的解构赋值操作方法.分享给大家供大家参考,具体如下: 声明:本文内容依照阮一峰老师ECMAScript 6 入门一书所总结. let和const 相同点 都存在块级作用域 都不存在变量声明提升 都会造成"暂时性死区" 在一个作用域下不可重复声明 不同点 const一旦声明必须立即赋值 const声明的变量指向的内存地址不得改动. 变量解构赋值 数组的解构赋值 解构成功 let [a, b, c] = [1, 2, 3]; 解构不成功

  • ES6入门教程之let和const命令详解

    前言 在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量会在全局范围内有效,这我们是非常熟悉的: for (var i = 0; i < 10; i++) { console.log(i); // 0,1,2...,9 } console.log(i); //10 if(true){ var s = 20; } console.log(s); //

  • ES6入门教程之let、const的使用方法

    一.前提 解决ES5中只有全局作用域和函数作用域,没有块级作用域而带来的不合理的场景. let 基本用法 用法和var 一样,只是let声明的变量只有在let命令所在的代码块有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 可以看出var 声明的变量在代码块之外也是可以调用,而let声明的则调用报错.所以let 声明只在它声明的当前代码块中才能调用. 变量提升 在使用 var 的时候会出现 "变

随机推荐