六十天前端强化训练之第八天之JavaScript核心之ES6变量与箭头函数（第8-14天：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 被覆盖为 2
```

let/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: 2
const 演示区：
- 点击 "修改对象属性"：显示属性修改成功
- 点击 "尝试重新赋值"：显示 TypeError 错误

七、学习要点总结

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升	✅（声明提升）	❌（存在TDZ）	❌（存在TDZ）
重复声明	允许	禁止	禁止
全局属性绑定	是	否	否
可变性	完全可变	完全可变	值不可变（引用类型属性可变）