var:

1)声明作用域:在函数内部,使用var定义一个变量(局部变量),在函数被调用完之后,该变量会被立即销毁。在定义变量时如果省略var,就会创建一个全局变量(不建议在局部作用域中定义全局变量,难维护,而且在严格模式下,会导致抛出ReferenceError)。

2)声明提升:把所有变量声明都拉到函数作用域的顶部。

function foo(){
console.log(age);
var age = 18;
}

其实和下面得一样

function foo(){
var age;
console.log(age);
age = 18;
}
foo();//undefined

3)可以反复多次使用var声明同一个变量。

function foo(){
var age = 16;
var age = 1;
var age = 2;
console.log(age);
}
foo();//2

4)全局声明:使用var在全局作用域中声明的变量会成为window对象的属性。

var age = 18;console.log(window.age);//18

let:

1)声明作用域:let声明的是块作用域,而var声明的是函数作用域。块作用域是函数作用域的子集,所以var作用域的限制同时也适用于let。

//var
if(true){
var age = 18;
console.log(age);//18
}
console.log(age);//18 //let
if(true){
let age = 18;
console.log(age);//18
}
console.log(age);//ReferenceError:age没有定义

2)声明提升:let声明的变量不会在作用域中被提升

3)不可以在一个块中反复多次使用let声明同一个变量

let age;
let age;//SyntaxError,标识符age已经声明过了

4)全局声明:使用let在全局作用域中声明的变量不会成为window对象的属性,但是var声明的变量会。

let age = 18;
console.log(window.age);//undefined

5)条件声明:在使用var声明变量时,由于声明会被提升,js会自动将多余的声明在作用域顶部合并为一个声明。而因为let的作用域是块,所以不可能检查前面是否已经使用let声明过同名变量。因此对于let,不能依赖条件声明模式。

6)for循环中的let声明:在用let声明迭代变量时,js在后台会为每个迭代变量声明一个新的迭代变量,每个setTimeout引用的都是不同的迭代变量。for-in 和for-of都适用。

for(var i=0;1<5;i++){}
console.log(i); //5 for(let i=0;1<5;i++){}
console.log(i); //ReferenceError:i没有定义
for(var i=0;1<5;i++){
setTimeout(()=>console.log(i),0);
}
//会输出5,5,5,5,5 for(let i=0;1<5;i++){
setTimeout(()=>console.log(i),0);
}
//会输出0,1,2,3,4

const:

1)const的行为和let基本相同,唯一的区别是const它声明变量时必须同时初始化变量,且尝试修改const声明的变量会导致运行时错误(TypeError)。

2)不允许重复声明

3)作用域也是块

4)const声明的限制只适用于它指向的变量的引用。换句话说,如果const变量引用的是一个对象,那么修改这个对象内部的属性并不违反const的限制。

const person = {};
person.name = "dage";

5)不能用const声明迭代变量,因为迭代变量会自增。但是可以声明一个不会被修改的for循环变量。这对for-in 和for-of循环特别有意义。

声明风格及最佳实践:先使用const,let次之,不使用var。

JavaScript var,let,const三个关键字的区别的更多相关文章

  1. javascript中var let const三种变量声明方式

    javascript中var let const三种变量声明方式 1.var  ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...

  2. 【前端面试】(四)JavaScript var let const的区别

    视频链接: JavaScript var let const的区别 - Web前端工程师面试题讲解 参考链接: JavaScript 变量 JavaScript Let JavaScript Cons ...

  3. JavaScript var, let, const difference All In One

    JavaScript var, let, const difference All In One js var, let, const 区别 All In One 是否存在 hoisting var ...

  4. php中this,self,parent三个关键字的区别辨析

    php中this,self,parent三个关键字的区别辨析 一.总结 一句话总结:this是指向对象实例的一个指针,self是对类本身的一个引用,parent是对父类的引用. 1.self关键字使用 ...

  5. JavaScript—var lef const区别

    今天刚刚学JavaScript 因为以前学过.学起来也就轻松.今天在练习.流程控制语句的时候,用WebStrom 写的时候 var 声明变量的时候 下面老是有一条白线.开始以为是开发环境有问题 然后, ...

  6. javascript函数命名的三种方式及区别

    1, function fn(val1,val2) { alert(val1+val2); } fn(1,2); 2, var fn=function() { alert(val1+val2); } ...

  7. final、finally、三个关键字的区别

    一 final 如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为final的.将变量或方法声明为final,可以 ...

  8. java中final,finally,finalize三个关键字的区别

    final 可以作为修饰符修饰变量.方法和类. 被final修饰的变量必须在初始化时给定初值,以后在使用时只能被引用而不能被修改. 被final修饰的方法不能够在子类中被重写(override): 被 ...

  9. Java中 intValue,parseInt,Valueof 这三个关键字的区别

    intValue()是把Integer对象类型变成int的基础数据类型: parseInt()是把String 变成int的基础数据类型: Valueof()是把给定的String参数转化成Integ ...

随机推荐

  1. H5系列之drag拖放

    H5中, 有个属性,draggable="true", 这个属性呢(默认false),需要加在标签上,加上去该标签就可以拖动了, 看下gif图吧 默认的标签,是不能拖动的,但是有两 ...

  2. Redis设计与实现一之简单的动态字符串

    简单的动态字符串 Redis没有直接使用C语言中的字符串,而是自己构建了SDS这样的一种简单动态字符串,并且将他作为Redis中字符串的默认的表示. 但是并未完全抛弃C语言字符串,只不过是在C语言字符 ...

  3. LeetCode周赛#208

    本周周赛的题面风格与以往不太一样,但不要被吓着,读懂题意跟着模拟,其实会发现并不会难到哪里去. 1599. 经营摩天轮的最大利润 #模拟 题目链接 题意 摩天轮\(4\)个座舱,每个座舱最多可容纳\( ...

  4. Java集合【9】-- Vector源码解析

    目录 1.Vector介绍 2. 成员变量 3. 构造函数 4. 常用方法 4.1 增加 4.2 删除 4.3 修改 4.4 查询 4.5 其他常用函数 4.6 Lambda表达式相关的方法 4.7 ...

  5. 通过Consul Raft库打造自己的分布式系统

    通用的CP系统有etcd和consul, 通用的对立面就是专用系统. 所以在某些场合是有这种需求的. 然而etcd embed的可用性极差, Windows上面跑会出现各种问题, 而且不能定制协议, ...

  6. sentinel快速入门

    转载:https://blog.csdn.net/noaman_wgs/article/details/103328793 https://github.com/alibaba/Sentinel/wi ...

  7. WPF 学习笔记(一)

    一.概述 WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,随着.NET Framework 3.0发布第一个版本.它提供了统一的 ...

  8. 第14.4节 使用IE浏览器获取网站访问的http信息

    上节<第14.3节 使用google浏览器获取网站访问的http信息>中介绍了使用Google浏览器怎么获取网站访问的http相关报文信息,本节介绍IE浏览器中怎么获取相关信息.以上节为基 ...

  9. 第15.16节 PyQt(Python+Qt)入门学习:PyQt中的信号(signal)和槽(slot)机制以及Designer中的使用

    老猿Python博文目录 老猿Python博客地址 一.引言 前面一些章节其实已经在使用信号和槽了,但是作为Qt中最重要的机制也是Qt区别与其他开发平台的重要核心特性,还是非常有必要单独介绍. 二.信 ...

  10. 上传到github

    我是为了自己下次不用再找github上传的地方了,索性就复制了一篇 转载于 https://blog.csdn.net/m0_37725003/article/details/80904824 首先你 ...