es6 基础学习之var let 和 const 命令 区别和相关

在 ES6(ECMAScript 2015)中,varletconst 是用于声明变量的三种方式,它们有几个关键的区别。

1. 作用域

  • var: 声明的变量会被提升到其函数或全局作用域的顶部。
  • letconst: 声明的变量仅在其块级作用域(block scope)内有效。

示例:

javascript 复制代码
function demoVar() {
  if (true) {
    var x = 1; // x 可以在整个函数作用域内访问
  }
  console.log(x); // 输出 1
}

function demoLet() {
  if (true) {
    let y = 1; // y 仅在这个块级作用域内有效
  }
  console.log(y); // ReferenceError: y is not defined
}

2. 重复声明

  • var: 允许重复声明同一个变量。
  • letconst: 不允许在同一个作用域内重复声明同一个变量。

示例:

javascript 复制代码
var x = 1;
var x = 2; // 有效

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

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

3. 可变性

  • varlet: 声明的变量可以重新赋值。
  • const: 声明的变量不能重新赋值,但如果它是一个对象或数组,其内部状态是可以被改变的。

示例:

javascript 复制代码
var x = 1;
x = 2; // 有效

let y = 1;
y = 2; // 有效

const z = 1;
z = 2; // TypeError: Assignment to constant variable.

const obj = { prop: 1 };
obj.prop = 2; // 有效

4. 提升(Hoisting)

  • var: 变量会被提升,但只有声明会被提升,初始化(如果有)则不会。
  • letconst: 声明不会被提升,访问变量前必须声明。

示例:

javascript 复制代码
console.log(a); // 输出 undefined
var a = 1;

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

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

这些是 varletconst 的主要区别。在现代 JavaScript 开发中,通常推荐使用 letconst,因为它们提供了块级作用域和不可变性,这有助于编写更清晰、更易维护的代码。

相关推荐
小圣贤君16 小时前
小说地图设计:Canvas 油漆桶工具的实现之旅
vue.js·electron·写作·小说地图·油漆桶
想学后端的前端工程师18 小时前
【Vue3响应式原理深度解析:从Proxy到依赖收集】
前端·javascript·vue.js
_Kayo_18 小时前
vue3 状态管理器 pinia 用法笔记1
前端·javascript·vue.js
daols8818 小时前
vue 甘特图 vxe-gantt table 可视化依赖线的使用,可视化拖拽创建连接线的用法
vue.js·甘特图·vxe-table
老华带你飞20 小时前
婚纱摄影网站|基于java + vue婚纱摄影网站系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
幽络源小助理21 小时前
SpringBoot+Vue数字科技风险报告管理系统源码 | Java项目免费下载 – 幽络源
java·vue.js·spring boot
成为大佬先秃头21 小时前
渐进式JavaScript框架:Vue 工具 & 模块化 & 迁移
开发语言·javascript·vue.js
叫我阿柒啊1 天前
从Java全栈到前端框架:一场真实的技术面试对话
java·vue.js·spring boot·微服务·typescript·前端开发·后端开发
Aotman_1 天前
Vue MutationObserver 监听
前端·javascript·vue.js·elementui·前端框架·ecmascript
专注前端30年1 天前
Vue3的生命周期钩子有哪些变化?
前端·javascript·vue.js