六十天前端强化训练之第八天之JavaScript核心之ES6变量与箭头函数（第8-14天：JavaScript核
- 游戏开发
- 2025-09-13 07:24:01
=====欢迎来到编程星辰海的博客讲解======
前面第1-7天我写的博客是围绕HTML5与CSS3基础，接下来第8-14天我会围绕JavaScript核心，跟上脚步的同学加油，没跟上的同学不要气馁，我相信所有同学都可以做到的，加油！
目录
一、ES6变量声明（let/const）
1 块级作用域
2 不存在变量提升
3 禁止重复声明
4 暂时性死区（TDZ）
5 const的特殊性
二、箭头函数详解
1 基础语法
2 this绑定机制
3 参数处理
4 使用限制
三、核心代码示例
1 作用域差异案例
2 箭头函数实战
四、var/let/const 作用域差异详解
1. 作用域类型
2. 变量提升（Hoisting）
3. 重复声明
4. 全局对象属性
5. const 的不可变性
五、核心代码示例
示例1：作用域差异对比
示例2：const 的不可变性
六、实现效果截图
示例1输出结果：
七、学习要点总结
八、扩展阅读推荐
一、ES6变量声明（let/const）
ES6新增了let和const声明方式，解决了传统var的缺陷：
1 块级作用域JAVASCRIPT
{ var a = 1 let b = 2 const c = 3 } console.log(a) // 1 console.log(b) // ReferenceError: b is not defined console.log(c) // ReferenceError: c is not defined 2 不存在变量提升JAVASCRIPT
console.log(d) // undefined var d = 4 console.log(e) // ReferenceError: Cannot access 'e' before initialization let e = 5 3 禁止重复声明JAVASCRIPT
let f = 10 let f = 20 // SyntaxError: Identifier 'f' has already been declared var g = 30 var g = 40 // 允许重复声明 4 暂时性死区（TDZ）JAVASCRIPT
if (true) { tmp = 'abc' // ReferenceError: Cannot access 'tmp' before initialization let tmp } 5 const的特殊性JAVASCRIPT
const PI = 3.1415 PI = 3.14 // TypeError: Assignment to constant variable const obj = { name: 'Alice' } obj.age = 30 // 允许修改属性 obj = {} // TypeError: Assignment to constant variable二、箭头函数详解 1 基础语法
JAVASCRIPT
// 传统函数 function add(a, b) { return a + b } // 箭头函数 const add = (a, b) => a + b 2 this绑定机制JAVASCRIPT
const person = { name: 'Bob', sayName: function() { setTimeout(function() { console.log(this.name) // undefined（普通函数的this指向window） }, 100) }, sayNameArrow: function() { setTimeout(() => { console.log(this.name) // Bob（箭头函数继承外层this） }, 100) } } 3 参数处理JAVASCRIPT
// 单参数可省略括号 const square = x => x * x // 无参数时需要括号 const getRandom = () => Math.random() // rest参数处理 const sumAll = (...numbers) => numbers.reduce((acc, cur) => acc + cur, 0) 4 使用限制JAVASCRIPT
// 不能作为构造函数 const Foo = () => {} new Foo() // TypeError: Foo is not a constructor // 没有arguments对象 const showArgs = () => console.log(arguments) showArgs(1,2,3) // ReferenceError: arguments is not defined三、核心代码示例 1 作用域差异案例
HTML
<script> function scopeDemo() { if (true) { var a = 'var变量' let b = 'let变量' const c = 'const变量' } console.log(a) // var变量 console.log(b) // ReferenceError console.log(c) // ReferenceError } scopeDemo() </script> 2 箭头函数实战JAVASCRIPT
// 数组处理 const numbers = [1, 2, 3, 4] const doubled = numbers.map(n => n * 2) // 事件处理 button.addEventListener('click', () => { console.log(this) // 继承自外围作用域的this }) // Promise链式调用 fetchData() .then(data => data.json()) .then(json => processData(json)) .catch(error => console.error('Error:', error))四、var/let/const 作用域差异详解 1. 作用域类型
var：函数作用域（Function Scope）
变量在函数内部声明时有效，若在函数外部或全局作用域声明则为全局变量。常见问题：循环变量泄漏到全局、重复声明覆盖。let/const：块级作用域（Block Scope）
变量仅在声明所在的代码块（如 {}）内有效。修复了 var 的变量泄漏问题，符合直觉的作用域隔离。 2. 变量提升（Hoisting）var：存在变量提升，声明被提升到作用域顶部，但初始化未被提升。
JAVASCRIPT
console.log(a); // undefined var a = 10;let/const：存在暂时性死区（Temporal Dead Zone, TDZ）
变量在声明前不可访问，否则抛出 ReferenceError。JAVASCRIPT
console.log(b); // ReferenceError let b = 20; 3. 重复声明var：允许重复声明，可能导致意外覆盖。
JAVASCRIPT
var c = 1; var c = 2; // 合法，但 c 被覆盖为 2let/const：禁止重复声明，严格约束代码质量。
JAVASCRIPT
let d = 3; let d = 4; // SyntaxError: Identifier 'd' has already been declared 4. 全局对象属性var：全局声明的变量会成为 window 对象的属性。
JAVASCRIPT
var e = 5; console.log(window.e); // 5 (浏览器环境)let/const：全局声明的变量不会添加到 window 对象。
JAVASCRIPT
let f = 6; console.log(window.f); // undefined 5. const 的不可变性基本类型：值不可修改。
JAVASCRIPT
const PI = 3.14; PI = 3.1415; // TypeError: Assignment to constant variable引用类型：内存地址不可修改，但属性可变更。
JAVASCRIPT
const obj = { name: 'Alice' }; obj.name = 'Bob'; // 允许修改属性 obj = {}; // TypeError: Assignment to constant variable五、核心代码示例 示例1：作用域差异对比
HTML
<!DOCTYPE html> <script> // var 的变量泄漏问题 function varExample() { for (var i = 0; i < 3; i++) { setTimeout(() => console.log('var:', i), 100); // 输出 3, 3, 3 } } // let 的块级作用域解决泄漏问题 function letExample() { for (let j = 0; j < 3; j++) { setTimeout(() => console.log('let:', j), 100); // 输出 0, 1, 2 } } varExample(); letExample(); </script> 示例2：const 的不可变性JAVASCRIPT
// 修改 const 对象属性 const user = { name: 'Charlie', age: 30 }; user.age = 31; // 允许修改 console.log(user); // { name: 'Charlie', age: 31 } // 尝试重新赋值（报错） user = {}; // TypeError: Assignment to constant variable六、实现效果截图 示例1输出结果：
TEXT
var: 3 var: 3 var: 3 let: 0 let: 1 let: 2 效果说明：作用域演示区：
点击 "运行 var 示例" 按钮：连续输出 3 次 var: 3点击 "运行 let 示例" 按钮：依次输出 let: 0, let: 1, let: 2const 演示区：
点击 "修改对象属性"：显示属性修改成功点击 "尝试重新赋值"：显示 TypeError 错误七、学习要点总结 特性varletconst作用域函数作用域块级作用域块级作用域变量提升✅（声明提升）❌（存在TDZ）❌（存在TDZ）重复声明允许禁止禁止全局属性绑定是否否可变性完全可变完全可变值不可变（引用类型属性可变）
八、扩展阅读推荐
官方文档：
MDN letMDN const箭头函数 - MDN优质文章：
ES6 入门教程 - 阮一峰JavaScript 变量声明：var, let, const 深度解析通过深入理解 var/let/const 的作用域差异及箭头函数的特性，能编写出更安全、易维护的现代JavaScript代码。
六十天前端强化训练之第八天之JavaScript核心之ES6变量与箭头函数（第8-14天：JavaScript核由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“六十天前端强化训练之第八天之JavaScript核心之ES6变量与箭头函数（第8-14天：JavaScript核”
