ToB企服应用市场:ToB评测及商务社交产业平台

标题: 六十天前端强化训练之第八天之JavaScript核心之ES6变量与箭头函数（第8-14 [打印本页]

---

作者: 锦通    时间: 前天 18:23
标题: 六十天前端强化训练之第八天之JavaScript核心之ES6变量与箭头函数（第8-14

=====接待来到编程星辰海的博客讲解======

前面第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
  

1. {
2.   var a = 1
3.   let b = 2
4.   const c = 3
5. }
6. console.log(a) // 1
7. console.log(b) // ReferenceError: b is not defined
8. console.log(c) // ReferenceError: c is not defined

复制代码

2 不存在变量提拔

JAVASCRIPT

  

1. console.log(d) // undefined
2. var d = 4
4. console.log(e) // ReferenceError: Cannot access 'e' before initialization
5. let e = 5

复制代码

3 克制重复声明

JAVASCRIPT
  

1. let f = 10
2. let f = 20 // SyntaxError: Identifier 'f' has already been declared
4. var g = 30
5. var g = 40 // 允许重复声明

复制代码

4 临时性死区（TDZ）

JAVASCRIPT
  

1. if (true) {
2.   tmp = 'abc' // ReferenceError: Cannot access 'tmp' before initialization
3.   let tmp
4. }

复制代码

5 const的特殊性

JAVASCRIPT
  

1. const PI = 3.1415
2. PI = 3.14 // TypeError: Assignment to constant variable
4. const obj = { name: 'Alice' }
5. obj.age = 30 // 允许修改属性
6. obj = {} // TypeError: Assignment to constant variable

复制代码

  

---

二、箭头函数详解

1 底子语法

JAVASCRIPT

1. // 传统函数
2. function add(a, b) {
3.   return a + b
4. }
6. // 箭头函数
7. const add = (a, b) => a + b

复制代码

2 this绑定机制

JAVASCRIPT
  

1. const person = {
2.   name: 'Bob',
3.   sayName: function() {
4.     setTimeout(function() {
5.       console.log(this.name) // undefined（普通函数的this指向window）
6.     }, 100)
7.   },
8.   sayNameArrow: function() {
9.     setTimeout(() => {
10.       console.log(this.name) // Bob（箭头函数继承外层this）
11.     }, 100)
12.   }
13. }

复制代码

3 参数处理

JAVASCRIPT
  

1. // 单参数可省略括号
2. const square = x => x * x
4. // 无参数时需要括号
5. const getRandom = () => Math.random()
7. // rest参数处理
8. const sumAll = (...numbers) => numbers.reduce((acc, cur) => acc + cur, 0)

复制代码

4 使用限定

JAVASCRIPT
  

1. // 不能作为构造函数
2. const Foo = () => {}
3. new Foo() // TypeError: Foo is not a constructor
5. // 没有arguments对象
6. const showArgs = () => console.log(arguments)
7. showArgs(1,2,3) // ReferenceError: arguments is not defined

复制代码

  

---

三、核心代码示例

1 作用域差异案例

HTML
  

1. <script>
2. function scopeDemo() {
3.   if (true) {
4.     var a = 'var变量'
5.     let b = 'let变量'
6.     const c = 'const变量'
7.   }
8.   console.log(a) // var变量
9.   console.log(b) // ReferenceError
10.   console.log(c) // ReferenceError
11. }
12. scopeDemo()
13. </script>

复制代码

2 箭头函数实战

JAVASCRIPT
  

1. // 数组处理
2. const numbers = [1, 2, 3, 4]
3. const doubled = numbers.map(n => n * 2)
5. // 事件处理
6. button.addEventListener('click', () => {
7.   console.log(this) // 继承自外围作用域的this
8. })
10. // Promise链式调用
11. fetchData()
12.   .then(data => data.json())
13.   .then(json => processData(json))
14.   .catch(error => console.error('Error:', error))

复制代码

  

---

四、var/let/const 作用域差异详解

1. 作用域类型

• var：函数作用域（Function Scope）
  
  
  
  • 变量在函数内部声明时有效，若在函数外部或全局作用域声明则为全局变量。
    
  • 常见标题：循环变量泄漏到全局、重复声明覆盖。
    
  
  
• let/const：块级作用域（Block Scope）
  
  
  
  • 变量仅在声明所在的代码块（如 {}）内有效。
    
  • 修复了 var 的变量泄漏标题，符合直觉的作用域隔离。
    
  
  

