javascript中var、let和const的区别
在javascript中,var、let和const都可以用来声明变量,那么三者有什么区别呢?要回答这个问题,我们可以从先想想:三种不同的声明会影响变量的哪些方面?这些方面也就是变量的特性,那么变量有哪些特呢?无非就是两个:一个是变量的数据类型,是数字,字符串还是数组或者其他的,另一个就是变量的作用域,是全局的还是局部的,又或者是某个代码块的。因此我们可以从以下两个方面来探究三种声明方式的区别:
1.声明后变量的数据类型有什么不同?
2.声明后变量的作用域有什么不同?
先看第一个方面,数据类型有何不同
//声明数字有何不同
var n1 = 10;
let n2 = 10;
const n3 = 10;
console.log(typeof n1); //number
console.log(typeof n2); //number
console.log(typeof n3); //number //声明字符串有何不同
var s1 = "hello";
let s2 = "hello";
const s3 = "hello";
console.log(typeof s1); //string
console.log(typeof s2); //string
console.log(typeof s3); //string //声明数组有何不同
var arr1 = [1,2,"a"];
let arr2 = [1,2,"a"];
const arr3 = [1,2,"a"];
console.log(typeof arr1); //object
console.log(typeof arr2); //object
console.log(typeof arr3); //object
console.log(arr1 instanceof Array); //true,判断是否是数组
console.log(arr2 instanceof Array); //true
console.log(arr3 instanceof Array); //true //声明对象有何不同
var o1 = {1:"a",2:"b"};
let o2 = {1:"a",2:"b"};
const o3 = {1:"a",2:"b"};
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object ////声明后不设置初始值有何不同
var u1;
let u2;
// const u3; //报错,const声明变量必须设置初始值
console.log(typeof u1); //undefined
console.log(typeof u2); //undefined
// console.log(typeof u3);
可以看到,三种声明方式不管是声明数字、数组、对象都没有差别,但是在声明后不设置初始值时有一点不同,var和let可以声明后不设置初始值,而const不行。
再来看声明后作用域有何不同,先看最常见的var
var a = 1;
f();
console.log(a); //
function f() {
console.log(a); //undefined
var a = 10;
console.log(a); //
}
执行后结果为
undefined
10
1
可以看到用var声明的变量在函数外声明是全局变量,在函数内声明是局部变量,只能在函数内使用,第5行console.log(a)在声明的后面,所以会打印undefined,注意这里解释器会检测到函数f内定义
了a,所以会打印undefined,如果把第6,7行注释掉,那么函数内会直接引用外部的全局变量,打印的都是1。
let是ES6中新增的命令,那么let与var有什么区别呢,来看一段代码
<script>
for (var i=0;i<5;i++) {
console.log(i)
}
console.log(i)
</script> //执行结果
0
1
2
3
4
5
{
var i = 1;
}
console.log(i);
1
可以看到,这里再次证明了var声明的是全局变量,不受块级作用域(花括号)的限制。而let的作用域仅限于块级作用域
{
let i = 1
}
console.log(i); //ReferenceError: i is not defined
看到这里你大概可以想到了,let可以用于for循环,完成一些独特的功能,来看一道面试题
for (var i =0;i < 10; i++) {
setTimeout(function () {
console.log(i);
},0)
} //输出结果
//10个10
如果把var改成let,结果会怎样呢
for (let i =0;i < 10; i++) { //在for循环(块级作用域)内部使用,变量会被固定
setTimeout(function () {
console.log(i); //i是循环体内的变量,不受外界影响
},0)
} //输出结果
//0 1 2 3 4 5 6 7 8 9
ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
let的另一个区别是不能重复声明。
const意为constant variable,也就是固定的变量,不能被重新赋值,且需要在初始化时给其指定值,要不然会报错
const b=0;
b=1; //TypeError: Assignment to constant variable.
console.log(b); let hello = "hello world";
console.log(hello);
let hello = "world"; // SyntaxError: Identifier 'hello' has already been declared
总结
1. var定义的变量是全局变量,可以修改,可以重复定义,不初始化会输出undefined
2. let定义的变量仅作用于块级作用域(不受外界影响),可以修改,但不能重复定义,不初始化会输出undefined
3. const定义的变量是全局变量,不能修改,不能重复定义,不初始化会报错
javascript中var、let和const的区别的更多相关文章
- JS中 var,let与const的区别
1.在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,声明的方式有 var . let . cons ...
- JavaScript中var和this定义变量的区别
JavaScript中var和this定义变量的区别 在js中声明变量时可以使用var和this,但使用this的有很大一部分参考书是没有的,经过查阅相关资料总结如下: 用var和this声明变量,存 ...
- javascript中var let const三种变量声明方式
javascript中var let const三种变量声明方式 1.var ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...
- JavaScript中值类型和引用类型的区别
JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...
- JavaScript中object和Object有什么区别
JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...
- JavaScript中=、==、===以及!=、!==的区别与联系
JavaScript中=.==.===以及!=.!==的区别与联系 在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...
- var和let/const的区别
let和const是 ES6 新增的命令,用于声明变量,这两个命令跟 ES5 的var有许多不同,并且let和const也有一些细微的不同,再认真阅读了阮一峰老师的文档后,发现还是有一些不知道的细节. ...
- JavaScript中var、let和const的区别(转载)
一.前言 在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,声明的方式有 var . let . c ...
- javascript中var、let、const的区别
这几天修改别人的js,发现声明变量有的用var,有的用let,那它们有什么区别呢? javascript中声明变量的方式有:var.let.const 1.var (1)作用域: 整个函数范围内,或者 ...
随机推荐
- 脚本监控web服务器,工作不正常发邮件提醒
背景介绍公司有多个web网站,没有配置监控服务,每天都需要定时检查服务器是否工作正常.低效耗时. 代码片段 #!/bin/bash # Author Jerry.huang (Email:Jerry. ...
- Hdoj 1007 Quoit Design 题解
Problem Description Have you ever played quoit in a playground? Quoit is a game in which flat rings ...
- Python学习day4 数据类型Ⅱ(列表,元祖)
day4 知识补充&数据类型:列表,元祖 1.知识补充 1.编译型/解释型 编译型:在代码编写完成之后编译器将其变成另外一个文件教给你算计执行. 代表语言:Java,c,c++ ,c#, Go ...
- Spring Data JPA Batch Insertion
转自:https://www.jeejava.com/spring-data-jpa-batch-insertion/ Spring Data JPA Batch Insertion will sho ...
- Java collection 容器
http://www.codeceo.com/article/java-container-brief-introduction.html Java实用类库提供了一套相当完整的容器来帮助我们解决很多具 ...
- sha256加密
sha256: 1.使用npm安装 :npm install js-sha256 2.然后在组件中methods定义方法,在调用 // sha256加密密码 setSha(){ let sha256 ...
- 震撼:多线程下的操作离不开synchronized
昨天在写一个聊天程序,在发送消息的时候是采用单独的一个线程,接收消息是在另一个线程中完成. 我在测试的过程中发现,有的时候当消息比较多时,比如: 当我刚刚发送完一条消息,这个时候要将我发送的消息添加到 ...
- linux 日常中会用到的命令(持续更新)
1. grep 比如,我要查看www目录下所有包含 “聊天室” 的文件 grep -rn "聊天室" * 比如我要把 www 目录下所有文件中的 聊天室 替换为 ...
- 第二十七篇-新建Activity
新建Activity实现页面之间的跳转与传值. layout1.xml <?xml version="1.0" encoding="utf-8"?> ...
- linux系统调用之用户管理
getuid 获取用户标识号 setuid 设置用户标志号 getgid 获取组标识号 setgid 设置组标志号 getegid 获取有效组标识号 setegid 设置有效组标识号 geteuid ...