10个ES6 let和const命令实用技巧：彻底告别var的时代
项目地址: https://gitcode.com/gh_mirrors/es/es6tutorial ES6的let和const命令是现代JavaScript开发的必备技能，它们彻底改变了我们声明变量的方式。作为《ECMAScript 6入门》教程的核心内容，let和const提供了更严格的变量作用域控制，让代码更加安全可靠。本文将分享10个实用技巧，帮助你彻底告别var时代，写出更专业的JavaScript代码！
🎯 1. 理解块级作用域的精髓
let和const最大的优势就是引入了块级作用域。与var的函数作用域不同，它们只在{}代码块内有效：
{
let blockScoped = "只在块内有效";
const PI = 3.14;
}
// 这里访问会报错
console.log(blockScoped); // ReferenceError
🔒 2. 利用const声明真正的常量
const声明的变量一旦赋值就不能改变，适合用于配置项、数学常量等：
const API_URL = "https://api.example.com";
const MAX_USERS = 100;
const CONFIG = { theme: "dark" };
⚡ 3. 避免循环中的变量泄露
经典的for循环问题，使用let可以完美解决：
// var的问题：i会泄露到全局
for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 100); // 输出5个5
}
// let的解决方案
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 100); // 输出0,1,2,3,4
}
🚫 4. 杜绝变量提升的困扰
let和const不存在变量提升，必须在声明后使用：
console.log(hoistedVar); // undefined
var hoistedVar = "提升";
console.log(notHoisted); // ReferenceError
let notHoisted = "不提升";
🛡️ 5. 认识暂时性死区(TDZ)
在let/const声明前访问变量会进入暂时性死区：
function example() {
console.log(temp); // ReferenceError
let temp = "值";
}
🔄 6. 替代IIFE的简洁写法
以前用IIFE创建作用域，现在用块级作用域更简洁：
// 旧的IIFE方式
(function() {
var privateVar = "私有";
})();
// 新的块级作用域
{
let privateVar = "私有";
}
📝 7. 对象和数组的const使用技巧
const保证的是绑定不变，不是值不变：
const user = { name: "John" };
user.name = "Jane"; // ✅ 允许
user = {}; // ❌ 不允许
const numbers = [1, 2, 3];
numbers.push(4); // ✅ 允许
numbers = []; // ❌ 不允许
🎨 8. 嵌套作用域的灵活运用
let和const支持任意深度的嵌套作用域：
function calculate() {
const base = 10;
{
const base = 20; // 内层作用域
console.log(base); // 20
}
console.log(base); // 10
}
🌐 9. 全局变量与window对象脱钩
let/const声明的全局变量不会成为window的属性：
var globalVar = "我是window属性";
let moduleVar = "我不是window属性";
console.log(window.globalVar); // "我是window属性"
console.log(window.moduleVar); // undefined
🏆 10. 最佳实践：默认使用const
现代JavaScript开发的最佳实践：
- 默认使用const - 除非需要重新赋值
- 需要重新赋值时用let - 代替var的所有场景
- 基本不用var - 只在特殊兼容场景使用
// 推荐做法
const API_KEY = "abc123";
let isLoading = false;
function processData(data) {
const results = [];
let count = 0;
for (let item of data) {
const processed = transform(item);
results.push(processed);
count++;
}
return { results, count };
}
💡 总结
掌握ES6的let和const命令是现代JavaScript开发的必备技能。通过这10个实用技巧，你可以：
- 🎯 彻底理解块级作用域的工作原理
- 🔒 正确使用const声明真正的常量
- ⚡ 避免常见的变量泄露问题
- 🛡️ 认识并避免暂时性死区的陷阱
- 📝 掌握对象和数组的const使用技巧
从现在开始，告别var的时代，拥抱更安全、更现代的JavaScript开发方式！记住：默认使用const，需要重新赋值时用let，基本不用var。
通过docs/let.md文档可以深入学习更多关于let和const的详细知识，提升你的ES6技能水平！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
