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

发布时间:2019-08-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript 声明变量var、let、const详解及示例脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1. varletconst概述

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

ES6为我们带来了letconst,我们先来了解一下三个标识符的特征:

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

但是,在ifforwhile这样的块级语句内通过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一般用于forwhile)循环和数学表达式计算中

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

脚本宝典总结

以上是脚本宝典为你收集整理的javascript 声明变量var、let、const详解及示例全部内容,希望文章能够帮你解决javascript 声明变量var、let、const详解及示例所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。