let是es6中新增命令,也是用来声明变量的,可能很多小伙伴都像我一样,定义变量的时候都会用var而很少用到let,那么,let和var到底有什么区别呢?

let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域,而let则被规定为块作用域,块作用域要比函数作用域小一些,但是如果两者既没在函数中,也没在块作用域中定义,那么两者都属于全局作用域。

全局作用域

var 和 let 声明的变量在全局作用域中被定义时,两者非常相似

let bar = 'hehe';
var baz = 'lala';

但是,被let声明的变量不会作为全局对象window的属性,而被var声明的变量却可以

console.log(window.bar);  //undefined
console.log(window.baz); // 'able'
函数作用域

var 和 let 在函数作用域中声明一个变量,两个变量的意义是相同的。

function  aFun(){
let bar = 'hehe'; // 函数作用域中的变量
var baz = 'lala'; // 函数作用域中的变量
}
块作用域

在块作用域中两者的区别较为明显, let只在for()循环中可用,而 var是对于包围for循环的整个函数可用

function  aFun1(){
// i 对于for循环外的范围是不可见的(i is not defined)
for(let i = 1; i<5; i++){
// i只有在这里是可见的
}
// i 对于for循环外的范围是不可见的(i is not defined)
}
function aFun2(){
// i 对于for循环外的范围是可见的
for(var i = 1;i<5; i++){
// i 在for 在整个函数体内都是可见的
}
// i 对于for循环外的范围是可见的
}
let 和var 重新声明

var允许在同一作用域中声明同名的变量,而let不可以

let me  = 'foo';
let me = 'bar'; //SyntaxError: Identifier 'me' has already been declared var me = 'foo';
var me = 'bar'; //这里me被替代了,是可以重复声明的

es6中还有一个声明变量的命令const,const和let都是在声明的块作用域中有效,但是let声明的变量可变,值和类型都可以改变,没有限制。const声明额变量不能改变,所以,const一旦声明一个变量,就必须马上初始化,不能留到以后赋值

const hehe; //报错,Missing initializer in const declaration

const a = 3;
a = 5; //报错,Uncaught TypeError: Assignment to constant variable.

以上就是let和var在不同作用域下的区别

那么在什么情况下要用到let呢?

let 在块作用域中有效,有的时候,我们为了降低变量污染的风险,在块作用域中使用let来代替var,这样不会污染块作用域的外部作用域,降低 bug率,使代码更安全。

作者:程序媛萌小雪Mxx
链接:https://www.jianshu.com/p/9f7f053f7204
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

javascript中let和var的区别的更多相关文章

  1. 认识JavaScript中Let和Var的区别

    本文转载自:https://www.cnblogs.com/songzxblog/p/11137117.html

  2. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  3. JavaScript中:表达式和语句的区别

    JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...

  4. Javascript中setTimeout和setInterval的区别和使用

    在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...

  5. JavaScript 中 Property 和 Attribute 的区别详解

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  6. javascript中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  7. javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别.下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引 ...

  8. JS中let和var的区别

    js中let和var定义变量的区别   let变量之前没见过,刚遇到,探探究竟. 以下转自:http://blog.csdn.net/nfer_zhuang/article/details/48781 ...

  9. JavaScript 中表达式和语句的区别

    1.语句和表达式 JavaScript中的表达式和语句是有区别的.一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数.下面的每行代码都是一个表达式: myvar3 + ...

随机推荐

  1. 《JavaScript Dom 编程艺术》读书笔记-第7章

    动态创建标记~内容包括: 1. 传统技术:document.write 和innerHTML 2. 深入剖析DOM方法:createElemen.createTextNode.appendChild和 ...

  2. oracle 11g安装过程

    1,工具:Oracle_win64_11gR2_database(64位oracle 11g数据库).iso安装文件,win10系统 2,右键,解压后,点击setup.exe,系统会检测本机的环境,如 ...

  3. php \r\n

    代码a: 复制代码 代码如下: <?php echo'hello</br>'; echo'world!'; ?> output: helllo world! 代码b: 复制代码 ...

  4. Cordova使用极光推送的方法

    1.在极光推送官网注册账号.应用,注意注册的包名要和app的包名一致 2.添加插件 cordova plugin add jpush-phonegap-plugin --variable APP_KE ...

  5. MySQL设置空密码

    因为刚安装的时候,MySQL强制设置密码,但是我需要设置MySQL为空密码 语句: ';

  6. XXS level6

    (1输入框输入与第五关 相同的payload 查看页面源代码,发现“href"变成了”hr_ef“ (2)查看PHP源代码 <?php ini_set("display_er ...

  7. 创建java类并实例化类对象

    创建java类并实例化类对象例一1.面向对象的编程关注于类的设计2.设计类实际上就是设计类的成员3.基本的类的成员,属性(成员变量)&方法 面向对象思想的落地法则一:1.设计类,并设计类的成员 ...

  8. 支持Oracle的模糊查询和精准查询

    相信所有的软件开发者都做过页面上的查询功能,而且很多都需要既支持模糊查询的,也需要支持精准查询的,而且不需要增加多余的功能,只需要在文本框中输入包含类似*之类的符号即可. 下面的方法就是通过*来判断到 ...

  9. day 12

    一,什么是装饰器? 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事 ...

  10. php正则判断是否同时有数字和字母

    1.php正则判断是否同时有数字和字母$subject = 'qq2';var_dump(preg_match('/^(?![0-9]+$)(?![a-zA-Z]+$)/', $subject)); ...