javascript中var、let和const的区别

在javascript中,var、let和const都可以用来声明变量,那么三者有什么区别呢?要回答这个问题,我们可以从先想想:三种不同的声明会影响变量的哪些方面?这些方面也就是变量的特性,那么变量有哪些特呢?无非就是两个:一个是变量的数据类型,是数字,字符串还是数组或者其他的,另一个就是变量的作用域,是全局的还是局部的,又或者是某个代码块的。因此我们可以从以下两个方面来探究三种声明方式的区别:

1.声明后变量的数据类型有什么不同?

2.声明后变量的作用域有什么不同?

先看第一个方面,数据类型有何不同

 1     //声明数字有何不同
 2     var n1 = 10;
 3     let n2 = 10;
 4     const n3 = 10;
 5     console.log(typeof n1);  //number
 6     console.log(typeof n2);  //number
 7     console.log(typeof n3);  //number
 8
 9     //声明字符串有何不同
10     var s1 = "hello";
11     let s2 = "hello";
12     const s3 = "hello";
13     console.log(typeof s1);  //string
14     console.log(typeof s2);  //string
15     console.log(typeof s3);  //string
16
17     //声明数组有何不同
18     var arr1 = [1,2,"a"];
19     let arr2 = [1,2,"a"];
20     const arr3 = [1,2,"a"];
21     console.log(typeof arr1);  //object
22     console.log(typeof arr2);  //object
23     console.log(typeof arr3);  //object
24     console.log(arr1 instanceof Array);  //true,判断是否是数组
25     console.log(arr2 instanceof Array);  //true
26     console.log(arr3 instanceof Array);  //true
27
28     //声明对象有何不同
29     var o1 = {1:"a",2:"b"};
30     let o2 = {1:"a",2:"b"};
31     const o3 = {1:"a",2:"b"};
32     console.log(typeof o1);  //object
33     console.log(typeof o2);  //object
34     console.log(typeof o3);  //object
35
36     ////声明后不设置初始值有何不同
37     var u1;
38     let u2;
39     // const u3; //报错,const声明变量必须设置初始值
40     console.log(typeof u1);  //undefined
41     console.log(typeof u2);  //undefined
42     // console.log(typeof u3);

可以看到,三种声明方式不管是声明数字、数组、对象都没有差别,但是在声明后不设置初始值时有一点不同,var和let可以声明后不设置初始值,而const不行。

再来看声明后作用域有何不同,先看最常见的var

1 var a = 1;
2     f();
3     console.log(a);  //1
4     function f() {
5         console.log(a);  //undefined
6         var a = 10;
7         console.log(a);  //10
8     }

执行后结果为

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>

//执行结果012345
{    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定义的变量是全局变量,不能修改,不能重复定义,不初始化会报错

原文地址:https://www.cnblogs.com/zzliu/p/10460416.html

时间: 2024-08-29 13:04:45

javascript中var、let和const的区别的相关文章

JavaScript中的property和attribute的区别

时间: 2013-09-06 | 10:24 作者: 玉面小飞鱼 分类: DOM, js相关, 前端技术 2,222 次浏览 1. 定义 Property:属性,所有的HTML元素都由HTMLElement类型表示,HTMLElement类型直接继承自Element并添加了一些属性,添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className.DOM节点是一个对象,因此,他可以和其他的JavaScript对象一样添加自定义的属性以及方

JavaScript中object和Object有什么区别

JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 -------------------------------------------------------------------- 这个问题和我之前遇到的问题非常相似,我认为这里有两个问题需要解决,一个是运算符new的作用机制,一个是function关键字和Funtion内置对象之间的区别.看了一些前辈的博客和标准,这里帮提问者总结一

Javascript中的toString和valueOf的区别

语法:objectname.toString([radix])objectname要为其搜索字符串表示形式的对象.radix可选,为将数字值转换为字符串指定一个基数. 此值仅用于数字.toString 方法是一个所有内置的 JavaScript 对象的成员.它的行为取决于对象的类型: valueOf:返回指定对象的基元值. 语法:object.valueOf( )object 引用是任何内部 JavaScript 对象,将通过不同的方式为每个内部 JavaScript 对象定义 valueOf

面试官竟然问我JavaScript中var、let和const有什么区别?

在JavaScript中有三种声明变量的方式:var.let.const. 目录1.var let const1.var(1)var定义的变量在之后可以修改,如果不初始化会输出undefined,不会报错. var a;console.log(a); // undefined// -----------------------------console.log(a); // undefinedvar a = 1;12345(2)var定义的变量,可以跨块访问, 不能跨函数访问. (3)var只有

在 JavaScript 中 prototype 和 __proto__ 有什么区别

本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的地方,就是 prototype 和 __proto__ 到底是干嘛的 1. __proto__ 就是 Javascript中 所谓的原型 (这里,我们还是拿具体的例子来说明吧) function A (name) { // 这里是一个构造函数 thia.name = name } var Aobj

关于javascript中apply()和call()方法的区别

如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的”偏见”,因为这对您来说绝对是一片新大陆,让JavaScrip 好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上. 区分apply,call就一句话, foo.call(

深入理解Javascript中构造函数和原型对象的区别

在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor),instanceof运算符的一些特点.如果对prototype和构造函数不熟悉,可以前往Javascript中prototype属性的详解 和 Javascript 中构造函数与new命令的密切关系 仔细的品味品味.先来做一个简单的回顾. 首先,我们知道,构造函数是生成对象的模板,一个构造函数可以

javascript中常见undefined与defined的区别

在JavaScript中相信"undefined"与"defined"对大家来说都肯定不陌生,但是又不是很清楚它们的区别,先看两个demo我们再说, 例1. console.log(parms); //在控制台出现 Uncaught ReferenceError: parms is not defined 例2. var flag; console.log(flag); //在控制台出现 undefined 通过上面两个例子就能很清楚的看出它两的区别了,not de

JavaScript中var关键字的使用详解

作用 声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? 1 2 3 4 5 6 7 8 <script type="text/javascript">   function Define() {     a = 2;   }   function Hello() {     alert(a);   } </script>