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

tuomao 发布于2019-08-22 18:07 / 2667人阅读

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

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

GPU云服务器云服务器变量及数据详解变量var 声明变量 javascript中var

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

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

JavaScript声明变量详解

摘要：命令用于规定模块的对外接口，命令用于输入其他模块提供的功能所以在一定程度上来说，也具有声明变量的功能。当没有声明，直接给变量赋值时，会隐式地给变量声明，此时这个变量作为全局变量存在。前言如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过在ES5阶段，JavaScript 使用 var 和 function 来声明变量， ES6 中又添加了let、const、imp...

paulquei 2019-08-26 13:39 评论0 收藏0
ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解

摘要：变量声明与赋值值传递浅拷贝与深拷贝详解归纳于笔者的现代开发语法基础与实践技巧系列文章。变量声明在中，基本的变量声明可以用方式允许省略，直接对未声明的变量赋值。按值传递中函数的形参是被调用时所传实参的副本。 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了...

snowLu 2019-08-21 11:55 评论0 收藏0
深入理解ES6 - var-let-const

摘要：声明变量不存在变量提升。临时死区，而且不能在声明之前访问它。禁止重复声明相同的变量，否则报错。不存在变量提升，一旦执行快外就会立即销毁。声明不允许修改绑定，但允许修改值，也就是说用创建对象后，可以修改该对象的属性值。知识点 var 声明变量： 1、存在变量提升，实际上var无论在哪里声明，都会被当做当前的作用域顶部声明变量。 2、可以重复声明，后声明的变量会覆盖前声明的变量。 let...

alexnevsky 2019-08-22 17:34 评论0 收藏0
ES5和ES6作用域详解

摘要：允许在块级作用域内声明函数。上面代码中，存在全局变量，但是块级作用域内又声明了一个局部变量，导致后者绑定这个块级作用域，所以在声明变量前，对赋值会报错。 ES5的作用域变量起作用的范围，js中能创建作用域的只能是函数 { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); //...

Dr_Noooo 2019-08-21 17:30 评论0 收藏0
ES6语法详解(一)

摘要：冻结对象可以使用方法。对象的解构赋值必须要属性名相同，顺序毫无影响。数组解构赋值默认值，当等号右边的值时，默认值生效。 let变量 let声明的变量在let命令所在的代码块中有效。不存在变量提升，只能先声明后使用。暂存死区如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量。 var a = 1; { ...

wendux 2019-08-26 11:53 评论0 收藏0