2. 变量提拔（Hoisting）

• var：存在变量提拔，声明被提拔到作用域顶部，但初始化未被提拔。
  JAVASCRIPT
        
  1. console.log(a); // undefined
  2. var a = 10;

  复制代码
• let/const：存在临时性死区（Temporal Dead Zone, TDZ）
  
  
  
  • 变量在声明前不可访问，否则抛出 ReferenceError。
    
  JAVASCRIPT
        
  1. console.log(b); // ReferenceError
  2. let b = 20;

  复制代码
     
  

3. 重复声明

• var：允许重复声明，可能导致意外覆盖。
  JAVASCRIPT
        
  1. var c = 1;
  2. var c = 2; // 合法，但 c 被覆盖为 2

  复制代码
• let/const：克制重复声明，严格束缚代码质量。
  JAVASCRIPT
        
  1. let d = 3;
  2. let d = 4; // SyntaxError: Identifier 'd' has already been declared

  复制代码

4. 全局对象属性

• var：全局声明的变量会成为 window 对象的属性。
  JAVASCRIPT
        
  1. var e = 5;
  2. console.log(window.e); // 5 (浏览器环境)

  复制代码
• let/const：全局声明的变量不会添加到 window 对象。
  JAVASCRIPT
        
  1. let f = 6;
  2. console.log(window.f); // undefined

  复制代码

5. const 的不可变性

• 根本类型：值不可修改。
  JAVASCRIPT
        
  1. const PI = 3.14;
  2. PI = 3.1415; // TypeError: Assignment to constant variable

  复制代码
• 引用类型：内存地址不可修改，但属性可变更。
  JAVASCRIPT
        
  1. const obj = { name: 'Alice' };
  2. obj.name = 'Bob'; // 允许修改属性
  3. obj = {}; // TypeError: Assignment to constant variable

  复制代码

---

五、核心代码示例

示例1：作用域差异对比

HTML
  

1. <!DOCTYPE html>
2. <script>
3.   // var 的变量泄漏问题
4.   function varExample() {
5.     for (var i = 0; i < 3; i++) {
6.       setTimeout(() => console.log('var:', i), 100); // 输出 3, 3, 3
7.     }
8.   }
10.   // let 的块级作用域解决泄漏问题
11.   function letExample() {
12.     for (let j = 0; j < 3; j++) {
13.       setTimeout(() => console.log('let:', j), 100); // 输出 0, 1, 2
14.     }
15.   }
17.   varExample();
18.   letExample();
19. </script>

复制代码

示例2：const 的不可变性

JAVASCRIPT
  

1. // 修改 const 对象属性
2. const user = { name: 'Charlie', age: 30 };
3. user.age = 31; // 允许修改
4. console.log(user); // { name: 'Charlie', age: 31 }
6. // 尝试重新赋值（报错）
7. user = {}; // TypeError: Assignment to constant variable

复制代码

  

---

六、实现结果截图

示例1输出结果：

TEXT
  

1. var: 3
2. var: 3
3. var: 3
4. let: 0
5. let: 1
6. let: 2

复制代码

  

结果阐明：

• 作用域演示区：
  
  
  
  • 点击 "运行 var 示例" 按钮：一连输出 3 次 var: 3
    
  • 点击 "运行 let 示例" 按钮：依次输出 let: 0, let: 1, let: 2
    
  
  
• const 演示区：
  
  
  
  • 点击 "修改对象属性"：显示属性修改成功
    
  • 点击 "尝试重新赋值"：显示 TypeError 错误
    
  
  

---

七、学习要点总结

特性varletconst作用域函数作用域块级作用域块级作用域变量提拔✅（声明提拔）❌（存在TDZ）❌（存在TDZ）重复声明允许克制克制全局属性绑定是否否可变性完全可变完全可变值不可变（引用类型属性可变）

---

八、扩展阅读保举

• 官方文档：
  
  
  
  • MDN let
    
  • MDN const
    
  • 箭头函数 - MDN
    
  
  
• 优质文章：
  
  
  
  • ES6 入门教程 - 阮一峰
    
  • JavaScript 变量声明：var, let, const 深度解析
    
  
  

---

通过深入明白 var/let/const 的作用域差异及箭头函数的特性，能编写出更安全、易维护的现代JavaScript代码。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4