var、const、let的区别


目录

一、作用域

二、变量提升(Hoisting)

三、重复声明

[四、 赋值和重新赋值](#四、 赋值和重新赋值)

五、全局对象属性

六、使用场景

七、声明和赋值的数据类型


一、作用域

var声明的变量在函数作用域内有效,如果在函数外声明,它将成为全局变量。

letconst 声明的变量在块级作用域内有效,例如在 {} 内。这可以防止变量泄漏到外部作用域。

javascript 复制代码
function fun1() {
    if (true) {
        var i1 = 1;
    }
    console.log("fun1:" + i1)   // 输出 "fun1:1",因为 var 具有函数级作用域,i1 在整个函数内可见
}

function fun2() {
    if (true) {
        let i2 = 2;
    }
    console.log("fun2:" + i1)   // 报错,因为 i2 在块级作用域内,无法在块之外访问
}

function fun3() {
    if (true) {
        const i3 = 3;
    }
    console.log("fun3:" + i3)   // 报错,因为 i3 在块级作用域内,无法在块之外访问
}

二、变量提升(Hoisting)

var 声明的变量会被提升到它所在函数或全局作用域的顶部,但初始化的值不会提升,会是 undefined。

letconst声明的变量也会被提升,但在初始化之前访问会导致暂时性死区(Temporal Dead Zone),不能访问它们。

javascript 复制代码
function fun4() {
    console.log(i4); // 输出 "undefined"
    var i4 = 4;
    console.log(i4); // 输出 "4"
    
    console.log('--------------------------------------');
    console.log(i5); // 报错
    let i5 = 5;
    console.log(i5); // 报错

    console.log('--------------------------------------');
    console.log(i6); // 报错
    const i6 = 6;
    console.log(i6); // 报错
}

三、重复声明

在同一作用域内,var 允许重复声明同一个变量。

let 和 const 不允许在同一作用域内重复声明同一个变量。

javascript 复制代码
function fun5(){
    var i7 = 7;
    var i7 = 77;    //合法的重复声明,i7 的值变为 77
    console.log(i7) //输出77
    console.log('--------------------------------------');

    let i8 = 8;     //编译报错
    let i8 = 88;    //编译报错

    const i9 = 9;   //编译报错
    const i9 = 99;  //编译报错
}

四、 赋值和重新赋值

var 和 let 可以被赋值和重新赋值。

const 声明的变量一旦赋值就不能再次赋值,它们是常量。

javascript 复制代码
function fun6() {
    var i10 = 10;
    i10 = 100;  // 合法,var 可以重新赋值
    console.log(i10);   //输出100
    console.log('--------------------------------------');

    let i11 = 11;
    i11 = 111;  // 合法,let 可以重新赋值
    console.log(i11);   //输出111
    console.log('--------------------------------------');

    const i12 = 12;
    i12 = 122;  //编译报错 const 声明的变量不能重新赋值
}

五、全局对象属性

var声明的全局变量会成为全局对象(例如 window)的属性。

letconst声明的变量不会成为全局对象的属性。

javascript 复制代码
var i13 = 13;
let i14 = 14;
const i15 = 15;
function fun7() {
    console.log(window.i13);    // 输出 "13",var 变量成为全局对象的属性
    console.log('--------------------------------------');

    console.log(window.i14);    // 输出 "undefined",let 变量不会成为全局对象的属性
    console.log('--------------------------------------');

    console.log(window.i15);    // 输出 "undefined",const 变量不会成为全局对象的属性
}

六、使用场景

推荐使用 let 和 const,因为它们提供了更可控的作用域和避免了一些常见的问题,如变量提升和重复声明。

使用 const 来声明常量,使用 let 来声明需要重新赋值的变量。

javascript 复制代码
function fun8() {
    var i16 = 16;
    i16 += 16;
    console.log(i16);   //输出 32,i16 被重新赋值

    let i17 = 17;
    i17 += 17;
    console.log(i17);   //输出 34,i17 被重新赋值

    const i18 = 18;
    i18 += 18;          //编译报错,const常量不可重新赋值
    console.log(i18);
}

七、声明和赋值的数据类型

var、let 和 const 都可以用来声明并赋值各种JavaScript数据类型 :

  1. 基本数据类型

    • 字符串(String)

    • 数字(Number)

    • 布尔值(Boolean)

    • 空(null)

    • 未定义(undefined)

  2. 引用数据类型

    • 对象(Object)

    • 数组(Array)

    • 函数(Function)

    • Map

    • Set

等......

这些关键字可以用于声明和操作各种数据类型的变量。可以用来声明字符串、数字、数组、对象等等。例:

javascript 复制代码
var name = "John"; // 字符串
let age = 30; // 数字
const fruits = ["apple", "banana", "cherry"]; // 数组
const person = { firstName: "John", lastName: "Doe" }; // 对象

相关推荐
腾讯TNTWeb前端团队26 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试