资讯专栏INFORMATION COLUMN

var let const 区别

Ververica / 3214人阅读

摘要:区别标签空格分隔规范新增了两种变量声明方式,虽然在项目中也经常用到和但是和到底有什么区别,今天做下总结。不允许重复声明不允许在相同作用域内,重复声明同一个变量。

var let const 区别

标签(空格分隔): ES6

ES6规范新增了let、const两种变量声明方式,虽然在项目中也经常用到let和const但是和var到底有什么区别,今天做下总结。

1、let 声明的变量只在它所在的代码块有效;
for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log("aaa");
console.log(i); // i is not defined

上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。如下var代码:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function() {
    console.log(i);
  }
}
a[6](); // 10

变量i是var声明的,在全局范围内都有效,所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮i的值。
但是如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6. 如下:

var b = [];
for (let j = 0; j < 10; j++) {
    b[j] = function() {
        console.log(j);
    }
}
b[6](); // 6
2、let不存在变量提升

let 不像var 那样会发生 ‘变量提升’ 现象,因此,变量需要先声明然后再使用,否则报错;

// var 的情况
console.log(foo);  // undefined
var foo = 2;

// let的情况;
console.log(bar);  // 报错
let bar = 2;
3、暂时性死区

快级作用域内存在let命令,它所声明的变量就绑定在这个区域,不再受外部影响;如下代码:

var tmp = 123;
if (true) {
    tmp = "abc";
    let tmp;
    console.log(tmp); // tmp is not defined
}

上面代码定于全局变量tmp,但是在快级作用域内let又声明了一个局部变量tmp,导致绑定了这个快级作用域;因此打印出tmp会报错。

4、不允许重复声明

let 不允许在相同作用域内,重复声明同一个变量。如下代码排错

function a() {
    let a = 10;
    var a = 1;
    console.log(a);
}
a();
function a() {
    let a1 = 10;
    let a1 = 1;
    console.log(a1);
}
a();

也不能在函数内部重新声明参数。

function func1(arg) {
    let arg; // 报错
}
function func2(arg) {
    {
        let arg; // 不报错
    }
}

ES6的块级作用域

function f1() {
    let n = 5;
    if (true) {
        let n = 10;
    }
    console.log(n); // 5
} 
f1()

上面的代码有2个代码块,都声明了变量n,运行后输出5,说明了外层代码块不受内层代码块的影响,如果使用了变量var,那么输出的就是10;

5、const命令

const 声明一个只读的常量,一旦声明,常量的值就不允许改变。
如下代码:

const a = 1; 
a = 2; 
console.log(a);  //报错

也就是说 const 一旦声明了变量,就必须初始化,不能留到以后赋值。如果使用const声明一个变量,但是不赋值,也会报错;如下代码:

const aa;  // 报错

const的作用域与let命令相同;只在声明所在的块级作用域内有效。

if (true) {
    const aa = 1;
} 
console.log(aa);  // 报错

不可重复声明 (和let一样)

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

但是对于复合类型的变量,比如数组,存储的是一个地址,不可改变的是这个地址,即不能把一个地址指向另一个地址,但是对象本身是可变的,比如可以给它添加新的属性,如下代码:

const a33 = [];
a33.push("Hello"); // 可执行
a33.length = 0;    // 可执行
a33 = ["55"]  // 报错

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97248.html

相关文章

  • javascript中varletconst声明的区别

    摘要:声明的变量存在变量提升,声明的变量不存在变量提升。声明的变量允许重新赋值,声明的变量不允许重新赋值。注意跨脚本声明重复变量也会报错。中出现的任何元素在声明中出现,语法错误。中的是如此的怪异。对中的声明进行实例化。 我在上一篇文章javascript中词法环境、领域、执行上下文以及作业详解中的最后稍微提到了有关var、let、const声明的区别,在本篇中我会重点来分析它们之间到底有什么...

    Yujiaao 评论0 收藏0
  • varlet/const区别

    showImg(https://segmentfault.com/img/remote/1460000017757580); let和const是 ES6 新增的命令,用于声明变量,这两个命令跟 ES5 的var有许多不同,并且let和const也有一些细微的不同,再认真阅读了阮一峰老师的文档后,发现还是有一些不知道的细节... 博客、前端积累文档、公众号、GitHub 内容: var和let...

    SHERlocked93 评论0 收藏0
  • 总结下varletconst区别

    摘要:前言和的区别是老生常谈,看到网上一些文章的总结,有的不太全面,甚至有的描述不太准确,在这里尽量全面的总结下这三者的区别。最后以上大概是总结后的内容,看来,还是多用吧。 前言 var 和 let 的区别是老生常谈,看到网上一些文章的总结,有的不太全面,甚至有的描述不太准确,在这里尽量全面的总结下这三者的区别。 let 是 ES6新增的变量类型,用来代替 var 的一些缺陷,跟 var...

    pingink 评论0 收藏0
  • js中varletconst区别

    摘要:中的区别主要内容是中三种定义变量的方式,,的区别。定义的变量可以修改,如果不初始化会输出,不会报错。正确错误,必须初始化函数外定义有输出值函数外修改定义无法输出是常量,不可改变,一般大写,也是块级作用域。。。 js中var、let、const的区别 主要内容是:js中三种定义变量的方式const, var, let的区别。 var定义的变量可以修改,如果不初始化会输出undefined...

    Yuqi 评论0 收藏0
  • es6中 var let const区别

    摘要:我认为这样是可行的主要是通过设置变量的可写属性为报错不报错通过以上两个例子发现这种实现应该是可以的 由一道面试题引发的思考~~如何用es5实现es6中类似const的效果? var:有变量提升,提升到当前作用域的最前 let: (1)let不会有变量提升:且let申明的变量在块级作用域中存在暂时性死区 (暂时性死区:在块级作用域中,从块级的顶部到变量申明之前,...

    刘永祥 评论0 收藏0

发表评论

0条评论

Ververica

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<