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

相关推荐
WaaTong4 分钟前
Java反射
java·开发语言·反射
Troc_wangpeng5 分钟前
R language 关于二维平面直角坐标系的制作
开发语言·机器学习
王哲晓6 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
努力的家伙是不讨厌的7 分钟前
解析json导出csv或者直接入库
开发语言·python·json
fg_4119 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v11 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
Envyᥫᩣ20 分钟前
C#语言:从入门到精通
开发语言·c#
酷酷的阿云21 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058723 分钟前
web端手机录音
前端
齐 飞28 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb