JavaScript 基础

要掌握 JavaScript 基础，尤其是 ES6（ECMAScript 2015）及其后的 JavaScript 语法特性，以下是你需要重点学习和掌握的内容：

1. 变量声明

• let 和 const：

  • let 用于声明可以改变的变量（块级作用域）。
  • const 用于声明常量（块级作用域），值不能重新赋值。
  javascript复制

  1
  2

  let age = 30;
  const name = "John";

2. 箭头函数

• 语法简化：箭头函数是用来简化函数表达式的语法。
• 特点：箭头函数不绑定自己的 this 值。
  javascript复制

  1

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

3. 模板字符串

• 特性：可以嵌入表达式，更加灵活地处理字符串。
• 语法：使用反引号（`）和 ${} 语法。
  javascript复制

  1
  2

  const name = "Alice";
  const message = `Hello, ${name}!`;

4. 解构赋值

• 数组解构：从数组中提取值并赋给变量。
  javascript复制

  1
  2

  const [a, b] = [1, 2];
  console.log(a); // 1

• 对象解构：从对象中提取属性值并赋给变量。
  javascript复制

  1
  2
  3

  const person = { name: "John", age: 30 };
  const { name, age } = person;
  console.log(name); // John

5. 扩展运算符（Spread Operator）

• 在数组中使用：用于将数组展开或合并数组。
  javascript复制

  1
  2
  3

  const arr1 = [1, 2];
  const arr2 = [...arr1, 3, 4];
  console.log(arr2); // [1, 2, 3, 4]

• 在对象中使用：用于复制对象或合并对象。
  javascript复制

  1
  2
  3

  const obj1 = { a: 1, b: 2 };
  const obj2 = { ...obj1, c: 3 };
  console.log(obj2); // { a: 1, b: 2, c: 3 }

6. 默认参数

• 特性：可以为函数参数设置默认值。
  javascript复制

  1
  2
  3
  4

  function greet(name = "Guest") {
    return `Hello, ${name}`;
  }
  console.log(greet()); // Hello, Guest

7. for...of 循环

• 特性：用于遍历数组或可迭代对象。
  javascript复制

  1
  2
  3
  4

  const numbers = [1, 2, 3];
  for (const number of numbers) {
    console.log(number);
  }

8. for...in 循环

• 特性：用于遍历对象的可枚举属性。
  javascript复制

  1
  2
  3
  4

  const person = { name: "Alice", age: 25 };
  for (const key in person) {
    console.log(`${key}: ${person[key]}`);
  }

9. 类与模块化

• 类（Classes）：使用类语法来定义对象的构造函数和方法。

  javascript复制

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    greet() {
      return `Hello, my name is ${this.name}`;
    }
  }
  
  const person1 = new Person("John", 30);
  console.log(person1.greet()); // Hello, my name is John

• 模块化（Modules）：

  • 导出（export）和导入（import）：使用 export 导出模块，使用 import 导入模块。
  javascript复制

  1
  2
  3
  4
  5
  6

  // file: math.js
  export const sum = (a, b) => a + b;
  
  // file: app.js
  import { sum } from './math.js';
  console.log(sum(2, 3)); // 5

10. Promise 和 异步编程

• Promise：用于处理异步操作。

  javascript复制

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

  const promise = new Promise((resolve, reject) => {
    const success = true;
    if (success) {
      resolve("Success!");
    } else {
      reject("Failed!");
    }
  });
  
  promise
    .then(result => console.log(result))
    .catch(error => console.error(error));

• async 和 await：用来简化 Promise 的处理流程。

  javascript复制

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error(error);
    }
  }
  
  fetchData();

掌握这些 ES6 及其后的 JavaScript 特性，将为你打下坚实的基础，有助于更深入地学习 React 及其他现代 JavaScript 技术。