声明变量的三大代表var、let和const

ES6声明变量

ES6中新增了let和const关键字来定义变量：

• var：ES5和ES6中，在某种意义上可以用来定义全局变量（variable简写）
• let：定义局部变量，替代let，（同一作用域不允许重复定义）
• const：定义常量（定义后，不可修改）

var：全局变量

// 全局作用域
{
    // 局部作用域
    var x = 1;
}
console.log(x); // ?

变量x在局部作用域内声明为局部变量，但是输出语句在在全局变量，但是此时的输出为1，而不是undefined

// 全局作用域
var x = 1;
{
    // 局部作用域
    var x = 2;
}
console.log(x); // ?

此时输出为2，原因很简单就是因为var声明的x为全局变量

总结：用var关键字声明的变量会变成全局变量，这样就会污染全局变量

回到顶部 目录

let：局部变量

// 全局作用域
var x = 1;
{
    // 局部作用域
    let x = 2;
}
console.log(x); // ?

此时输出为1，因为let声明的为局部变量，只会在局部作用域内有效，不会影响全局变量x

// 全局作用域
var x = 1;
{
    // 局部作用域
    let x = 2;
}
console.log(x); // ?

// 全局作用域
var x = 1;
{
    console.log(x) // Cannot access 'x' before initialization
    // 局部作用域
    let x = 2;
}

面试题 : 下面输出什么？ 怎么让它输出0,1,2,3,4…buttons.length

var buttons = document.getElementsByTagName("button");
for(var i = 0;i < buttons.length;i++){
    buttons[i].onclick = function(){
        console.log(i);
    }
}

打印buttons.length遍buttons.length，解决方案

var buttons = document.getElementsByTagName("button");
for(var i = 0;i < buttons.length;i++){
    (function(i){
        buttons[i].onclick = function(){
            console.log(i);
        }
    })(i);
}

var buttons = document.getElementsByTagName("button");
for(let i = 0;i < buttons.length;i++){
    buttons[i].onclick = function(){
        console.log(i);
    }
}

1. let声明的变量不会挂在window中，不会造成全局变量的污染
2. 新增了一个块级作用域{}，以前只有函数作用域，全局作用域
3. let是不允许重复声明
4. let不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘x’ before initialization） 面试点

回到顶部 目录

const：常量

// 全局作用域
const x = 1;
{
   
    // 局部作用域
    const x = 2;
}
 console.log(x) // 1

// 全局作用域
const x = 1;
{
    console.log(x) // Uncaught ReferenceError: Cannot access 'x' before initialization
    // 局部作用域
    const x = 2;
}

// 全局作用域
const x = 1;
{
    console.log(x) // Uncaught TypeError: Assignment to constant variable.
    const x = 2;
}

1. const声明的变量不会挂在window中，不会造成全局变量的污染
2. const是不允许重复声明
3. const不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘num’ before initialization） 面试点
4. const不允许被修改,不允许改变内存空间的地址
5. const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址
6. 能使用const就使用const，不能使用就用let。常量的效率比变量要高
7. const其实可以修改对象的值，这就说明const不能修改栈里面的数据，但是可以修改堆里面的

回到顶部 目录