javascript 声明变量var、let、const详解及示例

1. var、let、const概述

ES6发布前，Javascript只能经过var声明变量的方式，常量、块级变量、函数变量这些概念的差异都不能很好的体现出来，于此同时，加入你要使用或者提供一个api，var声明的变量可随时被修改和从新分配的问题，会让你时刻担忧代码是否能正常运行。

ES6为咱们带来了let、const，咱们先来了解一下三个标识符的特征：

var: var定义一个变量，这个变量能够被从新分配、可能会被用于整个函数（Function Scope）
let: let定义一个变量，这个变量能够被从新分配，但let能够被用于块级做用域（Block Scope），不存在变量提高
const: const定义一个常量，不能够被从新分配

下面，咱们将从做用域、变量提高、变量从新分配几个方面讲解var、let、const的差异以及用法实践。

2. 做用域

var的做用域

当var定义的变量在函数内部时，经过函数外部调用变量，会致使 Uncaught ReferenceError: i is not defined 错误：

function doSomeThing () {
    var i = 1;
}

console.log(i); // Uncaught ReferenceError: i is not defined

可是，在if、for、while这样的块级语句内经过var声明变量，仍然能够在块语句外部访问：

if (true) {
    var i = 1;
}
console.log(i); // 1

let的做用域

let定义了一个拥有块级做用域属性的变量，一样的代码咱们用let声明变量能够看看结果：

if (true) {
    let j = 1;
}
console.log(j); // Uncaught ReferenceError: j is not defined

const的做用域

const的做用域规则和let相似，一样的代码咱们用const声明变量能够看看结果：

if (true) {
    const k = 1;
}
console.log(k); // Uncaught ReferenceError: k is not defined

3. 变量提高

先说结论：var声明的变量存在变量提高，let和const则不会

来一个例子体会一下：

console.log(m); // undefined
var m = 1;

console.log(n); // Uncaught ReferenceError: n is not defined
let n = 1;

console.log(v);
const v = 1; // Uncaught ReferenceError: v is not defined

推荐使用let和const理由之一，就是能够避免在使用后面声明的变量时出现未知错误。

4. let、const用法示例

明白var、let、const的区别，有助于咱们用更简洁易懂的方式表达咱们的代码。

先看看什么状况下你才用var?

经过上面的介绍，咱们大概了解到var区别于let、const的地方在是：函数做用域、可被修改、变量提高，因此在函数声明优先于变量声明，可是函数调用在变量声明以后的逻辑里能够用到var。

var f = {
    doThings: function () {
        console.log(i);
    }
}
var i = 1; // 声明变量

// 函数调用
f.doThings(); // 1

使用let的场景？

let通常用于for（while）循环和数学表达式计算中

for (let i = 0, len = 100; i < len; i++) {
    console.log(i);
}

那么有个问题，上面的for循环用var声明i变量也是能够的啊？

再来看一段代码：

for (var i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

// 控制台会一直输出100
// 改为 let

for (let i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

解释一下为何会这样：let的做用局的块级做用局，即每次循环的i的做用域就是本次循环，下一次循环从新定义变量i。

const的使用场景？

const声明了一个常量，推荐将const常量用于别名，下降常量的记忆难度。

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

结束

建议在"use strict"模式下，使用let和const替代var，以保证代码的整洁和可读。