JavaScript中const和var的区别小结

 更新时间:2025年10月11日 08:23:51   作者:Never_Satisfied  
本文主要介绍了JavaScript中const和var的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在JavaScript中,constvar是两种不同的变量声明方式,它们有以下主要区别:

1. 作用域 (Scope)

var - 函数作用域

function test() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10 - 在if块外部可以访问
}

const - 块级作用域

function test() {
    if (true) {
        const y = 20;
    }
    console.log(y); // ReferenceError: y is not defined
}

2. 变量提升 (Hoisting)

var - 会提升,初始值为undefined

console.log(a); // undefined
var a = 5;

const - 会提升,但在声明前访问会报错(暂时性死区)

console.log(b); // ReferenceError: Cannot access 'b' before initialization
const b = 10;

3. 重复声明

var - 允许重复声明

var x = 1;
var x = 2; // 不会报错

const - 不允许重复声明

const y = 1;
const y = 2; // SyntaxError: Identifier 'y' has already been declared

4. 重新赋值

var - 可以重新赋值

var name = "Alice";
name = "Bob"; // 允许

const - 不能重新赋值(常量)

const name = "Alice";
name = "Bob"; // TypeError: Assignment to constant variable

5. 必须初始化

var - 可以不初始化

var x; // undefined

const - 必须初始化

const y; // SyntaxError: Missing initializer in const declaration

6. 全局对象属性

var - 在全局作用域声明时成为window对象的属性

var globalVar = "hello";
console.log(window.globalVar); // "hello"

const - 不会成为window对象的属性

const globalConst = "world";
console.log(window.globalConst); // undefined

重要注意事项

对于const声明的对象和数组:

const person = { name: "Alice" };
person.name = "Bob"; // 允许 - 修改对象属性
// person = { name: "Charlie" }; // 错误 - 不能重新赋值

const numbers = [1, 2, 3];
numbers.push(4); // 允许 - 修改数组内容
// numbers = [5, 6, 7]; // 错误 - 不能重新赋值

现代开发建议

  • 优先使用 const
  • 需要重新赋值时使用 let
  • 避免使用 var(除非有特殊需求)
// 推荐写法
const PI = 3.14159;
let count = 0;

// 不推荐
var oldWay = "avoid this";

这种模式有助于编写更可预测、更少错误的代码。

到此这篇关于JavaScript中const和var的区别小结的文章就介绍到这了,更多相关JavaScript const var内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javaScript年份下拉列表框内容为当前年份及前后50年

    javaScript年份下拉列表框内容为当前年份及前后50年

    本文介绍的这个javaScript年份下拉列表框内容为当前年份及前后50年,默认显示当前年份,大家可以学习下
    2014-05-05
  • 浅析JS原始值和引用值问题

    浅析JS原始值和引用值问题

    如果一个值是引用类型的,那么它的存储空间将从堆中分配。由于引用值的大小会改变,所以不能把它放在栈中,否则会降低变量查寻的速度。相反,放在变量的栈空间中的值是该对象存储在堆中的地址,这篇文章主要介绍了JS原始值和引用值 ,需要的朋友可以参考下
    2021-12-12
  • javascript 发布-订阅模式 实例详解

    javascript 发布-订阅模式 实例详解

    这篇文章主要介绍了javascript 发布-订阅模式,结合实例形式详细分析了javascript发布-订阅模式基本功能、原理、实现方法与相关使用技巧,需要的朋友可以参考下
    2023-06-06
  • 利用javascript实现的三种图片放大镜效果实例(附源码)

    利用javascript实现的三种图片放大镜效果实例(附源码)

    这篇文章主要介绍了利用javascript实现的几种放大镜效果,很实用一款漂亮的js图片放大镜特效,常见于电商网站上产品页,用来放大展示图片细节,很有实用性,推荐下载学习研究。文中提供了完整的源码供大家下载,需要的朋友可以参考借鉴,一起来看看吧。
    2017-01-01
  • javascript实现图片轮播代码

    javascript实现图片轮播代码

    这篇文章主要为大家详细介绍了javascript实现图片轮播代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js实现mp3录音通过websocket实时传送+简易波形图效果

    js实现mp3录音通过websocket实时传送+简易波形图效果

    这篇文章主要介绍了js实现mp3录音通过websocket实时传送+简易波形图效果,本文通过实例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 微信小程序实现指定显示行数多余文字去掉用省略号代替

    微信小程序实现指定显示行数多余文字去掉用省略号代替

    这篇文章主要介绍了微信小程序实现指定显示行数多余文字去掉用省略号代替的方法,需要的朋友可以参考下
    2018-07-07
  • javascript解三阶幻方(九宫格)

    javascript解三阶幻方(九宫格)

    本文给大家分享的是使用javascript实现解答九宫格问题的算法,非常的简单实用,有需要的小伙伴可以参考下。
    2015-04-04
  • 带你领略Object.assign()方法的操作方式

    带你领略Object.assign()方法的操作方式

    这篇文章主要介绍了带你领略Object.assign()方法的操作方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 推荐15个最好用的JavaScript代码压缩工具

    推荐15个最好用的JavaScript代码压缩工具

    今天小编就为大家分享一篇关于推荐15个最好用的JavaScript代码压缩工具,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02

最新评论