{"id":10021367,"date":"2026-06-01T02:43:48","date_gmt":"2026-05-31T18:43:48","guid":{"rendered":"https:\/\/itmax.cn\/?p=10021367"},"modified":"2026-06-01T02:43:48","modified_gmt":"2026-05-31T18:43:48","slug":"%e5%bf%ab%e9%80%9f%e5%a4%af%e5%ae%9e-javascrilpt-%e5%9f%ba%e7%a1%80%e7%9a%84-33-%e4%b8%aa%e6%a6%82%e5%bf%b5","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10021367","title":{"rendered":"\u5feb\u901f\u592f\u5b9e JavaScrilpt \u57fa\u7840\u7684 33 \u4e2a\u6982\u5ff5"},"content":{"rendered":"

\u4f60\u597d\uff0c\u6211\u662f\u51b4\u7fbd<\/a>\u3002<\/p>\n

AI \u65f6\u4ee3\uff0c\u5f88\u591a\u540c\u5b66\u5f88\u8ff7\u832b\u3002<\/strong> \u65e2\u60f3\u592f\u5b9e\u57fa\u7840\uff0c\u53c8\u8981\u8ddf\u8fdb AI\uff0c\u4e8e\u662f\u5b66\u8fd9\u5b66\u90a3\uff0c\u6c89\u4e0d\u4e0b\u5fc3\u6765\uff0c\u7ed3\u679c\u4e09\u5929\u6253\u9c7c\u4e24\u5929\u6652\u7f51\u3002<\/p>\n

\u6700\u8fd1\u6211\u7cfb\u7edf\u68b3\u7406\u4e86\u4e00\u904d 33 JavaScript Concepts<\/a> \u8fd9\u4e2a\u9879\u76ee\uff0c\u5b83\u628a JavaScript \u6700\u6838\u5fc3\u7684 33 \u4e2a\u6982\u5ff5\u6574\u7406\u6210\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u77e5\u8bc6\u4f53\u7cfb\u3002<\/p>\n

\u6211\u53d1\u73b0\uff1a\u8fd9 33 \u4e2a\u6982\u5ff5\uff0c\u6070\u597d\u8986\u76d6\u4e86\u4ece\u8bed\u8a00\u57fa\u7840\u5230\u5de5\u7a0b\u5b9e\u8df5\u7684\u5b8c\u6574\u94fe\u8def\u3002\u6b63\u662f\u4f60\u5feb\u901f\u592f\u5b9e JavaScrilpt \u57fa\u7840\u7684\u8def\u5f84\u3002<\/strong><\/p>\n

\u4eca\u5929\u6211\u5c31\u6309\u7167\u5b66\u4e60\u96be\u5ea6\u548c\u903b\u8f91\u5173\u7cfb\uff0c\u628a\u8fd9 33 \u4e2a\u6982\u5ff5\u91cd\u65b0\u5206\u7c7b\u6574\u7406\uff0c\u5e2e\u4f60\u5efa\u7acb\u4e00\u4e2a\u5b8c\u6574\u7684 JavaScript \u77e5\u8bc6\u6846\u67b6\u3002<\/p>\n

1. \u7c7b\u578b\u7cfb\u7edf\uff1aJavaScript \u7684\u5730\u57fa<\/h2>\n

1.1. \u539f\u59cb\u7c7b\u578b (Primitive Types)<\/h3>\n

JavaScript \u6709 7 \u79cd\u539f\u59cb\u7c7b\u578b\uff1astring\u3001number\u3001bigint\u3001boolean\u3001undefined\u3001null\u3001symbol<\/strong>\u3002<\/p>\n

\u5f88\u591a\u4eba\u4ee5\u4e3a\u8fd9\u5f88\u7b80\u5355\uff0c\u4f46\u5176\u5b9e\u5751\u5f88\u591a\uff1a<\/p>\n

typeof null \/\/ "object" \u274c \u8fd9\u662f JS \u7684\u5386\u53f2 bug\ntypeof NaN  \/\/ "number" \u2705 NaN \u786e\u5b9e\u662f\u6570\u5b57\u7c7b\u578b<\/code><\/pre>\n
\u539f\u59cb\u7c7b\u578b\u662f\u4e0d\u53ef\u53d8\u7684\u3002<\/strong> \u5f53\u4f60\u201c\u4fee\u6539\u201d\u4e00\u4e2a\u5b57\u7b26\u4e32\u65f6\uff0c\u5176\u5b9e\u662f\u521b\u5efa\u4e86\u65b0\u5b57\u7b26\u4e32\uff1a<\/p>\n
let str = "hello";\nstr[0] = "H"; \/\/ \u65e0\u6548,\u539f\u59cb\u7c7b\u578b\u4e0d\u53ef\u53d8\nstr = "Hello"; \/\/ \u8fd9\u662f\u91cd\u65b0\u8d4b\u503c,\u4e0d\u662f\u4fee\u6539<\/code><\/pre>\n
1.2. \u539f\u59cb\u7c7b\u578b vs \u5bf9\u8c61 (Primitives vs Objects)<\/h3>\n
\u8fd9\u662f JavaScript \u6700\u6838\u5fc3\u7684\u533a\u522b\uff1a\u539f\u59cb\u7c7b\u578b\u6309\u503c\u4f20\u9012\uff0c\u5bf9\u8c61\u6309\u5f15\u7528\u4f20\u9012\u3002<\/strong><\/p>\n
\/\/ \u539f\u59cb\u7c7b\u578b:\u590d\u5236\u503c\nlet a = 1;\nlet b = a;\nb = 2;\nconsole.log(a); \/\/ 1,a \u4e0d\u53d7\u5f71\u54cd\n\n\/\/ \u5bf9\u8c61:\u590d\u5236\u5f15\u7528\nlet obj1 = { x: 1 };\nlet obj2 = obj1;\nobj2.x = 2;\nconsole.log(obj1.x); \/\/ 2,obj1 \u4e5f\u53d8\u4e86!<\/code><\/pre>\n
\u8fd9\u76f4\u63a5\u5f71\u54cd\u4e86\u51fd\u6570\u53c2\u6570\u4f20\u9012\u3001\u6027\u80fd\u4f18\u5316\u3001React \u7684 immutable \u66f4\u65b0\u7b49\u4e00\u7cfb\u5217\u95ee\u9898\u3002<\/strong><\/p>\n
1.3. \u7c7b\u578b\u5f3a\u5236\u8f6c\u6362 (Type Coercion)<\/h3>\n
JavaScript \u7684\u9690\u5f0f\u7c7b\u578b\u8f6c\u6362\u662f\u6700\u8ba9\u4eba\u5934\u75bc\u7684\u7279\u6027\u4e4b\u4e00\u3002<\/p>\n
[] == ![]   \/\/ true \u2753\n[] + []     \/\/ ""\n[] + {}     \/\/ "[object Object]"\n{} + []     \/\/ 0<\/code><\/pre>\n
\u4e3a\u4ec0\u4e48 [] == ![]<\/code> \u662f true?<\/p>\n
    \n
  1. ![]<\/code> \u5148\u8f6c\u6210 boolean\uff0c\u7a7a\u6570\u7ec4\u662f\u771f\u503c\uff0c\u53d6\u53cd\u5f97 false<\/code><\/li>\n
  2. [] == false<\/code> \u89e6\u53d1\u7c7b\u578b\u8f6c\u6362<\/li>\n
  3. []<\/code> \u8f6c\u6210\u5b57\u7b26\u4e32 ""<\/code><\/li>\n
  4. ""<\/code> \u8f6c\u6210\u6570\u5b57 0<\/code><\/li>\n
  5. false<\/code> \u8f6c\u6210\u6570\u5b57 0<\/code><\/li>\n
  6. 0 == 0<\/code> \u4e3a true<\/code><\/li>\n<\/ol>\n
    \u6240\u4ee5\u6c38\u8fdc\u7528 <\/strong>===<\/code> \u800c\u4e0d\u662f <\/strong>==<\/code>\uff0c\u9664\u975e\u4f60\u771f\u7684\u77e5\u9053\u81ea\u5df1\u5728\u5e72\u4ec0\u4e48\u3002<\/strong><\/p>\n
    1.4. \u76f8\u7b49\u6027\u6bd4\u8f83 (Equality: == vs ===)<\/h3>\n
      \n
    • ==<\/code> \u4f1a\u8fdb\u884c\u7c7b\u578b\u8f6c\u6362\u540e\u6bd4\u8f83<\/li>\n
    • ===<\/code> \u4e25\u683c\u6bd4\u8f83\uff0c\u7c7b\u578b\u4e0d\u540c\u76f4\u63a5\u8fd4\u56de false<\/li>\n
    • Object.is()<\/code> \u66f4\u4e25\u683c\uff0c\u80fd\u6b63\u786e\u5904\u7406 NaN<\/code> \u548c +0\/-0<\/code><\/li>\n<\/ul>\n
      NaN === NaN           \/\/ false\nObject.is(NaN, NaN)   \/\/ true\n\n+0 === -0             \/\/ true\nObject.is(+0, -0)     \/\/ false<\/code><\/pre>\n
      2. \u4f5c\u7528\u57df\u4e0e\u6267\u884c\u673a\u5236\uff1aJavaScript \u7684\u8fd0\u884c\u65f6<\/h2>\n
      2.1. \u8c03\u7528\u6808 (Call Stack)<\/h3>\n
      JavaScript \u662f\u5355\u7ebf\u7a0b\u7684\uff0c\u6240\u6709\u51fd\u6570\u8c03\u7528\u90fd\u5728\u4e00\u4e2a\u8c03\u7528\u6808\u91cc\u6309 LIFO \uff08\u540e\u8fdb\u5148\u51fa\uff09<\/strong> \u6267\u884c\u3002<\/p>\n
      function first() {\n  second();\n  console.log("first");\n}\n\nfunction second() {\n  console.log("second");\n}\n\nfirst();\n\/\/ \u8f93\u51fa:\n\/\/ "second"\n\/\/ "first"<\/code><\/pre>\n
      \u6808\u6ea2\u51fa (Stack Overflow) \u5c31\u662f\u8c03\u7528\u6808\u7206\u4e86\uff0c\u901a\u5e38\u662f\u9012\u5f52\u6ca1\u5199\u597d\u3002<\/strong><\/p>\n
      2.2. \u4f5c\u7528\u57df\u4e0e\u95ed\u5305 (Scope & Closures)<\/h3>\n
      JavaScript \u6709 3 \u79cd\u4f5c\u7528\u57df\uff1a\u5168\u5c40\u4f5c\u7528\u57df\u3001\u51fd\u6570\u4f5c\u7528\u57df\u3001\u5757\u7ea7\u4f5c\u7528\u57df (let\/const)<\/strong>\u3002<\/p>\n
      \u95ed\u5305<\/strong> \u662f JavaScript \u6700\u5f3a\u5927\u4e5f\u6700\u5bb9\u6613\u51fa\u95ee\u9898\u7684\u7279\u6027\uff1a\u51fd\u6570\u53ef\u4ee5\u8bbf\u95ee\u5176\u5b9a\u4e49\u65f6\u7684\u5916\u90e8\u53d8\u91cf\uff0c\u5373\u4f7f\u5916\u90e8\u51fd\u6570\u5df2\u7ecf\u6267\u884c\u5b8c\u6bd5\u3002<\/strong><\/p>\n
      function createCounter() {\n  let count = 0;\n  return function() {\n    return ++count;\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter()); \/\/ 1\nconsole.log(counter()); \/\/ 2<\/code><\/pre>\n
      \u95ed\u5305\u7684\u5751\uff1a\u5982\u679c\u4e0d\u5c0f\u5fc3\uff0c\u4f1a\u5bfc\u81f4\u5185\u5b58\u6cc4\u6f0f\u3002<\/strong><\/p>\n
      \/\/ \u274c \u5185\u5b58\u6cc4\u6f0f\u793a\u4f8b\nfunction attachHandler() {\n  const bigData = new Array(1000000).fill("data");\n  document.getElementById("btn").onclick = function() {\n    console.log(bigData.length); \/\/ \u95ed\u5305\u6301\u6709 bigData\n  };\n}<\/code><\/pre>\n
      2.3. this, call, apply & bind<\/h3>\n
      this<\/code> \u662f JavaScript \u6700\u8ba9\u4eba\u56f0\u60d1\u7684\u5173\u952e\u5b57\u3002\u5b83\u7684\u503c\u4e0d\u662f\u5728\u5b9a\u4e49\u65f6\u786e\u5b9a\u7684\uff0c\u800c\u662f\u5728\u8c03\u7528\u65f6\u786e\u5b9a\u7684\u3002<\/strong><\/p>\n
      5 \u6761\u7ed1\u5b9a\u89c4\u5219\uff1a<\/p>\n
        \n
      1. \u9ed8\u8ba4\u7ed1\u5b9a<\/strong>\uff1athis<\/code> \u6307\u5411\u5168\u5c40\u5bf9\u8c61 \uff08\u4e25\u683c\u6a21\u5f0f\u4e0b\u662f undefined<\/code>)<\/li>\n
      2. \u9690\u5f0f\u7ed1\u5b9a<\/strong>\uff1a\u4f5c\u4e3a\u5bf9\u8c61\u65b9\u6cd5\u8c03\u7528\uff0cthis<\/code> \u6307\u5411\u8be5\u5bf9\u8c61<\/li>\n
      3. \u663e\u5f0f\u7ed1\u5b9a<\/strong>\uff1a\u7528 call\/apply\/bind<\/code> \u6307\u5b9a this<\/code><\/li>\n
      4. new \u7ed1\u5b9a<\/strong>\uff1anew<\/code> \u521b\u5efa\u65b0\u5bf9\u8c61\uff0cthis<\/code> \u6307\u5411\u65b0\u5bf9\u8c61<\/li>\n
      5. \u7bad\u5934\u51fd\u6570<\/strong>\uff1a\u6ca1\u6709\u81ea\u5df1\u7684 this<\/code>\uff0c\u7ee7\u627f\u5916\u5c42 this<\/code><\/li>\n<\/ol>\n
        const obj = {\n  name: "obj",\n  getName: function() {\n    return this.name;\n  },\n  getNameArrow: () => {\n    return this.name; \/\/ \u7bad\u5934\u51fd\u6570\u7684 this \u6307\u5411\u5916\u5c42\n  }\n};\n\nobj.getName();       \/\/ "obj"\nobj.getNameArrow();  \/\/ undefined (\u5916\u5c42\u662f\u5168\u5c40)\n\nconst fn = obj.getName;\nfn();                \/\/ undefined (\u4e22\u5931\u4e86 this)\nfn.call(obj);        \/\/ "obj" (\u663e\u5f0f\u7ed1\u5b9a)<\/code><\/pre>\n
        3. \u9762\u5411\u5bf9\u8c61\uff1a\u539f\u578b\u94fe\u4e0e\u7ee7\u627f<\/h2>\n
        3.1. \u539f\u578b\u4e0e\u5bf9\u8c61\u521b\u5efa (Prototypes & Object Creation)<\/h3>\n
        JavaScript \u4e0d\u662f\u4f20\u7edf\u7684\u7c7b\u7ee7\u627f\uff0c\u800c\u662f \u539f\u578b\u7ee7\u627f<\/strong>\u3002\u6bcf\u4e2a\u5bf9\u8c61\u90fd\u6709\u4e00\u4e2a\u9690\u85cf\u7684 [[Prototype]]<\/code> \u94fe\u63a5\uff0c\u6307\u5411\u5b83\u7684\u539f\u578b\u5bf9\u8c61\u3002<\/p>\n
        function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.sayHi = function() {\n  console.log("Hi, " + this.name);\n};\n\nconst p = new Person("\u51b4\u7fbd");\np.sayHi(); \/\/ "Hi, \u51b4\u7fbd"<\/code><\/pre>\n
        \u5f53\u4f60\u8bbf\u95ee <\/strong>p.sayHi<\/code> \u65f6\uff0cJavaScript \u4f1a\u5148\u5728 <\/strong>p<\/code> \u81ea\u8eab\u627e\uff0c\u627e\u4e0d\u5230\u5c31\u53bb <\/strong>Person.prototype<\/code> \u627e\uff0c\u8fd9\u5c31\u662f\u539f\u578b\u94fe\u3002<\/strong><\/p>\n
        3.2. \u7ee7\u627f\u4e0e\u591a\u6001 (Inheritance & Polymorphism)<\/h3>\n
        ES6 \u7684 class<\/code> \u8bed\u6cd5\u53ea\u662f\u539f\u578b\u7ee7\u627f\u7684\u8bed\u6cd5\u7cd6\uff1a<\/p>\n
        class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n  speak() {\n    console.log(this.name + " makes a sound");\n  }\n}\n\nclass Dog extends Animal {\n  speak() {\n    console.log(this.name + " barks");\n  }\n}\n\nconst dog = new Dog("\u65fa\u8d22");\ndog.speak(); \/\/ "\u65fa\u8d22 barks" (\u591a\u6001:\u5b50\u7c7b\u8986\u76d6\u7236\u7c7b\u65b9\u6cd5)<\/code><\/pre>\n
        3.3. \u5de5\u5382\u51fd\u6570\u4e0e\u7c7b (Factories & Classes)<\/h3>\n
        \u9664\u4e86 class<\/code>\uff0c\u8fd8\u53ef\u4ee5\u7528\u5de5\u5382\u51fd\u6570\u521b\u5efa\u5bf9\u8c61\uff1a<\/p>\n
        \/\/ \u5de5\u5382\u51fd\u6570\nfunction createPerson(name) {\n  return {\n    name,\n    sayHi() {\n      console.log("Hi, " + this.name);\n    }\n  };\n}\n\nconst p = createPerson("\u51b4\u7fbd");<\/code><\/pre>\n
        \u5de5\u5382\u51fd\u6570\u66f4\u7075\u6d3b\uff0c\u4e0d\u9700\u8981 <\/strong>new<\/code>\uff0c\u4e5f\u4e0d\u7528\u62c5\u5fc3 <\/strong>this<\/code> \u4e22\u5931\u3002<\/strong><\/p>\n
        4. \u51fd\u6570\u5f0f\u7f16\u7a0b\uff1aJavaScript \u7684\u53e6\u4e00\u9762<\/h2>\n
        4.1. \u9ad8\u9636\u51fd\u6570 (Higher-Order Functions)<\/h3>\n
        \u9ad8\u9636\u51fd\u6570<\/strong> \u662f\u63a5\u6536\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\uff0c\u6216\u8fd4\u56de\u51fd\u6570\u7684\u51fd\u6570\u3002<\/p>\n
        \/\/ \u63a5\u6536\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\nfunction repeat(n, action) {\n  for (let i = 0; i < n; i++) {\n    action(i);\n  }\n}\n\nrepeat(3, console.log); \/\/ 0 1 2\n\n\/\/ \u8fd4\u56de\u51fd\u6570\nfunction multiplier(factor) {\n  return number => number * factor;\n}\n\nconst double = multiplier(2);\nconsole.log(double(5)); \/\/ 10<\/code><\/pre>\n
        4.2. map, reduce, filter<\/h3>\n
        \u8fd9\u662f\u51fd\u6570\u5f0f\u7f16\u7a0b\u7684\u4e09\u5927\u91d1\u521a\uff1a<\/p>\n
        const numbers = [1, 2, 3, 4, 5];\n\n\/\/ map:\u8f6c\u6362\u6bcf\u4e2a\u5143\u7d20\nnumbers.map(x => x * 2); \/\/ [2, 4, 6, 8, 10]\n\n\/\/ filter:\u7b5b\u9009\u5143\u7d20\nnumbers.filter(x => x > 2); \/\/ [3, 4, 5]\n\n\/\/ reduce:\u7d2f\u79ef\u8ba1\u7b97\nnumbers.reduce((sum, x) => sum + x, 0); \/\/ 15<\/code><\/pre>\n
        \u94fe\u5f0f\u8c03\u7528\u66f4\u4f18\u96c5\uff1a<\/strong><\/p>\n
        numbers\n  .filter(x => x > 2)\n  .map(x => x * 2)\n  .reduce((sum, x) => sum + x, 0); \/\/ 24<\/code><\/pre>\n
        4.3. \u7eaf\u51fd\u6570 (Pure Functions)<\/h3>\n
        \u7eaf\u51fd\u6570<\/strong> \u6709\u4e24\u4e2a\u7279\u5f81\uff1a<\/p>\n
          \n
        1. \u76f8\u540c\u8f93\u5165\u6c38\u8fdc\u8fd4\u56de\u76f8\u540c\u8f93\u51fa<\/li>\n
        2. \u6ca1\u6709\u526f\u4f5c\u7528 \uff08\u4e0d\u4fee\u6539\u5916\u90e8\u72b6\u6001\uff09<\/li>\n<\/ol>\n
          \/\/ \u2705 \u7eaf\u51fd\u6570\nfunction add(a, b) {\n  return a + b;\n}\n\n\/\/ \u274c \u4e0d\u7eaf:\u4f9d\u8d56\u5916\u90e8\u53d8\u91cf\nlet count = 0;\nfunction increment() {\n  return ++count;\n}\n\n\/\/ \u274c \u4e0d\u7eaf:\u4fee\u6539\u4e86\u53c2\u6570\nfunction addToArray(arr, item) {\n  arr.push(item); \/\/ \u526f\u4f5c\u7528!\n  return arr;\n}<\/code><\/pre>\n
          \u7eaf\u51fd\u6570\u66f4\u5bb9\u6613\u6d4b\u8bd5\u3001\u8c03\u8bd5\u548c\u4f18\u5316\u3002React \u7684\u51fd\u6570\u7ec4\u4ef6\u5c31\u5e94\u8be5\u662f\u7eaf\u51fd\u6570\u3002<\/strong><\/p>\n
          4.4. \u67ef\u91cc\u5316\u4e0e\u51fd\u6570\u7ec4\u5408 (Currying & Composition)<\/h3>\n
          \u67ef\u91cc\u5316<\/strong> \u662f\u628a\u591a\u53c2\u6570\u51fd\u6570\u8f6c\u6210\u5355\u53c2\u6570\u51fd\u6570\u94fe\uff1a<\/p>\n
          \/\/ \u666e\u901a\u51fd\u6570\nfunction add(a, b, c) {\n  return a + b + c;\n}\n\n\/\/ \u67ef\u91cc\u5316\nfunction curriedAdd(a) {\n  return function(b) {\n    return function(c) {\n      return a + b + c;\n    };\n  };\n}\n\ncurriedAdd(1)(2)(3); \/\/ 6<\/code><\/pre>\n
          \u51fd\u6570\u7ec4\u5408<\/strong> \u662f\u628a\u591a\u4e2a\u51fd\u6570\u7ec4\u5408\u6210\u4e00\u4e2a\uff1a<\/p>\n
          const compose = (f, g) => x => f(g(x));\n\nconst double = x => x * 2;\nconst square = x => x * x;\n\nconst doubleThenSquare = compose(square, double);\ndoubleThenSquare(3); \/\/ (3 * 2)\u00b2 = 36<\/code><\/pre>\n
          4.5. \u9012\u5f52 (Recursion)<\/h3>\n
          \u9012\u5f52\u662f\u51fd\u6570\u8c03\u7528\u81ea\u5df1\u3002\u7ecf\u5178\u7684\u9636\u4e58\uff1a<\/p>\n
          function factorial(n) {\n  if (n <= 1) return 1; \/\/ \u57fa\u7840\u60c5\u51b5\n  return n * factorial(n - 1); \/\/ \u9012\u5f52\u8c03\u7528\n}\n\nfactorial(5); \/\/ 120<\/code><\/pre>\n
          \u9012\u5f52\u7684\u5751\uff1a\u5bb9\u6613\u6808\u6ea2\u51fa\u3002<\/strong> \u53ef\u4ee5\u7528\u5c3e\u9012\u5f52\u4f18\u5316\u6216\u6539\u6210\u5faa\u73af\u3002<\/p>\n
          5. \u5f02\u6b65\u7f16\u7a0b\uff1aJavaScript \u7684\u7cbe\u9ad3<\/h2>\n
          5.1. \u56de\u8c03\u51fd\u6570 (Callbacks)<\/h3>\n
          \u6700\u65e9\u7684\u5f02\u6b65\u65b9\u6848\uff0c\u4f46\u5bb9\u6613\u9677\u5165 \u56de\u8c03\u5730\u72f1<\/strong>\uff1a<\/p>\n
          getData(function(a) {\n  getMoreData(a, function(b) {\n    getMoreData(b, function(c) {\n      getMoreData(c, function(d) {\n        \/\/ \u56de\u8c03\u5730\u72f1 \ud83d\udd25\n      });\n    });\n  });\n});<\/code><\/pre>\n
          5.2. Promise<\/h3>\n
          Promise \u89e3\u51b3\u4e86\u56de\u8c03\u5730\u72f1\uff0c\u8ba9\u5f02\u6b65\u4ee3\u7801\u66f4\u4f18\u96c5\uff1a<\/p>\n
          getData()\n  .then(a => getMoreData(a))\n  .then(b => getMoreData(b))\n  .then(c => getMoreData(c))\n  .catch(err => console.error(err));<\/code><\/pre>\n
          Promise \u6709 3 \u79cd\u72b6\u6001\uff1apending\u3001fulfilled\u3001rejected\u3002\u72b6\u6001\u4e00\u65e6\u6539\u53d8\u5c31\u4e0d\u53ef\u9006\u3002<\/strong><\/p>\n
          5.3. async\/await<\/h3>\n
          async\/await \u662f Promise \u7684\u8bed\u6cd5\u7cd6\uff0c\u8ba9\u5f02\u6b65\u4ee3\u7801\u770b\u8d77\u6765\u50cf\u540c\u6b65\uff1a<\/p>\n
          async function fetchData() {\n  try {\n    const a = await getData();\n    const b = await getMoreData(a);\n    const c = await getMoreData(b);\n    return c;\n  } catch (err) {\n    console.error(err);\n  }\n}<\/code><\/pre>\n
          \u5e76\u884c\u6267\u884c\u7528 <\/strong>Promise.all<\/code>:<\/strong><\/p>\n
          const [user, posts] = await Promise.all([\n  fetchUser(),\n  fetchPosts()\n]);<\/code><\/pre>\n
          5.4. Event Loop \uff08\u4e8b\u4ef6\u5faa\u73af\uff09<\/h3>\n
          \u8fd9\u662f JavaScript \u5f02\u6b65\u7684\u6838\u5fc3\u673a\u5236\u3002<\/strong><\/p>\n
          JavaScript \u662f\u5355\u7ebf\u7a0b\u7684\uff0c\u4f46\u901a\u8fc7 Event Loop \u5b9e\u73b0\u4e86\u5f02\u6b65\uff1a<\/p>\n
            \n
          1. \u8c03\u7528\u6808<\/strong> \u6267\u884c\u540c\u6b65\u4ee3\u7801<\/li>\n
          2. \u5f02\u6b65\u4efb\u52a1\u653e\u5165 \u4efb\u52a1\u961f\u5217<\/strong><\/li>\n
          3. \u8c03\u7528\u6808\u6e05\u7a7a\u540e\uff0cEvent Loop \u4ece\u961f\u5217\u53d6\u4efb\u52a1\u6267\u884c<\/li>\n<\/ol>\n
            \u5fae\u4efb\u52a1 (Microtask) \u4f18\u5148\u7ea7\u9ad8\u4e8e\u5b8f\u4efb\u52a1 (Macrotask):<\/strong><\/p>\n
            console.log("1");\n\nsetTimeout(() => console.log("2"), 0); \/\/ \u5b8f\u4efb\u52a1\n\nPromise.resolve().then(() => console.log("3")); \/\/ \u5fae\u4efb\u52a1\n\nconsole.log("4");\n\n\/\/ \u8f93\u51fa:1 4 3 2<\/code><\/pre>\n
            \u4e3a\u4ec0\u4e48\uff1f\u56e0\u4e3a Promise \u7684 <\/strong>.then<\/code> \u662f\u5fae\u4efb\u52a1\uff0c\u5728\u5f53\u524d\u5b8f\u4efb\u52a1\u7ed3\u675f\u540e\u7acb\u5373\u6267\u884c\uff0c\u800c <\/strong>setTimeout<\/code> \u662f\u5b8f\u4efb\u52a1\uff0c\u8981\u7b49\u4e0b\u4e00\u8f6e\u3002<\/strong><\/p>\n
            5.5. \u751f\u6210\u5668\u4e0e\u8fed\u4ee3\u5668 (Generators & Iterators)<\/h3>\n
            \u751f\u6210\u5668\u51fd\u6570\u53ef\u4ee5\u6682\u505c\u548c\u6062\u590d\u6267\u884c\uff1a<\/p>\n
            function* idGenerator() {\n  let id = 1;\n  while (true) {\n    yield id++;\n  }\n}\n\nconst gen = idGenerator();\nconsole.log(gen.next().value); \/\/ 1\nconsole.log(gen.next().value); \/\/ 2<\/code><\/pre>\n
            \u751f\u6210\u5668\u53ef\u4ee5\u5b9e\u73b0\u60f0\u6027\u6c42\u503c\u3001\u65e0\u9650\u5e8f\u5217\u7b49\u9ad8\u7ea7\u7279\u6027\u3002<\/strong><\/p>\n
            6. \u6d4f\u89c8\u5668\u4e0e Web API<\/h2>\n
            6.1. DOM \u64cd\u4f5c (DOM Manipulation)<\/h3>\n
            \/\/ \u9009\u62e9\u5143\u7d20\nconst el = document.querySelector(".class");\n\n\/\/ \u4fee\u6539\u5185\u5bb9\nel.textContent = "\u65b0\u5185\u5bb9";\n\n\/\/ \u6dfb\u52a0\u4e8b\u4ef6\nel.addEventListener("click", () => {\n  console.log("clicked");\n});<\/code><\/pre>\n
            \u6027\u80fd\u4f18\u5316\uff1a\u6279\u91cf DOM \u64cd\u4f5c\u7528 DocumentFragment\uff0c\u907f\u514d\u9891\u7e41\u91cd\u6392\u91cd\u7ed8\u3002<\/strong><\/p>\n
            6.2. HTTP & Fetch API<\/h3>\n
            \/\/ GET \u8bf7\u6c42\nconst response = await fetch("https:\/\/api.example.com\/data");\nconst data = await response.json();\n\n\/\/ POST \u8bf7\u6c42\nawait fetch("https:\/\/api.example.com\/data", {\n  method: "POST",\n  headers: { "Content-Type": "application\/json" },\n  body: JSON.stringify({ name: "\u51b4\u7fbd" })\n});<\/code><\/pre>\n
            6.3. Web Workers<\/h3>\n
            Web Workers \u8ba9 JavaScript \u53ef\u4ee5\u591a\u7ebf\u7a0b\u8fd0\u884c\uff1a<\/p>\n
            \/\/ \u4e3b\u7ebf\u7a0b\nconst worker = new Worker("worker.js");\nworker.postMessage({ data: "heavy computation" });\nworker.onmessage = (e) => {\n  console.log("Result:", e.data);\n};\n\n\/\/ worker.js\nself.onmessage = (e) => {\n  const result = heavyComputation(e.data);\n  self.postMessage(result);\n};<\/code><\/pre>\n
            \u9002\u5408 CPU \u5bc6\u96c6\u578b\u4efb\u52a1\uff0c\u4e0d\u4f1a\u963b\u585e\u4e3b\u7ebf\u7a0b\u3002<\/strong><\/p>\n
            7. \u6a21\u5757\u5316\u4e0e\u73b0\u4ee3\u8bed\u6cd5<\/h2>\n
            7.1. ES Modules<\/h3>\n
            \/\/ math.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport default function multiply(a, b) {\n  return a * b;\n}\n\n\/\/ main.js\nimport multiply, { add } from ".\/math.js";<\/code><\/pre>\n
            ES Modules \u662f\u9759\u6001\u7684\uff0c\u652f\u6301 Tree Shaking\uff0c\u80fd\u51cf\u5c0f\u6253\u5305\u4f53\u79ef\u3002<\/strong><\/p>\n
            7.2. IIFE & Namespaces<\/h3>\n
            \u5728\u6a21\u5757\u5316\u4e4b\u524d\uff0c\u7528 IIFE \u907f\u514d\u5168\u5c40\u6c61\u67d3\uff1a<\/p>\n
            (function() {\n  const privateVar = "\u79c1\u6709\u53d8\u91cf";\n  window.MyModule = {\n    publicMethod() {\n      console.log(privateVar);\n    }\n  };\n})();<\/code><\/pre>\n
            7.3. Modern JS Syntax (ES6+)<\/h3>\n