var、const、let的辨析

var、const、let的辨析

  • 1.const 定义的变量不可以修改,而且必须初始化。
		const b = 2;//正确
		// const b;//错误,必须初始化 
		console.log('函数外const定义b:' + b);//有输出值
		// b = 5;
		// console.log('函数外修改const定义b:' + b);//无法输出 
  • 2.var 定义的变量可以修改,如果不初始化会输出undefined,不会报错。
		var a = 1;
		// var a;//不会报错
		console.log('函数外var定义a:' + a);//可以输出a=1
		function change(){
		a = 4;
		console.log('函数内var定义a:' + a);//可以输出a=4
		}
		change();
		console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4
  • 3.let 是块级作用域,函数内部使用let定义后,对函数外部无影响。
		let c = 3;
		console.log('函数外let定义c:' + c);//输出c=3
		function change(){
		let c = 6;
		console.log('函数内let定义c:' + c);//输出c=6
		}
		change();
		console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3

注意点

  • 在相同的作用域或块级作用域中,不能使用 let 关键字来重置 var 关键字声明的变量:
	var x = 2;       // 合法
	let x = 3;       // 不合法
  • 在相同的作用域或块级作用域中,不能使用 var 关键字来重置 let 关键字声明的变量:
	let x = 2;       // 合法
	var x = 3;       // 不合法
  • let 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的:
let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

浏览器支持

Internet Explorer 11 及更早版本的浏览器不支持 let 关键字。

下表列出了各个浏览器支持 let 关键字的最低版本号。

参考原文:https://www.cnblogs.com/ksl666/p/5944718.html
<think>嗯,用户想了解JavaScriptvarletconst的区别。之前他们遇到了一个SyntaxError,变量重复声明的问题,可能现在想更深入地理解变量声明的作用域和提升问题,避免类似的错误。 首先,我需要回忆一下这三个关键字的不同点。根据引用[1]、[2]、[3]、[4]提到的内容,var有函数作用域,变量提升,而letconst是块级作用域,没有变量提升,还有const声明后不能重新赋值。需要把这些点整理清楚。 用户之前的问题中提到了重复声明导致错误,所以在讲解时应该强调letconst不允许重复声明,而var允许。这样用户就能明白为什么之前的代码会出错,改用letconst可以避免这个问题。 另外,用户可能在实际编码中遇到变量提升带来的意外行为,比如在声明前使用变量得到undefined。这时候需要举例说明变量提升的现象,对比varlet/const的不同。 还要注意const的用法,虽然不能重新赋值,但对象或数组内部属性可以修改。这点容易被误解,需要明确说明,避免用户错误地认为const声明的对象完全不可变。 用户可能需要实际例子来理解概念,所以应该用代码片段展示不同情况下的行为差异。比如作用域的例子,变量提升的例子,还有重复声明的错误情况。 最后,总结使用建议,帮助用户在实际开发中做出合适的选择,比如默认使用const,需要重新赋值时用let,避免使用var。这样他们可以写出更安全、可维护的代码。</think>### JavaScriptvarletconst的核心区别解析 #### 一、作用域差异(引用[1][2][3]) 1. **var** - **函数作用域**:仅在函数内有效 ```javascript function testVar() { if (true) { var a = 10; // 提升到函数顶部 } console.log(a); // 输出10 } ``` - **全局污染**:非严格模式下未声明直接赋值会创建全局变量 ```javascript function leakVar() { x = 20; // 自动成为window.x } ``` 2. **let/const** - **块级作用域**:在`{}`内有效(包括if/for等) ```javascript { let b = 20; const PI = 3.14; } console.log(b); // ReferenceError ``` #### 二、变量提升特性(引用[2][3]) 1. **var的变量提升** ```javascript console.log(c); // undefined(声明提升但未初始化) var c = 30; ``` 2. **let/const的暂存死区** ```javascript console.log(d); // ReferenceError(未初始化前不可访问) let d = 40; ``` #### 三、重复声明限制(引用[1][4]) | 声明方式 | 允许重复声明 | |---------|------------| | var | ✅ | | let | ❌ | | const | ❌ | ```javascript var e = 50; var e = 60; // 允许 let f = 70; let f = 80; // SyntaxError const g = 90; const g = 100; // SyntaxError ``` #### 四、赋值特性对比 1. **const的特殊性** - 必须立即初始化 ```javascript const h; // SyntaxError ``` - 不可重新赋值(引用类型可修改属性) ```javascript const obj = { name: 'John' }; obj.age = 30; // 允许修改属性 obj = {}; // TypeError(禁止重新赋值) ``` #### 五、现代开发最佳实践(引用[4]延伸) 1. **推荐优先级** ``` const > let > var ``` - 默认使用`const` - 需要重新赋值时用`let` - 避免使用`var` 2. **典型应用场景** ```javascript // 常量声明 const API_KEY = 'abc123'; // 循环控制 for (let i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); // 正确输出0-4 } // 模块导出 export const config = { version: '1.0' }; ``` ### 综合对比表 | 特性 | var | let | const | |--------------------|-----------|-----------|-----------| | 作用域 | 函数级 | 块级 | 块级 | | 变量提升 | ✅ | ❌ | ❌ | | 重复声明 | 允许 | 禁止 | 禁止 | | 暂时性死区 | 无 | 有 | 有 | | 全局对象属性绑定 | ✅ | ❌ | ❌ | | 必须初始化 | 否 | 否 | 是 | ### 常见误区解析 1. **const的不可变性误解** ```javascript const arr = [1,2,3]; arr.push(4); // 允许操作引用类型 arr = [5,6]; // TypeError(禁止重新赋值) ``` 2. **循环闭包问题** ```javascript // var导致闭包异常 for (var j = 0; j < 3; j++) { setTimeout(() => console.log(j), 100); // 输出3次3 } // let修复闭包 for (let k = 0; k < 3; k++) { setTimeout(() => console.log(k), 100); // 输出0,1,2 } ``` ### 扩展阅读建议 1. **ES6块级作用域实现原理** 通过Babel转译观察`let/const`的底层实现方式 2. **严格模式下的差异** ```javascript 'use strict'; undeclaredVar = 10; // ReferenceError(非严格模式会创建全局变量) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值