JavaScript重难点整理

1. 数据类型：

  - 原始类型：数字、字符串、布尔值、null、undefined。

     let num = 10;
     let str = "Hello";
     let bool = true;
     let n = null;
     let u = undefined;

 - 引用类型：对象、数组、函数。

     let obj = { name: "John", age: 25 };
     let arr = [1, 2, 3, 4];
     let func = function() {
       console.log("Hello, world!");
     };

2. 变量和作用域：

   - 变量声明和赋值。

     var x = 5;
     let y = "Hello";
     const PI = 3.14;

 - 全局作用域和局部作用域。

     function myFunction() {
       let localVar = 10; // 局部变量
       console.log(localVar);
     }
     console.log(localVar); // 报错，局部变量在函数外不可访问

3. 运算符和表达式：

   - 算术运算符、比较运算符、逻辑运算符和位运算符。

     function myFunction() {
       let localVar = 10; // 局部变量
       console.log(localVar);
     }
     console.log(localVar); // 报错，局部变量在函数外不可访问

4. 控制流程：

   - 条件语句：if、switch。

     let num = 5;
     if (num > 0) {
       console.log("Positive");
     } else if (num < 0) {
       console.log("Negative");
     } else {
       console.log("Zero");
     }

     let color = "red";
     switch (color) {
       case "red":
         console.log("Red color");
         break;
       case "blue":
         console.log("Blue color");
         break;
       default:
         console.log("Other color");
     }

- 循环语句：for、while。

     for (let i = 0; i < 5; i++) {
       console.log(i);
     }

     let i = 0;
     while (i < 5) {
       console.log(i);
       i++;
     }

5. 函数：

   - 函数定义和调用。

     function sayHello() {
       console.log("Hello, world!");
     }

     sayHello(); // 调用函数

   - 函数参数传递。

     function multiply(x, y) {
       return x * y;
     }

     let result = multiply(5, 3);
     console.log(result); // 输出 15

6. 数组和对象：

   - 数组的创建和操作

     let arr = [1, 2, 3];
     console.log(arr[0]); // 输出 1
     arr.push(4); // 添加元素到数组末尾
     console.log(arr.length); // 输出 4

   - 对象的创建和属性操作。

     let person = {
       name: "John",
       age: 25,
     };
     console.log(person.name); // 输出 "John"
     person.age = 30; // 修改属性值
     person.city = "New York"; // 添加新属性

7. 异步编程：

   - 回调函数。

     function fetchData(callback) {
       // 模拟异步操作
       setTimeout(function() {
         let data = "Data fetched";
         callback(data); // 调用回调函数
       }, 1000);
     }

     function handleData(data) {
       console.log(data);
     }

     fetchData(handleData);

   - Promise 和 async/await。

     function fetchData() {
       return new Promise(function(resolve, reject) {
         setTimeout(function() {
           let data = "Data fetched";
           resolve(data); // Promise 完成
           // reject("Error occurred"); // Promise 失败
         }, 1000);
       });
     }

     async functionhandleData() {
       try {
         let data = await fetchData(); // 等待 Promise 完成
         console.log(data);
       } catch (error) {
         console.log(error);
       }
     }

     handleData();

8. DOM 操作：

   - 选择元素和修改样式。

     let element = document.getElementById("myElement");
     element.style.backgroundColor = "red";

 - 添加事件监听器。

     let button = document.getElementById("myButton");
     button.addEventListener("click", function() {
       console.log("Button clicked");
     });

9. 错误处理和调试：

   - 捕获和处理异常。

     try {
       // 可能会抛出异常的代码
     } catch (error) {
       // 处理异常
     }

```
- 使用开发者工具进行调试：现代浏览器提供了开发者工具，可以帮助调试 JavaScript 代码。
开发者工具提供了断点调试、变量查看、调用栈跟踪等功能，以帮助开发者识别和修复代码中的问题。

10. 模块化和工具链：

        模块导入和导出：JavaScript 模块化的概念允许将代码分割为独立的模块，并通过导入和导出功能在模块之间共享代码。

模块导出：使用 export 关键字将函数、变量或类等导出为模块的一部分。

// mathUtils.js
export function multiply(x, y) {
  return x * y;
}

模块导入：使用 import 关键字将其他模块中的函数、变量或类等导入到当前模块中使用。

// main.js
import { multiply } from "./mathUtils";
console.log(multiply(5, 3)); // 输出 15

• 构建工具（如 Webpack、Babel）的使用：构建工具是用于处理 JavaScript 代码的工具链，它们可以帮助开发者进行转译、打包、优化等操作，以提高代码的性能和可维护性。
  • Webpack：Webpack 是一个常用的模块打包工具，可将多个 JavaScript 文件打包成一个或多个浏览器可识别的文件。它还支持处理其他资源，如样式表、图像等。
  • Babel：Babel 是一个流行的 JavaScript 转译器，可将最新版本的 JavaScript 代码转换为向后兼容的代码，以便在旧版浏览器中运行。