详解js中let与var声明变量的区别
ES6 新增了let命令，用来声明局部变量，所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。
1.ES6可以用let定义块级作用域变量
代码如下：
function f1(){
{
var a = 10;
let b = 20;
}
console.log(a); // 10
console.log(b); // Uncaught ReferenceError: b is not defined
}
f1();
说明：在ES6之前只有全局作用域和函数作用域，在ES6中新增了块级作用域，用{}花括号表示。var 声明的变量a在花括号外面仍然是会起作用的，但是let声明的变量b只有在花括号里面才会起作用的，在块级作用域内。
2.let配合for循环的独特应用
代码如下：
function f2(){
var i = 5;
for(var i=0;i<=10;i++){
}
console.log(i); // 11
var j = 5;
for(let j=0;j<=10;j++){
}
console.log(j); // 5
}
f2();
说明：let非常适合用于for循环内部的块级作用域，在for循环当中，每一次的执行都是一个全新的独立的块级作用域。使用let声明的变量在for循环当中不会受到循环体外面的影响，不会受到变量污染，不会发生改变。对于var声明的变量i会受到for循环的影响，受到变量污染，而let声明的变量j不会受到for循环的影响。
3.let没有变量提升与暂时性死区
代码如下：
function f3(){
// 变量提升
function f31(){
console.log(a); // undefined
var a = 10;
console.log(b); // Uncaught ReferenceError: b is not defined
let b = 10;
}
f31();
说明：在ES6中，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。暂时性死区(TDZ)：在代码块内，使用let命令声明变量之前，该变量都是不可用的。在f31函数中，用var声明的变量a发生了变量提升，打印出的值为undefined 未定义，而用let声明的变量b报错Uncaught ReferenceError，不会发生变量提升。在f32函数中，用使用let命令声明的变量a之前，都属于变量a的暂时性死区，形成封闭作用域，该变量都是不可用的，会报错，Uncaught ReferenceError: a is not defined。在let声明变量后，它是一个未定义的变量。当再给变量a进行赋值操作以后，它的值可以正常打印出来。
4.let变量不能重复声明
代码如下：
function f4(){
let a = 10;
let a = 20;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared
let b = 10;
var b = 20;
console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared
}
f4();
说明：let不允许在相同作用域内，重复声明同一个变量，否则报错。在函数f4中，无论是用两个let声明同一个变量a，还是一个let声明变量b和一个var声明变量b，都是会报错的，Uncaught SyntaxError: Identifier ‘a' has already been declared 和 Uncaught SyntaxError: Identifier ‘b' has already been declared ， 所以不能够重复声明同一个变量。
以上所述是小编给大家介绍的let与var声明变量区别详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JavaScript中var、let、const区别浅析
下面通过代码给大家介绍JavaScript中var.let.const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined //2.let是块级作用域,函数内部使用let定义后,对函数外部无影响. let c = 3; console.log(c) function change(){ let c = 6; console.log(c) } change(); (1)只要
-
js中let和var定义变量的区别
javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是"javascript 严格模式",比如下述的代码运行就会报错: let hello = 'hello world.'; console.log(hello); 错误信息如下: let hello = 'hello world.'; ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup
-
JavaScript变量声明var,let.const及区别浅析
var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. function a() { // 当a被调用时, var y = 2; // y被声明成函数a作用域的变量,然后赋值成2. console.log(x, y); // 0 2 function b() { // 当b被调用时, x = 3; // 全局变量x被赋值为3,不生成全局变量. y = 4;
-
jQuery中的for循环var与let的区别
今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.ajax({ type: "get", url: "//////////////////////////", success: function (result) { rs = JSON.parse(result).data; for (var i = 0; i <
-
JavaScript中const、var和let区别浅析
在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b:' + b);//无法输出 2.var定义的变量可以修改,
-
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
-
详解js中let与var声明变量的区别
ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增
-
详解JS中continue关键字和break关键字的区别
目录 1.框架 2.简单介绍 3.代码演示 4.演示break 1.框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> </script> </body> </html> 2.简单介绍 1.在javascr
-
详解js中Number()、parseInt()和parseFloat()的区别
一:Number() 如果是Boolean值,true和false值将分别被转换为1和0. 如果是数字值,只是简单的传入和返回. 如果是null值,返回0. 如果是undefined,返回NaN. 如果是字符串: a. 如果字符串中只包含数字时,将其转换为十进制数值,忽略前导0 b. 如果字符串中包含有效浮点格式,如"1.1",将其转换为对应的浮点数字,忽略前导0 c. 如果字符串中包含有效的十六进制格式,如"0xf",将其转换为相同大小的十进制数值 d. 如果字
-
详解JS中的对象字面量
前言 在 ES6 之前,js中的对象字面量(也称为对象初始化器)是非常基础的.可以定义两种类型的属性: 键值对{name1: value1} 获取器{ get name(){..} }和 设置器{ set name(val){..}}的计算属性值 var myObject = { myString: 'value 1', get myNumber() { return this._myNumber; }, set myNumber(value) { this._myNumber = Number
-
详解js中构造流程图的核心技术JsPlumb（2）
前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式和颜色效果代码示例 大概的效果如图: 这些效果看着很简单,那么,我们如何用代码去实现它呢.上章我们说过,JsPlumb的连线样式是由点的某些属性决定的,既然如此,我们就通过设置点的样式来动态改变连线的样式即可.来看代码: 首先来看看连线类型的那个select <div id="btn_line
-
详解js中的几种常用设计模式
工厂模式 function createPerson(name, age){ var o = new Object(); // 创建一个对象 o.name = name; o.age = age; o.sayName = function(){ console.log(this.name) } return o; // 返回这个对象 } var person1 = createPerson('ccc', 18) var person2 = createPerson('www', 18) 工厂函数
-
详解js中的原型，原型对象，原型链
理解原型 我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.看如下例子: function Person(){ } Person.prototype.name = 'ccc' Person.prototype.age = 18 Person.prototype.sayName = function (){ console.log(this.name); } var person1 = ne
-
实例详解JS中的事件循环机制
目录 一.前言 二.宏.微任务 三.Tick 执行顺序 四.案例详解 1.掺杂setTimeout 2.掺杂微任务,此处主要是Promise.then 3.掺杂async/await 一.前言 之前我们把react相关钩子函数大致介绍了一遍,这一系列完结之后我莫名感到空虚,不知道接下来应该更新有关哪方面的文章.最近想了想,打算先回归一遍JS基础,把一些比较重要的基础知识点回顾一下,然后继续撸框架(可能是源码.也可能补全下全家桶).不积跬步无以至千里,万丈高楼咱们先从JS的事件循环机制开始吧,废话
-
详解JS中的compose函数和pipe函数用法
compose函数 compose函数可以将需要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数.我们考虑一个简单的需求:这个需求很简单,直接一个计算函数就行: const calculate = x => (x + 10) * 10; let res = calculate(10); console.log(res); // 200 但是根据我们之前讲的函数式编程,我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤,于是我们拆出了一个加法函数和一个乘法函数: cons