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. 2D过渡模块的其他属性

    官网上关于过渡属性的值: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称. 3 ...

  2. keil安装

    安装准备: 一个keil安装程序,一个注册机 安装步骤.... 软件安装: 打开C51V901.EXE 安装程序 点击Next, 同意上述证书协议 重复点击Next,知道出现finish停下. 3个多 ...

  3. 入门项目 A5-1 interface-bank 第三方接口1

    from db import db_handler # 提现接口 def withdraw_interface(name, money): # 定义提现接口,传入name与money参数 user_d ...

  4. Python全栈之路----数据类型—字典

    字典:可变,一种key-value的数据类型 info = { 'stu1101' : 'TengLan Wu' , 'stu1102' : 'LongZe Luola' , 'stu1103' : ...

  5. Apache ZooKeeper 服务启动源码解释

    转载:https://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper-code/ 本文首先讲解了 Apache ZooKeeper 服 ...

  6. js layer.js

    var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 关闭弹出页 全屏弹出页面 layer.o ...

  7. Centos7 安装Nginx 防火墙开放80端口给外网访问

    Centos7的防火墙改成了firewall,不再叫iptables,开放端口的方法如下: firewall-cmd --zone=public --add-port=80/tcp --permane ...

  8. 寒假作业pta3

    某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C),或者什么也不放(X).捕鼠夹可重复利 ...

  9. Centos6.8 搭建Nginx服务器

    Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,其特点是占有内存少,并发能力强,业界内的评价一直很不错,反正用过的都说好,虽然我还 ...

  10. bootstrap table表格前台分页,点击tab选项,重新刷新表格

    近期做项目的时候使用bootstrap表格前台分页,并且有一个tab切换选项,共用一个table,效果如下图,上方是tab选项,下方是table: 在实际实现的时候,在默认状态下,表格翻到了第5页,此 ...