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

2024年3月31日 136次阅读 来源: 一楼

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，以保证代码的整洁和可读。

    原文作者：一楼
    原文地址: https://segmentfault.com/a/1190000015325807
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