当前位置：首页 > news >正文

const let var 在react jsx中的使用方法。

news 2025/8/11 6:26:48

在 JavaScript 里，const 和 let 都是 ES6（ES2015）引入的用于声明变量的关键字，它们和之前的 var 关键字有所不同。下面为你详细介绍 const 和 let 的区别：

1. 块级作用域

const 和 let 都具备块级作用域，也就是说变量仅在声明它的块（如 if 语句、for 循环等）内部有效。而 var 是函数作用域。

// 使用 let 声明
if (true) {
    let blockScopedLet = 'This is a let variable';
    console.log(blockScopedLet); // 输出: This is a let variable
}
// console.log(blockScopedLet); // 报错: blockScopedLet is not defined

// 使用 const 声明
if (true) {
    const blockScopedConst = 'This is a const variable';
    console.log(blockScopedConst); // 输出: This is a const variable
}
// console.log(blockScopedConst); // 报错: blockScopedConst is not defined

// 使用 var 声明
if (true) {
    var functionScopedVar = 'This is a var variable';
    console.log(functionScopedVar); // 输出: This is a var variable
}
console.log(functionScopedVar); // 输出: This is a var variable

2. 变量重新赋值

const 声明的常量一旦被赋值，就不能再重新赋值。不过，如果 const 声明的是对象或者数组，其内部的属性或元素是可以修改的。而 let 声明的变量可以重新赋值。

// 使用 let 重新赋值
let letVariable = 'Initial value';
console.log(letVariable); // 输出: Initial value
letVariable = 'New value';
console.log(letVariable); // 输出: New value

// 使用 const 重新赋值会报错
const constVariable = 'Initial value';
console.log(constVariable); // 输出: Initial value
// constVariable = 'New value'; // 报错: Assignment to constant variable

// const 声明的对象可以修改内部属性
const person = {
    name: 'John',
    age: 30
};
console.log(person.name); // 输出: John
person.name = 'Jane';
console.log(person.name); // 输出: Jane

3. 变量提升

var 存在变量提升的现象，也就是说在变量声明之前就可以访问该变量，只不过值为 undefined。而 const 和 let 虽然也存在变量提升，但在声明之前访问会引发 ReferenceError，这一区域被称作暂时性死区（TDZ）。

// 使用 var
console.log(varVariable); // 输出: undefined
var varVariable = 'Value';

// 使用 let
// console.log(letVariable); // 报错: Cannot access 'letVariable' before initialization
let letVariable = 'Value';

// 使用 const
// console.log(constVariable); // 报错: Cannot access 'constVariable' before initialization
const constVariable = 'Value';