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" }; // 对象

相关推荐
小曲曲39 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10223 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----5 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024065 小时前
SQL SELECT 语句:基础与进阶应用
开发语言