var,let和const的区别

分类: JavaScript 作者: 浏览:102 时间:2019年4月27日 23:38 评论:0

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发布。涵盖了 ES2015、ES2016、ES2017 等等,ES6 主要是为了解决 ES5 的先天不足。

var

通过var定义的全局变量,会变量提升,作用域是全局的,可以重复声明,不会出现报错,也没有提示.

console.log(a) // undefined  
var a = 1;  
var a = 2;  
console.log(a) // 2  

当多人协作开发时,修改某一块的代码时,有可能会造成重复声明了相同的变量,导致我们所需要的数据被覆盖,而我们可能需要好长时间去检查才会找到问题的所在,这时我们有需要let

let

定义变量,和var一样,不过一般用于块级作用域,也就是花括号{},ES6推荐在函数中使用let,而不是var

let a = 1;  
let a = 5;  
console.log(a);  
// 会报错(a已经被声明了) Identifier "a" has already been declared  
{  
let b = 1;  
}  
console.log(b); // ReferenceError: b is not defined  

不会变量提升

console.log(a); // ReferenceError: a is not defined  
let a = 1;  
let b;  
console.log(b) // undefined  

有5个li标签,通过点击事件获取li的索引

for(var i = 0; i < 5; i++){  
    aLi[i].i = i;  
    aLi[i].onclick = function () {  
        alert(this.i) // 0 1 2 3 4  
    }  
}  

我们会发现所有li的索引都是最后一个i值,这是由于JS引擎执行是按照从左到右的顺序,先执行了for循环,同时将循环中的代码也一并执行了,这个时候i的值已经成了最后一个,然后才给click事件绑定的
解决办法:
1. 使用闭包

let aLi = document.getElementsByTagName('li');  
for(var i = 0; i < 5; i++){  
    (function (i){  
        aLi[i].onclick = function () {  
            alert(i) // 0 1 2 3 4  
        }  
    })(i)  
}  
  1. 使用自定义属性
for(var i = 0; i < 5; i++){  
    aLi[i].i = i;  
    // 给标签添加一个自定义属性  
    aLi[i].onclick = function () {  
        alert(this.i) // 0 1 2 3 4  
        // 这里this.i指的是自定义属性的i  
    }  
}  

但这样终究是让我们多写了几行代码,我们的宗旨是能少写就少写,能不写就不写,这里我们把var换成let就解决了,是不是简单很多

for(let i = 0; i < 5; i++){  
    aLi[i].onclick = function () {  
        alert(i) // 0 1 2 3 4  
    }  
}  

const

通过const定义的变量不可以修改,而且必须初始化

const TYPE;  
// 会报错,必须赋值完成初始化  Missing initializer in const declaration  

const TYPE = 1;  
TYPE = 2;  
// 也会报错,定义的常量不可以修改 Assignment to constant variable.  

总结:

let声明的变量不具备变量提升;letconst 声明只在最靠近的一个块中(花括号内)有效;使用常量const 声明时必须被赋值;定义常量时使用大写变量表示,符合规范

赞(1)
下一篇:

您可能感兴趣的:

评论(0)

  • 暂无评论