简述ES6新增关键字let与var的区别

最近看了很多文章，偶然间看到ES6中新增了一个关键字 let ，它具有与 var 关键字相似的功能。一开始使用它时，发现它让我对之前一些习以为常的东西产生了怀疑。

下面先让我们看看它和 var 之间用法的不同

　{
　　　var a = 10;
　　　let b = 8;
　}
 　a //10
 　b // Referenceerror ：b is not defined

上面在代码块中声明了两个变量并分别赋值输出到控制台，结果a的变量成功输出，b的输出结果产生了报错。可见，let声明的变量只在它所在的代码块中产生作用。同时，我们也能想到它最好的使用方法就是在for循环中使用。

下面我们再举个例子来观察它与 var 之间的区别：

　var a = [ ]
　　for(var i = 0;i<6; i++){
　　　　a[i] = function(){
　　　　　　console.log(i);
　　　　}
　　}
　　console.log("i的值：",i);
　　a[ 4 ]( );

　　它的输出结果为：

　　　　i 的值：6

　　　　6

　　为什么是 6 呢？一开始我也被吓懵逼了，这有悖于我的常识，以往没注意到的地方，居然这么的low。在我的意识里结果应该 4，而不是 6 。我想了很久也想不明白，以我这种小白的技术，自然是很难搞懂这种资深技术宅的问题。所以，我查了很多资料来解决这个问题，才搞明白。

　　在for里用 var 声明的 i 是全局变量，在循环外部也可以访问到，在循环体内每次循环都给 i 重新赋一次值，而 i 却是属于全局的，外部的 i 值最终是 6 ，数组 a[ ]指向的 i 始终都是同一个 i，当循环结束时 a [ ] 函数内部的 i 就是最终 i 的结果  6。

　　如果使用let，声明的变量只在当前代码块中起作用

　　var a = [ ]
　　for(let i = 0;i<6; i++){
　　　　a[i] = function(){
　　　　　　console.log(i);
　　　　}
　　}
　　console.log("i的值：",i);
　　a[ 4 ]( );

　它的输出结果为：

　　　　i 的值：6
　　　　5

　　上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是5。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

总结

