4 JavaScript ES6+ 基础回顾

在深入学习 React 之前，熟练掌握 JavaScript 的一些核心概念是非常重要的。React 建立在现代 JavaScript（ES6+）之上，因此理解这些概念将帮助你更有效地使用这个框架。这一节将覆盖一些 ES6+ 的基本特性，包括 let、const、箭头函数、模板字面量、解构赋值、模块化等。

1. 变量声明：let 和 const

在 ES6 之前，我们使用 var 来声明变量。但 var 有一些作用域的问题，对代码的可维护性造成不便。ES6 引入了 let 和 const。

• **let**：用来声明一个块级作用域的变量。

  let x = 10;
  if (true) {
      let x = 20; // 这里的 x 是一个新的变量
      console.log(x); // 20
  }
  console.log(x); // 10

• **const**：用来声明一个常量，一旦赋值后不能再修改。

  const PI = 3.14;
  // PI = 3.14159; // TypeError: Assignment to constant variable.

注意：const 声明的对象是可变的，但不能重新赋值。

const arr = [1, 2, 3];
arr.push(4); // 合法，arr 变成 [1, 2, 3, 4]

2. 箭头函数

箭头函数是 ES6 引入的一种简化的函数写法，可以让你更方便地定义函数。它的语法更简洁，同时 this 的绑定规则也与普通函数不同。

const add = (a, b) => a + b;

console.log(add(2, 3)); // 输出 5

特点

• 简化语法：省略了 function 关键字和 {}，适用于单行函数。
• **绑定 this**：箭头函数不绑定 this，所以其上下文由外部作用域决定。

function Counter() {
    this.count = 0;
    setInterval(() => {
        this.count++;
        console.log(this.count);
    }, 1000);
}

const counter = new Counter(); // 每秒输出 count

3. 模板字面量

模板字面量是 ES6 引入的一种字符串定义方式，可以在字符串中嵌入表达式，非常方便。

const name = 'React';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, React!"

支持多行字符串：

const multiLine = `这是第一行
这是第二行`;
console.log(multiLine);

4. 解构赋值

解构赋值是从数组或对象中提取值的一种简便语法，可以让代码更简洁。

数组解构

const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first); // 输出 1
console.log(second); // 输出 2

对象解构

const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x); // 输出 1
console.log(y); // 输出 2

可以为解构的变量重命名：

const obj = { a: 1, b: 2 };
const { a: alpha, b: beta } = obj;
console.log(alpha); // 输出 1
console.log(beta); // 输出 2

5. 模块化

ES6 引入了模块化机制，你可以使用 import 和 export 来导出和引入模块。

导出

// a.js
export const MY_CONSTANT = 42;
export function myFunction() {
    console.log('Hello from myFunction!');
}

导入

// b.js
import { MY_CONSTANT, myFunction } from './a.js';

console.log(MY_CONSTANT); // 输出 42
myFunction(); // 输出 "Hello from myFunction!"

6. 总结

以上是 JavaScript ES6+ 的一些重要基础知识。在学习 React 的过程中，这些特性将会频繁使用。掌握这些特性对于你编写可维护的、现代化的 JavaScript 代码是非常重要的。接下来，我们将深入学习 React 的核心概念和组件模型。