以上所述是小编给大家介绍的ES6新增关键字let与var的区别,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 解读ES6中class关键字

    class是es6引入的最重要特性之一.在没有class之前,我们只能通过原型链来模拟类. 1 .介绍  //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } Point类除了构造方法,还定义了一个toString方法.注意,定义"类"的方法的时候,前面不需要加上function这个关键字,

  • 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

  • ES6通过babel转码使用webpack使用import关键字

    使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示 Uncaught ReferenceError: require is not defined babel只是个翻译,假设a.js 里 import 了 b.js 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具 也就是webpack等工具了 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 深入浅析ES6 Class 中的 super 关键字

    以下只是个人的学习笔记: super这个关键字,既可以当作函数使用,也可以当作对象使用.在这两种情况下,它的用法完全不同. 1.当作函数使用 class A {} class B extends A { constructor() { super(); //ES6 要求,子类的构造函数必须执行一次super函数. } } 注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.construc

  • 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 =

  • ES6深入理解之“let”能替代”var“吗?

    前言 我已经使用ES2015(ES6)的语法编写JavaScript程序很久了,并且喜欢上它提供的新特性带来的优雅和简洁.我最习惯的就是不再使用var,而是let/const.我想当然的以为let仅仅是var的替代者,而事实上let还为我们提供了更加精细的作用域. 我大多数时候使用的变量都是用const来声明,因为如果尝试对使用const声明的变量进行修改,将会报错.这可以避免不小心将一个不该修改的常量值修改.但是,我们还是需要可以声明可以被修改的变量,比如在循环里面的计数器,我们需要不断地对改

  • 简述ES6新增关键字let与var的区别

    最近看了很多文章,偶然间看到ES6中新增了一个关键字 let ,它具有与 var 关键字相似的功能.一开始使用它时,发现它让我对之前一些习以为常的东西产生了怀疑. 下面先让我们看看它和 var 之间用法的不同 { var a = 10; let b = 8; } a //10 b // Referenceerror :b is not defined 上面在代码块中声明了两个变量并分别赋值输出到控制台,结果a的变量成功输出,b的输出结果产生了报错.可见,let声明的变量只在它所在的代码块中产生作

  • ES6新增关键字let和const介绍

    ES6新增关键字let和const介绍

    目录 一.let关键字 1.基本语法 2.let和var的区别 2.1.同一作用域内let不能重复定义同一个名称,var可以重复定义 2.2.两者作用域不同 2.3.不存在变量提升 二.const ES6新增加了两个重要的JavaScript关键字:let和const 一.let关键字 let声明的变量只在let命令所在的代码块内有效. 1.基本语法 let a='123' 2.let和var的区别 var也是用来声明变量,let和var有什么区别呢?区别主要是以下三点: 2.1.同一作用域内l

  • JavaScript ES6语法中let,const ,var 的区别

    一.变量声明的方式let / const let / const 共同点 1.都是块级作用域2.在同一个作用域下,变量名不允许重复3.他们声明的全局变量并没有挂在 window对象上4.都没有预编译 let / const 不同点 1.let 声明的变量值可以改变2.const 声明的变量值不能改变,必须声明后立即赋值 (如:const a = 3.14;)3.const 存引用数据类型时,内容可以发生改变(地址不能改变) 优先考虑使用const , 如果变量会发生改变,就使用let , 最后使

  • JavaScript ES6语法中let,const ,var 的区别

    一.变量声明的方式let / const let / const 共同点 1.都是块级作用域2.在同一个作用域下,变量名不允许重复3.他们声明的全局变量并没有挂在 window对象上4.都没有预编译 let / const 不同点 1.let 声明的变量值可以改变2.const 声明的变量值不能改变,必须声明后立即赋值 (如:const a = 3.14;)3.const 存引用数据类型时,内容可以发生改变(地址不能改变) 优先考虑使用const , 如果变量会发生改变,就使用let , 最后使

  • es6新增对象的实用方法总结

    目录 一.属性的简写 二.属性名表达式 三.super关键字 四.扩展运算符的应用 五.属性的遍历 六.对象新增的方法 Object.is() Object.assign() Object.getOwnPropertyDescriptors() Object.setPrototypeOf() Object.getPrototypeOf() Object.keys() Object.values() Object.entries() Object.fromEntries() 总结 一.属性的简写

  • ES6新增数据结构WeakSet的用法详解

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = new WeakSet() ws.add(1) 结果是报类型错误. TypeError: Invalid value used in weak set 添加一个对象. const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) conso

  • javascript ES6 新增了let命令使用介绍

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效. for循环的计数器,

  • es6 super关键字的理解与应用实例分析

    本文实例讲述了es6 super关键字的理解与应用.分享给大家供大家参考,具体如下: 前面介绍了static关键字,class类还有另外一个关键字super super不仅仅是一个关键字,还可以作为函数和对象. 函数:在子类继承父类中,super作为函数调用,只能写在子类的构造函数(constructor)里面,super代表的是父类的构造函数, 难点理解 但是执行过时supre()代表的是子类,super()里面的this指向子类的实例对象this. class A { constructor

  • 浅谈ES6新增的数组方法和对象

    es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法 for (let value of arr) { console.log(value);//输出1,2,3,4,3,2,1,2 } 1. 数组.map() 返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map let arr=[1,2,3,4,3,2,1,2]; let newArr=arr.map((val

  • ES6新增的math,Number方法

    ES6新增的math,Number方法,下面总结了一些我觉得有用的 Nunber.isInteger()判断是否为整数,需要注意的是1,和1.0都会被认为是整数 console.log(Number.isInteger(1.0))//true console.log(Number.isInteger(1))//true console.log(Number.isInteger("1"))//false console.log(Number.isInteger("1.1&quo

随机推荐