[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fresource\u002Fdocument\u002Flist?undefined":3,"\u002Fresource\u002Fdocument\u002Fquery\u002Fj35cdc1qz8dzq7pn?undefined":462,"\u002Fresource\u002Fadvertise\u002Flist?type=all?undefined":467},{"data":4,"status":460,"success":461},[5,148,202,291,332,370,420],{"books":6,"desc":145,"id":8,"image":146,"title":147},[7,40,63,78,93,105,117],{"cateId":8,"chapters":9,"desc":36,"id":11,"time":37,"title":38,"video":39},1,[10,15,18,21,24,27,30,33],{"bookId":11,"id":12,"indexOrder":13,"name":14},24,"8egfulw98v3h680j",0,"JavaSE 笔记（一）走进Java语言",{"bookId":11,"id":16,"indexOrder":13,"name":17},"pew6po6wrou23pk3","JavaSE 笔记（二）面向过程编程",{"bookId":11,"id":19,"indexOrder":13,"name":20},"eldst1fgrbdkmfs7","JavaSE 笔记（三）面向对象基础",{"bookId":11,"id":22,"indexOrder":13,"name":23},"48zphgkpjto8cath","JavaSE 笔记（四）面向对象高级篇",{"bookId":11,"id":25,"indexOrder":13,"name":26},"6r4llai92yc15j98","JavaSE 笔记（五）泛型程序设计",{"bookId":11,"id":28,"indexOrder":13,"name":29},"k6fmxd6qabgkwm9i","JavaSE 笔记（六）集合类与IO",{"bookId":11,"id":31,"indexOrder":13,"name":32},"qrd0xfttsz32gpqg","JavaSE 笔记（七）多线程与反射",{"bookId":11,"id":34,"indexOrder":13,"name":35},"td5tgn04nqmkrryt","JavaSE 笔记（八）GUI程序开发","基于Java25全新录制的SE课程",2025,"JavaSE 核心内容","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV163GGz2E8c",{"cateId":8,"chapters":41,"desc":59,"id":8,"time":60,"title":61,"video":62},[42,44,46,49,51,53,55,57],{"bookId":8,"id":43,"indexOrder":13,"name":14},"ibeeuwsbbi00undq",{"bookId":8,"id":45,"indexOrder":13,"name":17},"dncxjecdv4wciqcp",{"bookId":8,"id":47,"indexOrder":13,"name":48},"jviyz2hsht9ete5k","JavaSE 笔记（三）面向对象基础篇",{"bookId":8,"id":50,"indexOrder":13,"name":23},"qb9i6q9fap7bg1cc",{"bookId":8,"id":52,"indexOrder":13,"name":26},"hnkrjrkm3hjzeq6s",{"bookId":8,"id":54,"indexOrder":13,"name":29},"erpm32wduoaaqmrx",{"bookId":8,"id":56,"indexOrder":13,"name":32},"lfqtvxr7azumcwja",{"bookId":8,"id":58,"indexOrder":13,"name":35},"qs7gqok56gzc6idr","2022年制作的JavaSE版本",2022,"JavaSE 22年旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1YP4y1o75f\u002F",{"cateId":8,"chapters":64,"desc":75,"id":66,"time":60,"title":76,"video":77},[65,69,72],{"bookId":66,"id":67,"indexOrder":13,"name":68},2,"g96k66kczovvbm1i","JVM 笔记（一）走进JVM",{"bookId":66,"id":70,"indexOrder":13,"name":71},"ydd7n3jg8unc3clg","JVM 笔记（二）内存管理",{"bookId":66,"id":73,"indexOrder":13,"name":74},"r9dq37de0kaeauoi","JVM 笔记（三）类与类加载","了解Java的底层运作机制","Java JVM 虚拟机","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Er4y1r7as\u002F",{"cateId":8,"chapters":79,"desc":90,"id":81,"time":60,"title":91,"video":92},[80,84,87],{"bookId":81,"id":82,"indexOrder":13,"name":83},3,"asncyye9ya18gfar","JUC 笔记（一）再谈多线程",{"bookId":81,"id":85,"indexOrder":13,"name":86},"5tr1sm4ho6ygpt9q","JUC 笔记（二）并发编程核心",{"bookId":81,"id":88,"indexOrder":13,"name":89},"1scf51z5300mzxkh","JUC 笔记（三）并发编程进阶","你也可以成为多线程的主宰者","Java JUC 并发编程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1JT4y1S7K8\u002F",{"cateId":8,"chapters":94,"desc":102,"id":96,"time":60,"title":103,"video":104},[95,99],{"bookId":96,"id":97,"indexOrder":13,"name":98},4,"eedesc445ygiqhil","NIO 笔记（一）基础内容",{"bookId":96,"id":100,"indexOrder":13,"name":101},"ndz9t0uunrmfmv4n","NIO 笔记（二）Netty框架专题","编写畅快的高性能网络服务器","Java NIO 网络编程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1ar4y1J7mC\u002F",{"cateId":8,"chapters":106,"desc":114,"id":108,"time":60,"title":115,"video":116},[107,111],{"bookId":108,"id":109,"indexOrder":13,"name":110},5,"9890i8ofuadpwy2b","[扩展篇] Java 9-17新特性介绍",{"bookId":108,"id":112,"indexOrder":13,"name":113},"tsrkqvb6zpmtwh0n","[扩展篇] JavaSE关键字总结 笔记","精彩仍在继续，不要停止脚步","其他内容","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1tU4y1y7Fg\u002F",{"cateId":8,"chapters":118,"desc":141,"id":120,"time":142,"title":143,"video":144},[119,123,126,129,132,135,138],{"bookId":120,"id":121,"indexOrder":13,"name":122},6,"4db9h32opv7imszh","JavaSE 笔记（一）面向过程编程",{"bookId":120,"id":124,"indexOrder":13,"name":125},"c93u3v37br7hgn1q","JavaSE 笔记（二）面向对象基础篇",{"bookId":120,"id":127,"indexOrder":13,"name":128},"yglsjde9gi1jxkcb","JavaSE 笔记（三）泛型与集合类",{"bookId":120,"id":130,"indexOrder":13,"name":131},"ilhi987n986rmvo3","JavaSE 笔记（四）异常机制",{"bookId":120,"id":133,"indexOrder":13,"name":134},"pqv38vexmenglk4k","JavaSE 笔记（五）IO",{"bookId":120,"id":136,"indexOrder":13,"name":137},"jiq41n87i9ia7ilw","JavaSE 笔记（六）多线程",{"bookId":120,"id":139,"indexOrder":13,"name":140},"wn7x2mge9ws79zps","JavaSE 笔记（七）反射","此版本为早期录制的旧版本",2021,"JavaSE 21年旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Gv411T7pi\u002F","包含JavaSE基础路线全部教程笔记，打下坚实的基础","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-bf1a927f037a79f4d57d9ae543430a0d_1440w.webp","JavaSE 系列笔记 ☕️",{"books":149,"desc":199,"id":66,"image":200,"title":201},[150,166,178],{"cateId":66,"chapters":151,"desc":162,"id":153,"time":163,"title":164,"video":165},[152,156,159],{"bookId":153,"id":154,"indexOrder":13,"name":155},21,"iqbc2haub31bwqtz","Lombok 极速上手",{"bookId":153,"id":157,"indexOrder":13,"name":158},"ijay2hay19kn1k031","Mybatis 快速上手",{"bookId":153,"id":160,"indexOrder":13,"name":161},"ru4ogh2waocpn4jo","Maven 快速上手","JavaWeb阶段必须扩展知识点",2024,"常用知识讲解","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1gb421J7ok\u002F",{"cateId":66,"chapters":167,"desc":175,"id":169,"time":163,"title":176,"video":177},[168,172],{"bookId":169,"id":170,"indexOrder":13,"name":171},22,"ek20yvb6huhxizx7","JavaWeb 笔记（一）计算机网络基础",{"bookId":169,"id":173,"indexOrder":13,"name":174},"pgevws6w2krkffa4","JavaWeb笔记（二）Java与数据库","全面升级的JavaWeb课程","JavaWeb 网站开发","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1kS421X7rq\u002F",{"cateId":66,"chapters":179,"desc":196,"id":181,"time":142,"title":197,"video":198},[180,184,187,190,193],{"bookId":181,"id":182,"indexOrder":13,"name":183},7,"ggwwj09j2vkfftvd","JavaWeb 笔记（一）Java网络编程",{"bookId":181,"id":185,"indexOrder":13,"name":186},"sauvq105istskjaz","JavaWeb 笔记（二）数据库基础",{"bookId":181,"id":188,"indexOrder":13,"name":189},"xgbeasmvrhxx9tn4","JavaWeb 笔记（三）Java与数据库",{"bookId":181,"id":191,"indexOrder":13,"name":192},"k7dfwua3bsezvw9q","JavaWeb 笔记（四）前端基础",{"bookId":181,"id":194,"indexOrder":13,"name":195},"ycpagby2v7j4p728","JavaWeb 笔记（五）后端开发","搭建属于自己的Web网站","JavaWeb 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1CL4y1i7qR\u002F","包含JavaWeb路线全套笔记，从零开始搭建自己的网站！","https:\u002F\u002Fpic3.zhimg.com\u002F80\u002Fv2-df3b38e3012258ed70c23b586309e3f6_1440w.webp","JavaWeb 系列笔记 🚛",{"books":203,"desc":288,"id":81,"image":289,"title":290},[204,220,235,255,273],{"cateId":81,"chapters":205,"desc":216,"id":207,"time":217,"title":218,"video":219},[206,210,213],{"bookId":207,"id":208,"indexOrder":13,"name":209},8,"h7sjo5oy0l03607e","SSM笔记（一）Spring基础",{"bookId":207,"id":211,"indexOrder":13,"name":212},"eve8gq72qmdb46sg","SSM笔记（二）SpringMvc基础",{"bookId":207,"id":214,"indexOrder":13,"name":215},"63v73g0zh1qlr6fk","SSM笔记（三）SpringSecurity基础","Spring的探索之路从这里开始",2023,"JavaSSM 基础部分","[\"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Kv4y1x7is\u002F\", \"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Lh4y1M7kx\u002F\", \"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1fV411M7aS\u002F\"]",{"cateId":81,"chapters":221,"desc":232,"id":223,"time":217,"title":233,"video":234},[222,226,229],{"bookId":223,"id":224,"indexOrder":13,"name":225},16,"0k66v5r6slsfuog4","SpringBoot笔记（一）核心内容",{"bookId":223,"id":227,"indexOrder":13,"name":228},"bqlrnc2yvkaxo8s1","SpringBoot笔记（二）数据交互",{"bookId":223,"id":230,"indexOrder":13,"name":231},"wci9lb9tgea866jt","SpringBoot笔记（三）前后端分离","SpringBoot全新重制版","SpringBoot 新版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xu4y1m7UP\u002F",{"cateId":81,"chapters":236,"desc":252,"id":238,"time":60,"title":253,"video":254},[237,240,243,246,249],{"bookId":238,"id":239,"indexOrder":13,"name":225},9,"e43gl1ilygps032v",{"bookId":238,"id":241,"indexOrder":13,"name":242},"emnmd8nzfdb3hr50","SpringBoot笔记（二）Git版本控制",{"bookId":238,"id":244,"indexOrder":13,"name":245},"jjlolj5igvttvyhv","SpringBoot笔记（三）Redis数据库",{"bookId":238,"id":247,"indexOrder":13,"name":248},"skgr4ivb5curdoux","SpringBoot笔记（四）其他框架介绍",{"bookId":238,"id":250,"indexOrder":13,"name":251},"le91fqhu4dqui1k4","SpringBoot笔记（五）Linux系统","逐步走向企业级开发","SpringBoot 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1UL411V7f3\u002F",{"cateId":81,"chapters":256,"desc":270,"id":258,"time":60,"title":271,"video":272},[257,261,264,267],{"bookId":258,"id":259,"indexOrder":13,"name":260},10,"oejzo0l77zeb6a7e","SpringCloud笔记（一）微服务基础",{"bookId":258,"id":262,"indexOrder":13,"name":263},"f6eya9taaelsl35p","SpringCloud笔记（二）微服务进阶",{"bookId":258,"id":265,"indexOrder":13,"name":266},"35v1hbsfcdgagdnw","SpringCloud笔记（三）微服务应用",{"bookId":258,"id":268,"indexOrder":13,"name":269},"a782u84512tyuo1m","SpringCloud笔记（四）消息队列","体验微服务架构带来的魅力","SpringCloud 进阶","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1AL4y1j7RY\u002F",{"cateId":81,"chapters":274,"desc":285,"id":276,"time":142,"title":286,"video":287},[275,278,280,282],{"bookId":276,"id":277,"indexOrder":13,"name":209},11,"efjw75u8a251qxk5",{"bookId":276,"id":279,"indexOrder":13,"name":212},"guc134xb7sl78vju",{"bookId":276,"id":281,"indexOrder":13,"name":215},"u8ekxxucowr2b1tm",{"bookId":276,"id":283,"indexOrder":13,"name":284},"vkpmw9wbej21nei6","SSM笔记（四）MySQL进阶","此教程为2021年旧版教程","JavaSSM 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xL4y1H7Tq\u002F","包含Spring全套框架笔记，从开始到Spring Boot，以及众多运维小知识。","https:\u002F\u002Fpic4.zhimg.com\u002F80\u002Fv2-28c3144421220d7c048703281bc34f63_1440w.webp","Spring 系列笔记 🍏",{"books":292,"desc":329,"id":96,"image":330,"title":331},[293,308],{"cateId":96,"chapters":294,"desc":305,"id":296,"time":60,"title":306,"video":307},[295,299,302],{"bookId":296,"id":297,"indexOrder":13,"name":298},12,"jd3e8u5cmvx5gco6","C语言（一）计算机思维导论",{"bookId":296,"id":300,"indexOrder":13,"name":301},"lqv77apvx82nkkio","C语言（二）基础语法",{"bookId":296,"id":303,"indexOrder":13,"name":304},"xb0b9t37gyv96xns","C语言（三）高级特性","包含高等院校需要教授的全部内容","C语言程序设计","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Cr4y137os\u002F",{"cateId":96,"chapters":309,"desc":326,"id":311,"time":60,"title":327,"video":328},[310,314,317,320,323],{"bookId":311,"id":312,"indexOrder":13,"name":313},13,"8a046ps2e4w6k4py","数据结构与算法（一）线性结构篇",{"bookId":311,"id":315,"indexOrder":13,"name":316},"3ma8db91f9zrnkja","数据结构与算法（二）树形结构篇",{"bookId":311,"id":318,"indexOrder":13,"name":319},"0lsjm59k7cgu4tpr","数据结构与算法（三）散列表篇",{"bookId":311,"id":321,"indexOrder":13,"name":322},"0qzy7bogo0g2pusa","数据结构与算法（四）图结构篇",{"bookId":311,"id":324,"indexOrder":13,"name":325},"6gmcxcikcilyxblj","数据结构与算法（五）排序算法篇","虽然很难，但是它是考研必学科目","数据结构与算法","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV13W4y127Ey\u002F","你的内心一直有一个坚定的声音在告诉你，一定要考上一名研究生，向着未来前进吧！","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-ac128404efb29ce1c9d1ccc61024f1d1_1440w.webp","C语言 系列笔记 🥬",{"books":333,"desc":367,"id":108,"image":368,"title":369},[334,349,358],{"cateId":108,"chapters":335,"desc":346,"id":337,"time":163,"title":347,"video":348},[336,340,343],{"bookId":337,"id":338,"indexOrder":13,"name":339},17,"urw2e6gg1lprv65w","Kotlin（一）基础语法",{"bookId":337,"id":341,"indexOrder":13,"name":342},"t7lnl87f74f3v1ju","Kotlin（二）类与对象",{"bookId":337,"id":344,"indexOrder":13,"name":345},"v1zzvki0knb1xvml","Kotlin（三）高级特性","包含Kotlin语言完整基础部分","Kotlin程序设计基础","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1P94y1c7tV\u002F",{"cateId":108,"chapters":350,"desc":355,"id":352,"time":163,"title":356,"video":357},[351],{"bookId":352,"id":353,"indexOrder":13,"name":354},18,"ovbzpe7065bye1st","Kotlin扩展（一）","包含Kotlin额外扩展知识","Kotlin扩展篇","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Hg4y1m7Ca\u002F",{"cateId":108,"chapters":359,"desc":364,"id":361,"time":163,"title":365,"video":366},[360],{"bookId":361,"id":362,"indexOrder":13,"name":363},19,"3at7ybv04dmjc0wp","Gradle基础教程","Gradle配置教程（Kotlin）","Gradle教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Fc411x7xF\u002F","Kotlin让JVM平台焕发新的生机，让语言的表达更加优美","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-be815568f7c79c64cdaa171b0409786d_1440w.webp","Kotlin 系列笔记 ☘️",{"books":371,"desc":418,"id":120,"title":419},[372,391,403],{"cateId":120,"chapters":373,"desc":387,"id":375,"time":388,"title":389,"video":390},[374,378,381,384],{"bookId":375,"id":376,"indexOrder":13,"name":377},26,"zjf5qapwqtqiohcn","JavaScript笔记（一）基础语法",{"bookId":375,"id":379,"indexOrder":13,"name":380},"95jc6sjyjwcp9pvp","JavaScript笔记（二）核心知识",{"bookId":375,"id":382,"indexOrder":13,"name":383},"j35cdc1qz8dzq7pn","JavaScript笔记（三）进阶知识",{"bookId":375,"id":385,"indexOrder":13,"name":386},"sdhodlihphnpcg37","JavaScript笔记（四）前端基础","包含JavaScript最新语法规范讲解",2026,"JavaScript教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xq6gBgESU",{"cateId":120,"chapters":392,"desc":400,"id":394,"time":37,"title":401,"video":402},[393,397],{"bookId":394,"id":395,"indexOrder":13,"name":396},23,"bsisgazdftiz3o9c","HTML5笔记（一）基础内容",{"bookId":394,"id":398,"indexOrder":13,"name":399},"njol93fs34gfwuzf","HTML5笔记（二）高级内容","包含HTML基础内容和相关知识点","HTML5核心教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1BrBiYNEWg",{"cateId":120,"chapters":404,"desc":415,"id":406,"time":37,"title":416,"video":417},[405,409,412],{"bookId":406,"id":407,"indexOrder":13,"name":408},25,"jo74ciirtg8wh90y","CSS笔记（一）基础入门",{"bookId":406,"id":410,"indexOrder":13,"name":411},"ap5ixyomoejuw4ue","CSS笔记（二）盒模型和布局",{"bookId":406,"id":413,"indexOrder":13,"name":414},"4djgk5xy1lzpiuf2","CSS笔记（三）变换和过渡","包含CSS3基础内容和相关知识点","CSS3核心教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1sQeEzFEKi","包含Web前端学习路径全部教程笔记，打下坚实的基础","Web前端 系列笔记",{"books":421,"desc":458,"id":423,"image":368,"title":459},[422,432,450],{"cateId":423,"chapters":424,"desc":429,"id":426,"time":163,"title":430,"video":431},100,[425],{"bookId":426,"id":427,"indexOrder":13,"name":428},20,"o0ab271mkdsas87","Markdown基础语法","编写简洁而又优美的文档","Markdown教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1eJ4m157kC",{"cateId":423,"chapters":433,"desc":447,"id":435,"time":60,"title":448,"video":449},[434,438,441,444],{"bookId":435,"id":436,"indexOrder":13,"name":437},14,"6386mh7anqt4tzyv","设计模式（一）面向对象设计原则",{"bookId":435,"id":439,"indexOrder":13,"name":440},"8ftkb38wfn6ox0ug","设计模式（二）创建型",{"bookId":435,"id":442,"indexOrder":13,"name":443},"i1msql1k8y70etey","设计模式（三）结构型",{"bookId":435,"id":445,"indexOrder":13,"name":446},"5434a3cyyjvwhs8s","设计模式（四）行为型","使你的编码水平得到质的飞跃","设计模式系列","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1u3411P7Na\u002F",{"cateId":423,"chapters":451,"desc":456,"id":453,"time":60,"title":457},[452],{"bookId":453,"id":454,"indexOrder":13,"name":455},15,"zj9uvg0sp3b0sok8","Docker 容器技术 笔记","这里包含其他中间件课程笔记","其他中间件笔记","我们对知识的探索从未停止，只有不断地学习，才能走向美好的未来！","其他笔记分类 🌽",200,true,{"data":463,"status":460,"success":461},{"bookId":375,"content":464,"id":382,"indexOrder":81,"introduction":465,"lastUpdate":466,"name":383},"![image-20260208011656241](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F08\u002F2IXikvMBz6qjWUY.png)\n\n# JavaScript进阶部分\n\n前面我们为大家介绍了JS的函数和面向对象，我们知道在JS中，万物皆对象，随便什么类型都可以当做对象使用，本章我们将承接上文，继续介绍JavaScript的高级特性部分。\n\n## 函数进阶\n\n在讲解完对象之后，我们接着回顾之前的函数部分，介绍更多有关函数的高级特性。\n\n### 函数的注释\n\n函数的注释往往可以为函数增加更多辅助信息，我们先来看一个没有注释的函数：\n\n```js\nfunction fn(a, b) {\n    return a * b \u002F 2\n}\n```\n\n你能看出来它是干什么的吗？也许是求三角形面积？也可能是别的逻辑。\n\n此时我们可以考虑为函数添加注释，来介绍这个函数是做什么的。在 JavaScript 中，最常见、也最推荐的函数注释写法叫做 **JSDoc 风格**，特点是：\n\n- 使用 `\u002F** ... *\u002F`\n- 每一行以 `*` 开头\n- 可以被编辑器自动识别（VS Code\u002FWebStorm 会有提示）\n\n我们来尝试添加一个看看：\n\n```js\n\u002F**\n * 计算三角形的面积\n *\u002F\nfunction fn(a, b) {\n    return a * b \u002F 2\n}\n```\n\n当我们将鼠标移动到函数名称上时，就会自动显示它的注释信息，这样就很直观了：\n\n![image-20260208142122819](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F08\u002FChRztiGexf8Lv5D.png)\n\n除此之外，我们还可以针对所有的参数进行描述，比如这里的`a`和`b`是做什么的，需要什么类型的数据：\n\n```js\n\u002F**\n * 计算三角形的面积\n * @param {number} a 底边长度\n * @param {number} b 高度\n *\u002F\nfunction fn(a, b) {\n    return a * b \u002F 2\n}\n```\n\n![image-20260208154603815](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F08\u002FjQBLumEwT8doN5O.png)\n\n使用`@param`来为函数参数进行细致化描述，后续可以在花括号中添加函数参数的类型。我们为函数的参数增加了特殊注释之后，用户在使用时，得到函数参数的信息会更加详细。\n\n同样的，针对函数的返回值，我们也可以进行细致化描述：\n\n```js\n\u002F**\n * 计算三角形的面积\n * @param {string} a 底边长度\n * @param {number} b 高度\n * @returns {number} 三角形面积\n *\u002F\nfunction fn(a, b) {\n    return a * b \u002F 2\n}\n```\n\n使用`@returns`来为返回值添加描述，通过这种方式也可以明确返回值的类型。\n\n我们还可以为用户添加一个示例用法，使用`@example`即可：\n\n```js\n\u002F**\n * 计算三角形的面积\n * @param {string} a 底边长度\n * @param {number} b 高度\n * @returns {number} 三角形面积\n * @example\n * fn(4, 2) \u002F\u002F 4\n *\u002F\n```\n\n### 即时调用函数\n\n在前面的学习中，我们已经掌握了**函数的定义和调用**，但有时候我们会遇到这样一种需求：\n\n>  我只想执行一次代码，执行完就“消失”，不污染外部环境\n\n这时，就轮到我们这一节的主角登场了：**即时调用函数（Immediately Invoked Function Expression，简称 IIFE）**，它可以实现函数在定义完成的“同一时间”就立刻执行。\n\n要定义这样的函数也非常简单，首先我们还是正常编写一个函数：\n\n```js\nfunction hello() {\n    console.log(\"Hello World!\")\n}\n```\n\n接着我们在这个函数的外部套上括号，并在后面添加括号和实际参数：\n\n```js\n(function hello(text) {\n    console.log(`Hello World! ${text}`)\n})(\"You\")  \u002F\u002F这里已经在调用了，就像急急国王一样\n```\n\n这样，一个即时调用函数就创建好了，在函数创建的之后就立即调用。一般情况下，这种函数不会再去其他地方调用了，所以我们可以直接把它写成匿名函数形式：\n\n```js\n(function (text) {\n    console.log(`Hello World! ${text}`)\n})(\"You\")\n```\n\n不过，这种调用方式一般用于解决ES6之前的`var`作用域问题，在有了`let`和`const`之后，这种用法实际上很少了，这里仅做了解即可。\n\n### 剩余参数\n\n在之前的章节中，我们学习了如何给函数传递固定数量的参数。但在实际开发中，我们经常会遇到这样的情况：**我不确定用户到底会传多少个参数进来**。\n\n最典型的例子就是我们之前用过的`console.log`，我们发现可以传入任意个数的参数进去：\n\n```js\nconsole.log(\"A\", \"B\", \"C\")\n```\n\n但是通过前面的学习我们知道，函数的参数数量是定义的时候确定，那么这种效果要怎么才能实现呢？比如，我们要写一个求和函数 `sum`，它可能需要计算 2 个数的和，也可能需要计算 10 个数的和。如果用之前的方法，我们只能死板地定义 `sum(a, b, c...)`，这显然不够灵活。\n\n实际上，在调用函数时，即使形参列表里面没有任何参数，也可以传递实参\n\n```js\ntest(\"A\", \"B\", \"C\")  \u002F\u002F在调用函数时，即使形参列表里面没有任何参数，也可以传递实参\n```\n\n那么这些实际参数怎么获取到呢？在函数对象上，还有一个属性`arguments`，这个属性包含了在实际调用时所有传入的参数，并且我们可以在函数内部使用它：\n\n```js\nfunction test() {\n    console.log(arguments);  \u002F\u002Farguments就是实际参数列表\n}\n```\n\n这个属性类似于我们前面讲解的数组的结构（但不是数组，因为它没有数组具有的很多方法）我们可以通过下标来访问里面的元素：\n\n```js\nfunction test() {\n    console.log(arguments[0])\n}\n```\n\n我们也可以使用`arguments.length`来获取传入了多少个参数：\n\n```js\nconsole.log(arguments.length)\n```\n\n这样，我们无论传入多少个参数，都可以通过它来快速获取了。虽然这种方式非常简单，但是它并不直观，因为我们并没有定义任何的形参，为了让函数的定义更加明确，在 ES6 之后引入了**剩余参数**语法：\n\n```js\nfunction test(...args) {  \u002F\u002F剩余参数通过在参数名前面加上三个点，表示这里可以接受多个参数\n    console.log(args)\n}\n\ntest(1, 2, 4, 5)  \u002F\u002F这样就可以选择传入0-N个参数了\n```\n\n同时，这种参数得到的结果是一个数组类型的值：\n\n![image-20260128205533041](https:\u002F\u002Fs2.loli.net\u002F2026\u002F01\u002F28\u002FcBWniaeUml8SqwJ.png)\n\n由于是数组类型，我们可以对这些实际参数进行各种操作：\n\n![image-20260208171719284](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F08\u002FfXSJ6t1YHZWpaIv.png)\n\n注意，当函数存在其他参数时，剩余参数只能位于最后一位且只能出现一次，否则会出现歧义：\n\n```js\nfunction test(text, ...args) {  \u002F\u002F剩余参数前面可以出现任意多的单参数\n}\n```\n\n在ES6 之后，建议各位小伙伴**优先使用剩余参数，而不是 arguments**，它使用起来更加简单快捷，定义更明确。\n\n### 箭头函数\n\n在 ES6 中，引入了一种全新的函数写法：**箭头函数（Arrow Function）**它的语法更简洁，你可以将他看做是函数的一种替代写法。普通函数我们已经很熟悉了：\n\n```js\nfunction add(a, b) {\n    return a + b\n}\n```\n\n而现在，我们有了箭头函数，可以像这样写：\n\n```js\n\u002F\u002F使用一个变量来代表箭头函数，就像之前的匿名函数一样\nconst add = (a, b) => {\n    return a + b\n}\n```\n\n箭头函数去掉了 `function`关键字，在参数和函数体之间，使用 `=>`进行连接，看起来更加简洁大气。当然，箭头函数本质上和函数是一样的，都可以正常调用：\n\n```js\nconst add = (a, b) => {\n    return a + b\n}\nconsole.log(add(3, 8))\n```\n\n特别的，当函数有且只有一个参数时，可以省略参数列表的小括号：\n\n```js\nconst square = x => {  \u002F\u002Fx周围的小括号被省略了\n    return x * x\n}\n```\n\n特别的，当函数体只有一行 `return` 时，还可以省略大括号和 `return`：\n\n```js\nconst square = x => x * x  \u002F\u002F省略大括号时，箭头后面的表达式结果会自动作为返回值\n```\n\n是不是感觉写起来很舒服？把我们之前臃肿的函数定义大大简化了。所以，大部分情况下，我们更建议各位小伙伴采用这种新的函数语法，它可以让我们写起来更加简洁优雅。\n\n当然，这里也有很多箭头函数需要注意的点，首先就是如果我们返回一个对象：\n\n```js\nconst fn = () => { name: \"Tom\" }  \u002F\u002F错误的\n```\n\n虽然我们前面说了如果只有一行代码可以简化，但是在这种情况下返回一个对象会存在歧义，因为对象也是使用花括号作为其对象结构的声明，所以 `{}` 会被当成函数体，而不是对象。正确写法是：\n\n```js\nconst fn = () => ({ name: \"Tom\" })\n```\n\n然后，箭头函数中也没有`arguments`，它不支持使用，我们只能选择使用剩余参数：\n\n![image-20260209000321035](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F09\u002FvBd6eiG1bNfsFtw.png)\n\n接着，也是箭头函数最最重要的一点，**箭头函数没有自己的 this**，我们先来看普通函数中 `this` 的表现：\n\n```js\nconst obj = {\n    name: \"小明\",\n    say() {\n        console.log(this.name)\n    }\n}\nobj.say()  \u002F\u002F 小明\n```\n\n这里的 `this` 指向调用它的对象 `obj`，没问题。但是如果我们把方法改成箭头函数：\n\n```js\nconst obj = {\n    name: \"小明\",\n    say: () => {\n        console.log(this.name)\n    }\n}\nobj.say()  \u002F\u002Fundefined\n```\n\n你会发现，这个函数的`this`作用域并不是对象本身，即使我们箭头函数是写在对象内的。箭头函数的 `this` **不会指向调用它的对象**，而是等于它“外层最近的非箭头函数”的 `this`（也可以说，箭头函数 **没有自己的 this**，它只是“借用”外层作用域的 this）所以这里会向外层查找 this ，在大多数情况下，外层就是全局作用域（浏览器中是 `window`）这跟我们之前直接在最外层的函数中使用`this`是一样的效果，实际上：\n\n* 普通函数的 `this` 是 **调用时决定的**，如果调用时作用域不在对应位置，则会出现问题\n* 箭头函数的 `this` 是 **定义时决定的**，定义时的作用域是什么，后续即使传递也不会更改，甚至使用前面介绍的`bind`、`apply`和`call`也无法改变\n\n不管怎么调用，箭头函数的 this 都不会变，它只会指向在定义时确定的全局作用域中的对象：\n\n```js\nconst fn = () => {\n    console.log(this)\n}\n\nfn()          \u002F\u002F window\nobj.fn = fn\nobj.fn()      \u002F\u002F 仍然是 window，无论在哪里都不会被修改\n```\n\n当然，这并不代表箭头函数就没有作用，在很多情况下，如果我们不需要使用`this`，那么它还是非常好用的，比如：\n\n```js\nconst arr = [1, 2, 3]\nconst result = arr.map(x => x * 2)  \u002F\u002F使用前面讲解的的转换操作\nconsole.log(result)\n```\n\n```js\nconst arr = [1, 2, 3]\narr.forEach(x => console.log(x))  \u002F\u002F依次打印元素\n```\n\n这种写法在现代 JS 中几乎是标配，我们在后续的课程中遇到回调函数，我们一律使用箭头函数进行讲解。\n\n### 解构语法\n\n在前面的学习中，我们已经非常熟悉 **数组** 和 **对象** 的使用了，但在使用它们的时候，你可能经常会写出这样的代码：\n\n```js\nconst arr = [10, 20, 30]\n\nconst a = arr[0]\nconst b = arr[1]\nconst c = arr[2]\n```\n\n虽然代码本身没有任何问题，但你会发现写法是不是有点啰嗦，如果元素很多，就会很麻烦。但其实，这种操作本质上只是“拆包取值”的行为。包括对象也是类似的情况：\n\n```js\nconst person = {\n    name: \"小明\",\n    age: 18\n}\n\nconst name = person.name\nconst age = person.age\n```\n\n有没有一种方式，可以**一次性把结构拆开来用**？这正是我们这节课介绍的 **解构语法（Destructuring）** 要解决的问题。它不是新类型，也不是函数，而是一种**语法糖**，用来让代码写得更简洁、更清晰，它也是ES6新增的语法。解构语法主要分为两种：\n\n- **数组解构**\n- **对象解构**\n\n数组解构是**按位置**来匹配的，在定义变量时，可以将多个变量使用`[]`囊括，后面直接使用要被解构的数组进行赋值：\n\n```js\nconst arr = [10, 20, 30, 40]\nconst [a, b, c] = arr   \u002F\u002F在定义变量时，可以将多个变量使用[]囊括\nconsole.log(a, b, c) \u002F\u002F 10 20 30\n```\n\n接着，数组中的值会按照变量在`[]`中的顺序进行依次赋值，这里就得到了数组中前三个元素的值。可能会有小伙伴说，那我只想要中间的某些值怎么办：\n\n```js\nconst arr = [10, 20, 30, 40]\nconst [, b, c] = arr   \u002F\u002F需要跳过的变量，直接不写就行了，直接加逗号\nconsole.log(b, c) \u002F\u002F 20 30\n```\n\n需要跳过的变量，不写就行了，直接加逗号即可，这里逗号的作用是：**占位但不取值**。这里需要注意的是，如果数组长度不够，解构出来的值会是 `undefined`：\n\n```js\nconst arr = [10]\nconst [a, b] = arr\nconsole.log(b) \u002F\u002F undefined\n```\n\n当然，为了能够在这种情况进行补救， 我们可以为解构语法中的变量设置默认值：\n\n```js\nconst [a, b = 100] = arr\nconsole.log(b) \u002F\u002F 100\n```\n\n当对应位置没有值时，才会使用默认值。解构也可以和剩余参数一起使用：\n\n```js\nconst arr = [1, 2, 3, 4]\nconst [a, ...rest] = arr  \u002F\u002F...rest表示剩余的元素，和剩余参数一样，数组形式\nconsole.log(a)    \u002F\u002F 1\nconsole.log(rest) \u002F\u002F [2, 3, 4]\n```\n\n接下来我们来看看对象的结构如何使用，我们可以使用`{}`来进行解构，注意对象解构是按“属性名”，而不是按顺序，我们在解构列表中写的变量名字必须与对象中的保持一致：\n\n```js\nconst person = {\n    name: \"小明\",\n    age: 18\n}\n\nconst { name, age } = person  \u002F\u002F使用{}来进行对象解构，顺序无所谓，可以不按顺序来\nconsole.log(name, age)\n```\n\n如果对象中不存在该属性，那么会得到一个`undefined`作为解构变量的值。\n\n如果你不想用原来的属性名，或是对象的某些属性与外部的某个变量名称发生了冲突，也可以在解构时重命名：\n\n```js\nconst person = {\n    name: \"小明\",\n    age: 18\n}\n\nconst { name: userName, age } = person  \u002F\u002F使用冒号来重命名结构的属性\nconsole.log(userName, age)\n```\n\n这里的含义是：`name` 属性，赋值给变量 `userName`（重新起的新名字），同样的，对象解构同样支持默认值：\n\n```js\nconst person = {\n    name: \"小明\"\n}\n\nconst { name, age = 18 } = person\nconsole.log(age) \u002F\u002F 18\n```\n\n注意，当对象中不存在该属性时，默认值才会生效，注意，对象中存在这个属性是`undefined`，也会被视为不存在。\n\n解构和剩余参数一起使用，在对象中同样适用：\n\n```js\nconst obj = {\n    name: \"小明\",\n    age: 18,\n    city: \"北京\"\n}\n\nconst { name, ...others } = obj\nconsole.log(others) \u002F\u002F { age: 18, city: \"北京\" }\n```\n\n学习了数组和对象的结构语法之后，我们最后再来看看函数中如何使用解构语法，这是解构语法**最常用、最实用**的地方之一，这是一个很普通的函数：\n\n```js\nfunction printUser(user) {\n    console.log(user.name)\n    console.log(user.age)\n}\n```\n\n在使用对象解构后：\n\n```js\nfunction printUser({ name, age }) {  \u002F\u002F直接将形参写成结构后的样子\n    console.log(name)\n    console.log(age)\n}\nprintUser(person)  \u002F\u002F这里省略对象内的属性\n```\n\n我们可以直接将形式参数写为解构后的样子，这样，参数结构一目了然，函数内部更简洁，最主要的是能少写很多 `.`运算符，注意，如果存在多个形式参数，也可以一起使用：\n\n```js\nfunction printUser({ name, age }, text, { type }) {  \u002F\u002F多种写法混合也可以的\n    console.log(name)\n    console.log(age)\n}\n```\n\n```js\nprintUser(person, \"666\", anything)\n```\n\n函数参数的结构也可以使用默认值，因为之前已经讲解过，这里就不做演示了。\n\n### 展开运算符\n\n在上一节我们学习了解构语法，其中有一个符号你一定已经见过了：`...`，在解构中它表示 **“剩余”**，而在这一节，它有一个新的名字和用途：**展开运算符（Spread Operator）**虽然写法一样，但**使用位置不同，含义也不同**。\n\n我们先来看一个不用展开运算符的写法，假设我们现在想要合并两个数组，我们可以使用`concat`方法来实现：\n\n```js\nconst arr1 = [1, 2, 3]\nconst arr2 = [4, 5]   \u002F\u002F将第一个数组直接装到第二个数组中\nconst arr3 = arr1.concat(arr2)\nconsole.log(arr3)  \u002F\u002F [1, 2, 3, 4, 5]\n```\n\n可能各位小伙伴会觉得这样写没毛病啊，那再比如，我们现在需要合并四个数组：\n\n```js\nconst arr1 = [1, 2, 3]\nconst arr2 = [4, 5]\nconst arr3 = [6, 7]\nconst arr4 = [8, 9]\nconst arr5 = arr1.concat(arr2).concat(arr3).concat(arr4)\nconsole.log(arr5)  \u002F\u002F [1, 2, 3, 4, 5, 6, 7, 8, 9]\n```\n\n大家有没有发现，再这样下去，`concat`都快变成贪吃蛇了。ES6之后，我们可以使用展开运算符来快速实现这样的多合一操作，展开运算符只需要对着数组使用`...`即可：\n\n```js\nconst arr5 = [...arr1, ...arr2, ...arr3, ...arr4]\n```\n\n此时，`...arr1` 会把数组拆成 `1, 2, 3`，再按顺序放入新数组中，得益于这种特性，展开运算符可以非常自然地合并多个数组，相比以前使用 `concat`，这种写法更直观、更灵活、顺序一眼就能看明白。除此之外，很多新手会踩这样一个坑：\n\n```js\nconst arr1 = [1, 2, 3]\nconst arr2 = arr1\n\narr2.push(4)\nconsole.log(arr1) \u002F\u002F [1, 2, 3, 4]\n```\n\n这是因为数组是引用类型，它本质上也是一个对象，简单的赋值使得`arr2` 和 `arr1` 指向同一个地址。如果我们想要**创建一个新数组**，可以使用展开运算符：\n\n```js\nconst arr1 = [1, 2, 3]\nconst arr2 = [...arr1]   \u002F\u002F展开运算符会展开原数组所有内容\n\narr2.push(4)\nconsole.log(arr1) \u002F\u002F [1, 2, 3]\n```\n\n展开运算符会展开原数组所有内容，并直接放到新声明的数组中。注意这也是一种**浅拷贝**，因为结构出来的值还是原来数组中的，但在日常开发中非常常用。\n\n在ES2018之后，展开运算符不仅可以用于数组，也可以用于对象：\n\n```js\nconst obj1 = {\n    name: \"小明\",\n    age: 18\n}\n\nconst obj2 = {\n    ...obj1,   \u002F\u002F直接获得对象1中定义的全部属性\n    city: \"北京\"\n}\n\nconsole.log(obj2)\n```\n\n对对象使用`...`的效果是，把对象的属性一个个展开并放进新对象中，这和数组比较类似。不过需要注意的是，当属性名重复时，**后面的会覆盖前面的**：\n\n```js\nconst base = { a: 1, b: 2 }\nconst extra = { b: 100, c: 3 }\n\nconst result = { ...base, ...extra }\nconsole.log(result)\n\u002F\u002F { a: 1, b: 100, c: 3 }\n```\n\n当我们需要合并多个对象时，使用展开运算符就是一种非常推荐的做法。和数组一样，对象展开也可以用来拷贝对象：\n\n```js\nconst obj1 = { name: \"小明\" }\nconst obj2 = { ...obj1 }\n\nobj2.name = \"小红\"\nconsole.log(obj1.name) \u002F\u002F 小明\n```\n\n还是那个问题，只拷贝属性的值本身，它是浅拷贝。\n\n最后需要提及的是，展开运算符还可以用在**函数调用时**，比如某个函数需要两个参数，我们可以直接让数组解构：\n\n```js\nconst arr = [5, 8, 16]\nfunction sum(a, b) {\n    return a + b\n}\n\nconsole.log(sum(...arr))   \u002F\u002F数组展开后，会自动使用其中的元素作为实际参数传入\n```\n\n数组展开后，会自动使用其中的元素作为实际参数传入，注意，超出形参长度的部分也会被一并作为后续参数传入，我们可以使用`arguments`来验证：\n\n![image-20260209000433384](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F09\u002F7dFReTtwmUy2HnX.png)\n\n需要注意的是，这种用法仅限于数组，对象即使可以使用展开运算符也是不能作为参数使用的。\n\n### 标签模版\n\n标签模板 (Tagged Templates)这是一种更高级的用法，你可以通过一个函数来“解析”模板字符串。常用于防止 XSS 攻击或国际化处理。\n\n在前面的章节中，我们已经学习过 **模板字符串**，也就是使用反引号包裹的字符串，比如：\n\n```js\nconst name = \"小明\"\nconst age = 18\n\nconst str = `我叫${name}，今年${age}岁`\nconsole.log(str)\n```\n\n其中字符串部分就是正常编写的字符串内容，而`${}`就是进行拼接的插值表达式。\n\n模板字符串最大的好处是：**可以在字符串中直接嵌入变量或表达式**，不用再拼接 `+`，写起来非常直观。所谓“标签模板”，本质上就是，用一个函数，来“接管”模板字符串的解析过程，它的写法看起来有点特别，我们先直接看一个最简单的例子：\n\n```js\nfunction tag(strs, value) {\n    console.log(strs)\n    console.log(value)\n}\n```\n\n这里，我们为函数定义一个变量`strs`来接收字符串，下一个变量`value`来接收插值表达式的结果。需要调用也非常简单，我们只需要直接使用函数名称拼接模版字符串即可：\n\n```js\nconst name = \"小明\"\ntag`你好，${name}`\n```\n\n接着，我们就可以在函数中得到模版字符串拆分的结果：\n\n![image-20260210012337373](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F0eNj\u002Fimage-20260210012337373.png)\n\n字符串会按照插值表达式的位置进行自动分割，得到一个字符串数组的结果，而所有的插值表达式将作为后续变量传入。由于存在字符串分割，所以`strs`的长度永远比插值表达式多`1`。\n\n实际上，我们在上一章已经接触过标签模版相关的函数，String提供的`raw`函数可以实现对转译字符的忽略效果：\n\n```js\nconsole.log(String.raw`你好，${name} 我爱你 \\n 你牛逼`);\n```\n\n我们可以自行编写处理，比如我们可以对插值表达式的结果进行国际化展示：\n\n```js\nfunction format(strs, ...values) {\n    return strs.reduce((res, str, i) => {\n        const value = values[i]\n        return res + str + (typeof value === \"number\" ? value.toFixed(2) : value)\n    }, \"\")\n}\n\nconst price = 12.3456\nconst msg = format`商品价格：${price} 元`\nconsole.log(msg)\n```\n\n实际上，很多框架也是使用的标签模版实现的自定义DSL，当然本质上，它就是通过标签模板，**把字符串当成结构化数据来解析**。\n\n### 生成器\n\n在前面的学习中，我们已经掌握了箭头函数、解构、展开等特性，但你可能会发现一个问题：**普通函数，要么不执行，要么一次性执行完**，这里来看一个最简单的函数：\n\n```js\nfunction fn() {\n    console.log(1)\n    console.log(2)\n    console.log(3)\n}\n\nfn()\n```\n\n函数一旦调用，里面的代码会**从上到下全部执行完毕**，中间没有任何“暂停”的机会。那有没有一种函数，可以实现在执行过程暂停呢？下次我们可以从暂停的位置继续执行，这正是ES6中新增的 **生成器（Generator）**的作用。\n\n生成器的写法和普通函数非常像，我们需要在`function`后面添加一个`*`表示这是一个生成器：\n\n```js\nfunction* gen() {\n  \n}\n```\n\n接着，我们可以在生成器中设定不同的阶段：\n\n```js\nfunction* gen() {\n    console.log(\"我是第一阶段\")\n    console.log(\"我是第二阶段\")\n    console.log(\"我是第三阶段\")\n}\ngen()\n```\n\n我们可以来尝试调用一下这个函数，你会发现，这个函数并没有执行。因为调用这个函数返回的其实是一个 **生成器对象**，默认情况下是暂停状态，我们需要对它进行推进才可以正常执行，必须调用 `next()`：\n\n```js\nconst generator = gen()\ngenerator.next()\n```\n\n可以看到，当我们调用`next`之后，函数才真正执行了，不过，这里三个阶段一起执行完成了，如果我们希望一个一个阶段执行，那么可以使用`yield`关键字：\n\n```js\nfunction* gen() {\n    console.log(\"我是第一阶段\")\n    yield   \u002F\u002F当遇到yield时，表示函数已经执行完一个阶段\n    console.log(\"我是第二阶段\")\n    yield\n    console.log(\"我是第三阶段\")\n}\n\nconst generator = gen()\ngenerator.next()\n```\n\n当遇到yield时，表示函数已经执行完一个阶段，此时函数会再次进入暂停状态，等待我们下一次的`next`调用。当我们连续进行三次`next`调用时，函数才能正确执行完所有内容：\n\n```js\nconst generator = gen()\ngenerator.next()\ngenerator.next()\ngenerator.next()\n```\n\n这就是生成器的作用，它可以将任务分段，从而实现阶段性推进执行函数。实际上`next`的执行是有返回值的，我们可以来观察一下：\n\n```js\nconst generator = gen()\nconsole.log(generator.next());\n```\n\n![image-20260209001707705](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F09\u002FgwrFaBqnCYm5iAo.png)\n\n每完成一个阶段，都会得到当前阶段的执行结果，其中包含这个阶段的返回值，以及是否完成。其中，阶段的返回值由`yield`来指定：\n\n```js\nfunction* gen() {\n    console.log(\"我是第一阶段\")\n    yield 233\n    console.log(\"我是第二阶段\")\n    yield 666\n    console.log(\"我是第三阶段\")\n}\n\nconst generator = gen()\nconsole.log(generator.next());  \u002F\u002F{value: 233, done: false}\nconsole.log(generator.next());  \u002F\u002F{value: 666, done: false}\nconsole.log(generator.next());  \u002F\u002F{value: undefined, done: true}\n```\n\n注意如果最后没有返回值，那么得到的的`value`就是`undefined`，如果有的话，则返回值作为`value`。正是得益于这种性质，生成器非常适合生成“无限或大型序列”，例如生成一个递增数字：\n\n```js\nfunction* counter() {\n    let i = 0\n    while (true) {\n        yield i++\n    }\n}\n\nconst c = counter()\nc.next().value \u002F\u002F 0\nc.next().value \u002F\u002F 1\nc.next().value \u002F\u002F 2\n```\n\n需要注意的是，生成器**并没有一次性生成所有数字，而是用一个给一个**。\n\n除了我们手动调用`next`来获取下一个之外，我们也可以使用`for`循环来一次性执行所有的阶段：\n\n```js\nconst generator = gen()\nfor (let value of generator) {  \u002F\u002F这里的value就是每一个阶段的执行结果\n    console.log(value)\n}\n```\n\n就像对数组进行遍历一样，我们可以使用`for`来遍历执行每一个阶段，并且这里的`value`实际上就是每一个阶段执行完成之后得到的结果，循环会在所有阶段执行完成之后自动结束。\n\n## 对象进阶\n\n在上一章，我们为大家介绍了对象的相关特性，包括对象的使用、引用类型以及原型链的概念，这一章，我们将继续上一章的内容，为大家介绍更多关于对象的进阶内容。\n\n### 属性的继承*\n\n在现实世界中，**继承**是一个非常常见的概念，比如：\n\n- 学生 **是** 人\n- 老师 **是** 人\n- 狗 **是** 动物\n\n它们都有一些**共同特征**，但又各自拥有不同的能力，比如：\n\n```js\nfunction Student(name, age) {   \u002F\u002F普通学生\n    this.name = name\n    this.age = age\n}\n\nfunction ArtStudent(name, age, level) {   \u002F\u002F美术生\n    this.name = name\n    this.age = age\n    this.level = level\n}\n```\n\n这里我们定义了两种不同的学生，一种是普通学生，还有一种是美术生，其中，普通学生具有名字和年龄属性，而美术生不仅具有普通学生的名字年龄属性，而且还额外多了一个等级属性。\n\n你会发现，两种构造函数存在大量重复代码，这显然不优雅，也不利于维护，此时我们就需要考虑继承关系了。在 JavaScript 中，由于并不存在像 Java、C++ 那样“真正的类型继承”，**JS 的继承本质上是：对象之间通过原型链共享属性和方法**。\n\n我们可以让 **美术生的对象，通过原型链，去访问普通学生对象中的属性**。在 JavaScript 中，实现这一点的核心方式，就是让子构造函数的 `prototype` 指向父构造函数创建的对象。我们先来看最基础的写法：\n\n```js\nfunction Student(name, age) {\n    this.name = name\n    this.age = age\n}\n\nfunction ArtStudent(name, age, level) {\n    this.level = level\n}\n```\n\n接着，我们需要建立 **原型继承关系**，首先我们让 `ArtStudent` 的原型指向 `Student` 的一个实例对象：\n\n```js\nArtStudent.prototype = new Student()\n```\n\n这样一来，通过 `ArtStudent` 创建出来的对象，在自身找不到属性时，就会沿着原型链，去 `Student` 的实例对象中查找。此时再次测试：\n\n```js\nconst a = new ArtStudent(\"小明\", 18, \"高级\")\nconsole.log(a.name) \u002F\u002F undefined\n```\n\n你会发现，结果不对。这是因为，虽然我们建立了原型链关系，但 `Student` 构造函数并没有被执行，`name` 和 `age` 并没有真正初始化到当前对象中。\n\n为了解决这个问题，我们需要在子构造函数中，**借用父构造函数来初始化属性**。可以通过 `call` 来完成：\n\n```js\nfunction ArtStudent(name, age, level) {\n    Student.call(this, name, age)\n    this.level = level\n}\n```\n\n这样，在创建 `ArtStudent` 对象时，由于我们通过`call`手动指定`this`指代的值，所以`Student` 构造函数会在当前对象的作用域中执行，从而为对象添加 `name` 和 `age` 属性。\n\n此时我们再次创建对象：\n\n```js\nconst a = new ArtStudent(\"小明\", 18, \"高级\")\n\nconsole.log(a.name)   \u002F\u002F 小明\nconsole.log(a.age)    \u002F\u002F 18\nconsole.log(a.level)  \u002F\u002F 高级\n```\n\n可以看到，美术生对象已经成功继承了普通学生的属性。不过，这里还存在一个小问题。我们来看一下 `constructor` 的指向：\n\n```js\na.constructor === ArtStudent \u002F\u002F false\na.constructor === Student    \u002F\u002F true\n```\n\n这是因为我们直接重写了 `ArtStudent.prototype`，导致其 `constructor` 指向发生了变化。为了解决这个问题，需要手动修正 `constructor`：\n\n```js\nArtStudent.prototype.constructor = ArtStudent\n```\n\n到这里，我们已经完成了**属性继承的基本实现**。\n\n### 类的声明与使用*\n\n在前面的内容中，我们已经通过 **构造函数 + 原型链** 的方式，实现了对象的创建以及属性的继承。这种方式在 JavaScript 中是完全合法、也是长期以来的主流写法，但你可能已经发现了一个问题：\n\n> 这种写法偏复杂，不直观，也不太符合大多数人对“类”和“继承”的直觉理解。\n\n例如，我们前面实现一个继承关系时，需要写出类似这样的代码：\n\n```js\nfunction Student(name, age) {\n    this.name = name\n    this.age = age\n}\n\nfunction ArtStudent(name, age, level) {\n    Student.call(this, name, age)\n    this.level = level\n}\n\nArtStudent.prototype = new Student()\nArtStudent.prototype.constructor = ArtStudent\n```\n\n这段代码虽然能正常工作，但对新手来说理解成本较高，也容易写错。为了解决这个问题，在 **ES6（ES2015）**中，JavaScript 引入了 **class 语法**，用来更直观地描述“类”和“继承”。不过，需要注意的是：**class 仅仅只是语法糖，本质仍然是上面的原型链机制实现的**。\n\n那么，什么是类呢？\n\n>人类、鸟类、鱼类... 所谓类，就是对一类事物的描述，是抽象的、概念上的定义，比如鸟类，就泛指所有具有鸟类特征的动物。比如人类，不同的人，有着不同的性格、不同的爱好、不同的样貌等等，但是他们根本上都是人，所以说可以将他们抽象描述为人类。\n>\n>而对象是某一类事物实际存在的每个个体，因而也被称为实例（instance）我们每个人都是人类的一个实际存在的个体。\n>\n>![image-20220919203119479](https:\u002F\u002Fs2.loli.net\u002F2022\u002F09\u002F19\u002FU2P7qWOtRz5bhFY.png)\n>\n>所以说，类就是抽象概念的人，而对象，就是具体的某一个人。\n>\n>- A：是谁拿走了我的手机？\n>- B：是个人。（某一个类）\n>- A：我还知道是个人呢，具体是谁呢？\n>- B：是XXX。（具体某个对象）\n>\n>而我们在JavaScript中，也可以像这样进行编程，我们可以定义一个类，然后进一步创建许多这个类的实例对象。像这种编程方式，我们称为**面向对象编程**。\n\n使用 `class` 关键字可以声明一个类，就像我们之前创建构造函数那样，最基本的写法如下：\n\n```js\nclass Student {  \u002F\u002F创建一个Student类型，这里其实就是之前构造函数的名字\n}\n```\n\n这个类目前还什么属性都没有，但它已经可以用来创建对象了：\n\n```js\nconst s = new Student()\n```\n\n和构造函数一样，类也需要通过 `new` 关键字来创建实例对象，当然实际上，它本来就是构造函数的语法糖。\n\n在类中，如果我们需要在创建对象时初始化属性，就需要使用一个特殊的方法：`constructor`：\n\n```js\nclass Student {\n    constructor(name, age) {\n        this.name = name\n        this.age = age\n    }\n}\n```\n\n这里的`constructor`和我们之前介绍的构造函数定义，其实本质就是一个东西，这里定义的参数就是构造函数的参数，我们同样可以在里面使用`this`表示新创建的对象本身，参数列表就是构造函数的参数。需要注意的是，`constructor`只能存在一个，默认情况下，即使我们不写，也会存在一个无参的`constructor`，如果写了就会自动覆盖掉无参的那一个。\n\n因此，使用方式和构造函数完全一致：\n\n```js\nconst stu = new Student(\"小明\", 18)\nconst stu = Student(\"小明\", 18)  \u002F\u002Fclass自带检测机制，无new调用会直接报错\n```\n\n我们也可以访问它的属性：\n\n```js\nconsole.log(s.name) \u002F\u002F 小明\nconsole.log(s.age)  \u002F\u002F 18\n```\n\n除此之外，我们也可以直接在类中声明属性：\n\n```js\nclass Student {\n    gender   \u002F\u002F直接写就行了，然后换行\n  \tname\n    age\n}\n```\n\n但是注意，这种写法得到的属性初始值都是`undefined`，如果我们需要为属性设置初始值，可以直接使用赋值运算符：\n\n```js\nclass Student {\n    gender   \u002F\u002F直接写就行了，然后换行\n    name = '名字'\n    age = 18\n}\n```\n\n除了属性之外，类中定义的方法本质上就是对象具有的方法，在类中定义方法时，不需要使用 `function` 关键字，直接写方法名即可：\n\n```js\nclass Student {\n    constructor(name, age) {\n        this.name = name\n        this.age = age\n    }\n    sayHi() {\n        console.log(`你好，我是${this.name}`)\n    }\n}\n```\n\n调用方式也是和之前完全一样，没有区别：\n\n```js\nconst s = new Student(\"小明\", 18)\ns.sayHi()\n```\n\n需要注意的是，中定义的方法，本质上仍然是挂载在 `prototype` 上的，不会为每一个对象单独创建方法，这和我们之前说的优化方案（手动写 `Student.prototype.sayHi = ...`）是一样的，`class`自动帮我们实现好了。\n\n这样，我们就成功创建了一个类型，虽然本质上依然就是之前的构造函数，但是它简化了很多语法，我们可以这个类型进行类型计算：\n\n```js\ntypeof Student \u002F\u002F \"function\"\n```\n\n可以看到，这里得到的依然是一个函数类型的值，说明它本质就是构造函数。`class` 并不是一种全新的类型，它只是让我们用更接近传统面向对象语言的方式来书写代码。\n\n同样的，它对于继承的实现也进行很大程度的简化，我们可以使用 `extends` 关键字，让一个类继承另一个类：\n\n```js\nclass ArtStudent extends Student {\n}\n```\n\n这行代码的含义是：**ArtStudent 是 Student 的子类**，当子类需要定义自己的构造器时，必须先调用 `super()`：\n\n```js\nclass ArtStudent extends Student {\n    constructor(name, age, level) {\n        super(name, age)   \u002F\u002F调用父类的 constructor\n        this.level = level\n    }\n}\n```\n\n这里需要注意的是，`super()` 用来调用父类的构造方法，在子类中，必须先调用 `super()`，才能使用 `this`。这里的`super(name, age)` 本质上等价于之前的 `Student.call(this, name, age)`，也就是对构成继承关系的父对象进行初始化。接着我们就可以直接使用了：\n\n```js\nconst a = new ArtStudent(\"小明\", 18, \"高级\")\n\nconsole.log(a.name)   \u002F\u002F 小明\nconsole.log(a.age)    \u002F\u002F 18\nconsole.log(a.level)  \u002F\u002F 高级\n```\n\n可以看到，我们什么都没有做直接就可以使用父类的属性，这是因为`extends` 已经自动帮我们建立好了原型链关系。\n\n同样的，由于原型链继承关系，父类中定义的方法，子类可以直接使用：\n\n```js\nclass Student {\n    constructor(name, age) {\n        this.name = name\n        this.age = age\n    }\n    sayHi() {\n        console.log(\"你好，我是学生\")\n    }\n}\n\nclass ArtStudent extends Student {\n    constructor(name, age, level) {\n        super(name, age)\n        this.level = level\n    }\n}\n\nconst a = new ArtStudent(\"小明\", 18, \"高级\")\na.sayHi()\n```\n\n到这里，我们已经完成了 **类的声明、构造方法、方法定义以及继承的基本使用**。在下一节中，我们将基于 `class`语法，进一步介绍 **私有属性** 的实现方式。\n\n### 私有属性\n\n在前面的内容中，我们已经学习了对象的属性和方法，你会发现一个问题：**对象里的属性，默认都是“公开的”**。也就是说，只要你能拿到这个对象，就可以随意访问、修改它的属性：\n\n```js\nconst person = {\n    name: \"小明\",\n    age: 18\n}\n\nconsole.log(person.age)   \u002F\u002F 得到18\nperson.age = 100\nconsole.log(person.age)   \u002F\u002F 得到100\n```\n\n从语法角度看，这完全没问题，但从**设计角度**来看，却存在隐患，我们先来看一个生活中的例子：\n\n* 你的手机里有「电量」\n* 你可以**查看电量**\n* 但你不能直接改成 `100%`，对吧？\n\n如果手机允许你随便写`battery = 100`，那系统早就乱套了，电池的实际容量并不会因为我们修改了变量的值就真的发生改变，我们应该坚持唯物主义。为了防止这种情况，我们需要对对象的属性进行限制，使得：\n\n* 有些数据 **不希望被外部随意访问**\n* 有些数据 **只能通过指定方式修改**\n\n在 ES6 之前，JavaScript 并没有真正意义上的私有属性，开发者通常会通过一些“约定”来模拟私有属性，例如使用下划线开头：\n\n```js\nconst phone = {\n    _battery: 100\n}\n```\n\n这种方式**只是约定俗成**，并不能真正限制访问：\n\n```js\nphone._battery = 0\n```\n\n从语法层面来说，这个属性依然是完全开放的。在 **ES2022** 中，JavaScript 为类引入了**真正的私有属性**。私有属性通过 `#` 号来声明，我们可以在`class`中直接添加：\n\n```js\nclass Phone {\n    #battery = 100\n}\n```\n\n这里的 `#battery` 就是一个私有属性，它具有以下特点：\n\n- 只能在类的内部访问\n- 在类的外部无法读取、无法修改\n- 不会出现在对象的属性列表\n\n我们来尝试在外部访问这个私有属性：\n\n```js\nconst p = new Phone()\nconsole.log(p.#battery)\nconsole.log(p[\"#battery\"])  \u002F\u002F括号访问也不行\n```\n\n代码会直接报错，程序无法运行，这种错误是在**语法分析阶段**就会被拦截，而不是运行时报错。这说明：**私有属性并不是通过调整属性配置实现的，而是在语言层面提供的访问控制机制**。\n\n既然私有属性无法直接访问，那么我们通常会提供**公共方法**来进行间接操作：\n\n```js\nclass Phone {\n    #battery = 100\n    getBattery() {  \u002F\u002F比如当电量超出100时，只返回100\n        return this.#battery > 100 ? 100 : this.#battery\n    }\n    charge(value) {\n        if (value > 0) {\n            if(this.#battery + value > 105) {\n                this.#battery = 105\n            } else {\n                this.#battery += value\n            }\n        }\n    }\n}\n```\n\n这样一来，外部只能读取电量，并且我们可以自由控制电量的展示，而不是直接返回原始值。如果我们希望在特定规则下修改私有属性，也可以提供一个修改方法，此时，外部只能通过 `charge` 方法来改变电量：\n\n```js\nconst p = new Phone()\np.charge(10)  \u002F\u002F冲到实际电量105\nconsole.log(p.getBattery()) \u002F\u002F 100\n```\n\n注意，私有属性是无法通过 `Object.keys`、`for...in` 获取的，也不会被实例枚举。那么，既然我们前面说，`class`本质上就是语法糖，它其实就是简化了我们的构造函数定义，这里的私有属性，本质上是怎么实现的呢？我们可以直接打印这个对象：\n\n![image-20260209115257723](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F09\u002FUZdbEsfWicVryAM.png)\n\n可以看到，我们在类中定义的方法位于构造函数原型上，而这个私有属性，实际上是存在于对象上，并且名字就是以`#`开头的。\n\n```js\nconst t = {\n    \u002F\u002F无法直接 #battery: 10 因为#是特殊字符\n    '#battery': 10\n}\nconsole.log(t.#battery)   \u002F\u002F同样报错，语法层面不允许\n```\n\n但是需要注意的是，像这样通过字符串名称定义的属性，它并不是私有的：\n\n```js\nconsole.log(t['#battery'])  \u002F\u002F正确得到\n\nconst p = new Phone()\nconsole.log(p['#battery'])   \u002F\u002F得不到\n```\n\n因为字符串形式的属性名称和直接编写的属性名称本质上并不是同一种类型，虽然名字一样，前者仅仅只是一个字符形式的名称，而后者更像是创建的一个Symbol，我们无法通过其他任何方法去访问一个我们不知道的Symbol的属性，所以它可以实现真正意义上的私有。\n\n在实际开发中，**并不是所有属性都需要私有化**，但对于核心状态数据，使用私有属性可以显著提高代码的安全性和可维护性。\n\n### 构造函数安全检查\n\n经过前面的学习我们知道，使用构造函数时，必须使用`new`关键字进行对象创建，否则会导致构造函数内的`this`出现问题，这其实是因为`new`关键字本身就是语法糖，我们调用函数：\n\n```js\nfunction Person(name, age) {\n    this.name = name;\n    this.age = age;\n}\n\nconst  p = new Person(\"小明\", 18)\n```\n\n实际上在使用`new`时，等价于执行了下面的操作：\n\n```js\n \u002F\u002F 1. 创建空对象并继承构造函数的原型\n  const obj = Object.create(Person.prototype);\n  \u002F\u002F 2. 绑定this并执行构造函数\n  const result = Person.call(obj, ...args);\n  \u002F\u002F 3. 返回创建的对象\n  return object;\n```\n\n> 当然，这里还并不准确，如果构造函数有返回值且返回值是一个对象的话，最后会优先返回构造函数的返回值。\n\n而如果我们不加`new`则相当于函数被直接调用：\n\n```js\nfunction Person(name, age) {\n    this.name = name;   \u002F\u002F直接对全局作用域对象上的name赋值\n    this.age = age;   \u002F\u002F直接对全局作用域对象上的age赋值\n}\n\nconst  p = Person(\"小明\", 18)\nconsole.log(window)  \u002F\u002F这种全局作用域上的对象，一般也可以称作globalThis\n```\n\n![image-20260209133236157](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F09\u002FhTJHIXdbeuatqQl.png)\n\n可以看到，如果不添加`new`相当于我们正常把它当做函数进行调用，而普通函数的`this`指向的是当前的作用域对象。\n\n在上一章，我们为大家介绍了多种不同的包装对象，我们发现，包装对象并没有出现这种情况，比如`String`构造函数，虽然我们也可以不使用`new`进行调用，但是它并没有得到一个错误结果或者对作用域对象赋值：\n\n```js\nconst p = String(\"无房贷无车贷无后代\")\nconsole.log(p.length)\nconsole.log(window.length)  \u002F\u002F并没有覆盖\n```\n\n实际上，这是因为在String构造函数的内部进行了引用判断。这里我们需要介绍`new.target` ，它是 ECMAScript 2015 (ES6) 引入的一个元属性，用于检测函数或构造方法是否通过 `new` 关键字被调用。它允许开发者在函数内部判断调用方式，从而执行不同的逻辑：\n\n```js\nfunction Person(name) {\n    \u002F\u002F 判断是否存在目标\n    if (!new.target) {\n        console.log(\"没有使用new调用\")\n    }\n    this.name = name;\n}\n```\n\n* 通过构造函数使用 `new` 关键字调用时，`new.target` 返回该函数的引用（即构造函数本身）\n* 如果是在类的构造器中，`new.target` 返回当前正在实例化的类（可能是子类，本质也是构造函数）\n* 当函数直接调用（未使用 `new`）时，`new.target` 返回 `undefined`\n\n我们可以直接判断这个属性是否存在真值，如果存在一定是使用了`new`来进行调用。利用这种特性，我们可以将普通调用形式也进行处理，直接返回一个正确的对象：\n\n```js\nfunction Person(name) {\n    \u002F\u002F 确保必须通过 new 调用\n    if (!new.target) {\n        return {\n            name: name\n        }\n    }\n    this.name = name;\n}\n\nconst p = Person(\"小明\")  \u002F\u002F即使不使用new也可以正确得到了\nconsole.log(p)\n```\n\n所以，这就不难理解为什么之前遇到的`Number`、`String`等构造函数正常用也没毛病了。\n\n### Proxy（选学）\n\n`Proxy` 是 ES6 引入的一个新特性，它本身也是一个对象，但是他会包裹一个对象进行代理，它的作用可以用一句话概括：**Proxy 可以拦截并自定义对象的各种操作行为**。创建一个 Proxy 对象非常简单，只需要两个参数：\n\n```js\nconst proxy = new Proxy(target, handler)\n```\n\n* `target`：被代理的原始对象\n* `handler`：拦截规则对象（里面定义各种拦截逻辑）\n\n我们先来看一个最最简单的例子：\n\n```js\nconst obj = {\n    name: \"小明\",\n    age: 18\n}\n\nconst proxy = new Proxy(obj, {})\n```\n\n此时这个 `proxy` 看起来和原对象几乎一模一样：\n\n```js\nconsole.log(proxy.name) \u002F\u002F 小明\nproxy.age = 20\nconsole.log(obj.age)    \u002F\u002F 20\n```\n\n如果我们没有在 `handler` 中定义任何拦截规则，所有操作都会**原封不动地透传给原对象**，无论是获取属性还是调用对象中的方法。\n\nProxy 中最常用的一个拦截点就是 `get`，它会在**读取属性时触发**：\n\n```js\nconst proxy = new Proxy(obj, {\n    get(target, key) {\n        console.log(\"正在读取属性:\", key)\n        return target[key]\n    }\n})\n```\n\n![image-20260209143218021](https:\u002F\u002Fs2.loli.net\u002F2026\u002F02\u002F09\u002F5z8LHMrCbVu9dxD.png)\n\n有了`get`拦截点，我们就可以做很多事情，比如我们可以给不存在的属性一个默认值：\n\n```js\nconst proxy = new Proxy(obj, {\n    get(target, key) {\n        if (key in target) {\n            return target[key]\n        }\n        return \"暂无该属性\"  \u002F\u002F这样，即使对象没有这个属性，也可以手动返回一个自定义的\n    }\n})\n```\n\n这样一来，所有不存在的属性访问都会被统一处理，而不用在每个地方写判断。实际上在Vue3中，很多高级功能、数据绑定等，都是利用Proxy来实现的。\n\n除了读取属性，我们更常见的需求是：**拦截属性的修改行为**，这就要用到 `set`。\n\n```js\nconst proxy = new Proxy(obj, {\n    set(target, key, value) {\n        console.log(`正在修改 ${key}，新值是 ${value}`)\n        target[key] = value\n        return true\n    }\n})\n```\n\n这里有一个非常重要的点，set 必须返回 true，否则在严格模式下会报错。\n\n比较常见的场景就是可以利用 `set` 来限制属性的合法性：\n\n```js\nconst proxy = new Proxy(user, {\n    set(target, key, value) {\n        if (key === \"age\") {\n            if (typeof value !== \"number\" || value \u003C 0) {\n                console.log(\"年龄必须是非负数字\")\n              \treturn false\n            }\n        }\n        target[key] = value\n        return true\n    }\n})\n```\n\n这样，**所有对 `age` 的非法修改都会被集中拦截**，而不是分散在各个业务逻辑中。\n\n当使用 `delete` 删除属性时，可以使用 `deleteProperty` 进行拦截：\n\n```js\nconst proxy = new Proxy(obj, {\n    deleteProperty(target, key) {\n        console.log(`属性 ${key} 即将被删除`)\n        delete target[key]\n        return true\n    }\n})\n```\n\n当我们使用 `in` 判断属性是否存在时：\n\n```js\nconst proxy = new Proxy(obj, {\n    has(target, key) {\n        if (key === \"age\") {\n            return false\n        }\n        return key in target\n    }\n})\n```\n\nProxy就像囚笼，而对象就是笼中鸟，它没有自由，它的人生只能被Proxy决定，一切的行动都要经过Proxy的严格审核。不过，虽然对象是笼中鸟，但是它没有放弃对自由的幻想，依然坚持自己的原则，所以，Proxy 不会修改原对象的行为规则，它只是包了一层“访问入口”。\n\n### Reflect（选学）\n\n在上一节中，我们学习了 **Proxy**，知道它可以拦截对象的各种操作，比如 `get`、`set`、`delete` 等。但如果你细心一点，可能已经注意到一个问题：\n\n> 在 Proxy 的拦截函数里，我们经常会手动去操作原对象\n> 比如：`target[key] = value`、`delete target[key]`\n\n这样写当然没问题，但其实 **并不规范，也不够安全**，为了解决这个问题，ES6 引入了一个新的内置对象：**Reflect**，它提供了一组“标准化的对象操作方法”，用来替代直接操作对象的写法。\n\n我们先来看一个 Proxy 中常见的写法：\n\n```js\nconst proxy = new Proxy(obj, {\n    get(target, key) {\n        return target[key]\n    }\n})\n```\n\nReflect 的设计，几乎就是为了 **Proxy** 准备的，在 Proxy 的拦截器中，**官方推荐的默认行为实现方式，就是调用 Reflect**，而不是去使用正常的对象调用方式，比如一些场景下，Reflect 会**明确告诉你操作是否成功**，不会默默失败。\n\n读取对象属性我们可以使用`Reflect.get()`来完成：\n\n```js\nconst obj = {\n    name: \"小明\"\n}\n\nconsole.log(Reflect.get(obj, \"name\")) \u002F\u002F 小明\n```\n\n等价于：\n\n```js\nobj.name\n```\n\n前面我们写 Proxy 时，经常这样：\n\n```js\nconst proxy = new Proxy(obj, {\n    get(target, key) {\n        return target[key]\n    }\n})\n```\n\n而官方推荐写法是：\n\n```js\nconst proxy = new Proxy(obj, {\n    get(target, key) {\n        return Reflect.get(target, key)\n    }\n})\n```\n\n同样的，设置对象属性我们可以使用`Reflect.set()`来完成：\n\n```js\nconst obj = {}\nconst success = Reflect.set(obj, \"age\", 18)  \u002F\u002F 如果属性的配置为不可写，返回false\nconsole.log(success) \u002F\u002F true\nconsole.log(obj.age) \u002F\u002F 18\n```\n\n判断属性是否存在我们可以使用`Reflect.has()`来完成：\n\n```js\nconst obj = { a: 1 }\nReflect.has(obj, \"a\") \u002F\u002F true\nReflect.has(obj, \"b\") \u002F\u002F false\n```\n\n等价于：\n\n```js\n\"a\" in obj\n```\n\n删除属性我们可以使用`Reflect.deleteProperty()`来完成：\n\n```js\nconst obj = { a: 1 }\nReflect.deleteProperty(obj, \"a\") \u002F\u002F true\nconsole.log(obj) \u002F\u002F {}\n```\n\n等价于：\n\n```js\ndelete obj.a\n```\n\n获取对象自身所有属性键我们可以使用`Reflect.ownKeys()`来完成，它比 `Object.keys` 更完整，会包含普通字符串属性、Symbol 属性、不可枚举属性：\n\n```js\nconst obj = {\n    a: 1,\n    [Symbol(\"x\")]: 2\n}\n\nconsole.log(Reflect.ownKeys(obj))\n```\n\n有关Reflect其他的方法，可以参考：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FReflect\n\n### 垃圾回收机制（选学）\n\n在前面的学习中，我们已经接触了大量的**对象、函数、Proxy、Reflect** 相关的内容，你可能已经隐约意识到一个问题：这些对象创建出来之后，**什么时候会被销毁？**内存会不会越用越多？会不会泄漏？\n\n在 JavaScript 中，这些问题由一个非常重要的机制来负责 —— **垃圾回收机制（Garbage Collection，简称 GC）**\n\n在一些底层语言（如 C \u002F C++）中，程序员需要**手动管理内存**：\n\n```js\nmalloc(...)\nfree(...)\n```\n\n一旦忘记 `free`，就会造成内存泄漏，一旦多次 `free`，程序直接崩溃。而 JavaScript 的设计目标之一就是，让开发者专注于业务，而不是内存管理，所以 JS 采用了 **自动垃圾回收机制**，你只管创建对象，JS 引擎负责判断哪些对象“没用了”并自动回收它们占用的内存。\n\n那么，什么东西会被认为是“垃圾”呢？在 JavaScript 中，无法再被访问到的对象，就是垃圾。\n\n我们来看一个最简单的例子：\n\n```js\nlet obj = {\n    name: \"小明\"\n}\n\nobj = null\n```\n\n当我们执行 `obj = null` 后，原来那个 `{ name: \"小明\" }` 对象已经**没有任何变量再指向它**，并且，程序中再也访问不到它，那么这个对象就变成了**垃圾**，可以被回收。\n\n我们再来看下一个例子：\n\n```js\nfunction test() {\n    const tmp = {}  \u002F\u002F在函数中创建了一个新的的对象\n    console.log(tmp)\n}\n\ntest()\nconsole.log(\"Hello World\")\n```\n\n可以看到，当函数执行完成后，实际上函数内创建的对象已经无法再外部使用了，此时同样会认为这个对象已经没有作用了，那么就会回收这个对象占据的内存空间。\n\n当然，有些时候即使变量被设定为`null`，也有可能出现无法回收内存的情况：\n\n```js\nlet a = { name: \"小明\" }\nlet b = a\n\na = null\n```\n\n此时，虽然`a`已经为`null`了，但是我们仍然可以通过`b`访问到对象，那么这里就不算是无法使用，不会被视为垃圾，除非这里的`b`也变成`null`。\n\n同样的，函数执行完也并非说一定会回收对象：\n\n```js\nfunction outer() {\n    const data = { count: 0 }\n\n    return function inner() {\n        console.log(data.count)\n    }\n}\n\nlet fn = outer()\n```\n\n可以看到，这里虽然函数已经执行结束，但是由于返回的结果是一个函数，并且在这个函数中用到了外层函数中定义的对象，此时这个对象就被带到了它原本作用域之外的区域，这种情况我们也称之为**闭包**（闭包是指**函数能够访问并操作其词法作用域之外的变量**）此时由于对象仍然可被访问，所以不会进行垃圾回收，当然，如果要释放我们只需要把存储闭包的变量给置空即可。\n\n>  不过，虽然垃圾回收机制会自动进行，但是实际上到底什么时候被回收的，我们无从得知。咋ES2021之后，新增了FinalizationRegistry类，它可以实现在对象被垃圾回收之后，注册一个回调通知：\n>\n>  ```js\n>  const registry = new FinalizationRegistry((heldValue) => {\n>   console.log(\"对象被回收了：\", heldValue)\n>  })\n>  \n>  let obj = { name: \"小明\" }\n>  registry.register(obj, \"这是小明对象\")\n>  obj = null\n>  ```\n>\n>  在浏览器开发者工具的内存板块，点击清理即可立即进行一次垃圾回收。\n\n至此，有关面面向对象的高级内容部分就到此结束了。\n\n## 常用对象和函数\n\n前面的章节我们为大家介绍了多种不同的包装对象，在这些包装对象中，有很多的实用方法，这一节我们将继续为大家介绍更多不同的常用对象和函数。\n\n### 时间日期对象\n\n在 JavaScript 中，时间和日期并不是基础类型，而是通过一个内置对象来处理的，这个对象就是 **`Date`**。它主要用于获取当前时间、表示某一个具体时间点、进行时间计算（加减、比较）、格式化时间显示等。在实际开发中，**Date 几乎是必用对象之一** 。\n\n和前面讲过的其他内置对象一样，`Date` 也是一个构造函数，需要通过 `new` 来创建实例对象。如果不传任何参数，`Date` 默认表示**当前系统时间**：\n\n```js\nconst now = new Date()\nconsole.log(now)\n```\n\n日期对象打印出来会自动转换为字符串形式，它的结果类似于：\n\n```sh\nTue Feb 10 2026 14:19:32 GMT+0800 (中国标准时间)\n```\n\n这个对象中，已经包含了完整的年月日时分秒，甚至毫秒以及时区信息。注意，和之前一样，直接调用`Date()` 和 `new Date()` 是**完全不同的**，前者得到的不是对象，而是字符串形式的日期。\n\n除了当前时间，我们也可以创建一个**指定时间点**：\n\n```js\nconst now = new Date('2027-02-08')  \u002F\u002F传入标准时间格式字符串\nconsole.log(now)\n```\n\n```js\nconst now = new Date('2027-02-08 18:09:50')   \u002F\u002F也可以带上具体时间\nconsole.log(now)\n```\n\n这种写法直观、好记，新手阶段**推荐优先使用**，我们也可以使用多个参数来描述年月日：\n\n```js\nconst d = new Date(2025, 0, 1)\n```\n\n这里需要注意的是，月份是从 0 开始的，也是很多人容易踩坑的地方，所以不推荐这种写法。\n\n我们可以使用使用时间戳来表示一个时间，时间戳表示的是从 1970-01-01 00:00:00（UTC）开始，到当前时间经过的毫秒数：\n\n```js\nconst d = new Date(0)   \u002F\u002F直接传入一个数字表示时间戳\nconsole.log(d)\n```\n\n得到的就是：\n\n```js\n1970-01-01 08:00:00  \u002F\u002F不同时区得到的时间信息不同\n```\n\n因为中国位于东八区，有 8 小时的时区偏移，这里先介绍一下什么是时区：\n\n> 时区（Time Zone）是地球上划分的区域，用于标准化时间。由于地球自转，全球不同地区的日出日落时间不同，为了方便统一时间的管理和交流，地球被划分为多个时区。\n>\n> ![image-20250708173054858](https:\u002F\u002Fs2.loli.net\u002F2025\u002F07\u002F08\u002FvCtf6e7iMR3caHd.png)\n>\n> 原则上，全球共分为24个时区，每隔经度15°划分一个时区，时区从英国的本初子午线开始，向东方每增加一个时区则+1，+1则称为东一区，+8就是东八区。向西方每增加一个时区则-1，-1就是西一区。中国相当于是横跨了5个时区，从东五区（西藏）到东九区（吉林），但实际上中国全国统一使用一个标准时间，就是位于东八区的北京时间，当本初子午线的时间为凌晨0点时，中国时间则需要按照规则+8偏移，也就是早上的8点钟，相当于中国已经看到了日出，而英国还在夜晚，这与现实是一致的，其他地区也是一样的计算规则。\n>\n> 其中位于本初子午线的时间被称为格林威治标准时间GMT，就像周杰伦歌词里写的那样，它是时间的标准起点。\n>\n> ![image-20250708174926873](https:\u002F\u002Fs2.loli.net\u002F2025\u002F07\u002F08\u002F7KHinqC5ON8X3Mo.png)\n>\n> UTC（Coordinated Universal Time，协调世界时）是一种世界标准时间，用于同步全球的时间系统。也是按照标准时区进行计算，其中格林威治时间就是UTC+0，而位于东八区的北京时间，则是UTC+8，称为中国标准时间（CTT），位于西六区的北美中部地区则是UTC-6，是中部标准时间（CST）。\n>\n> 当然，时区也有一些别名，比如中国标准时区CST也可以使用别名`Asia\u002FShangHai`，一般别名格式为`州名称\u002F城市名称`，比如美国纽约就是`America\u002FNew_York`。\n\n时间戳在前端开发中非常重要，它的优点是：不受时区影响、方便存储、便于比较和计算。想要获取当前时间或是某一时间的时间戳，我们可以使用Date的一些方法：\n\n```js\nconst ts = Date.now()  \u002F\u002F调用静态方法\nconsole.log(ts)\n\nconst ts = new Date().getTime()  \u002F\u002F或是用通过对象获取\n```\n\n当我们需要比较两个时间的前后关系时，就可以考虑使用时间戳：\n\n```js\nconst data1 = new Date('2027-02-08 18:09:50')\nconst data2 = new Date('2026-02-08 18:09:50')\nconsole.log(data1.getTime() > data2.getTime())   \u002F\u002F获取时间戳数字，大的一定是越靠后的时间\n```\n\n当然，为了简便，我们也可以直接让两个日期对象进行比较：\n\n```js\nconsole.log(data1 > data2)\n```\n\nJS会自动使用时间对象的时间戳进行比较。\n\nDate 对象提供了一系列 `get` 方法，用于获取时间的不同组成部分。假设我们有一个时间对象：\n\n```js\nconst d = new Date()\nd.getFullYear()  \u002F\u002F 年份，例如 2026\nd.getMonth()    \u002F\u002F 月份（0-11）\nd.getDate()     \u002F\u002F 日期（1-31）\nd.getHours()        \u002F\u002F 小时 0-23\nd.getMinutes()     \u002F\u002F 分钟数 0-59\nd.getSeconds()     \u002F\u002F 秒数 0-59\nd.getMilliseconds() \u002F\u002F 毫秒数 0-999\nd.getDay()    \u002F\u002F星期数0代表星期天，6代表星期六\n```\n\n我们还可以针对星期数，简单做一个映射：\n\n```js\nconst weekMap = [\"日\", \"一\", \"二\", \"三\", \"四\", \"五\", \"六\"]\nconsole.log(\"星期\" + weekMap[d.getDay()])\n```\n\nDate 对象不仅可以读，还可以改：\n\n```js\nconst d = new Date()\n\nd.setFullYear(2030)\nd.setMonth(5)   \u002F\u002F 6 月\nd.setDate(10)\n\nconsole.log(d)\n```\n\n比较好用的是，当日期超出时，会自动进行退位和进位：\n\n```js\nconst d = new Date(\"2025-01-31\")\nd.setDate(d.getDate() + 1)\n\nconsole.log(d) \u002F\u002F 2025-02-01\n```\n\n这在做时间计算时非常方便。\n\n时间还有很多不同的字符串转换操作：\n\n```js\nconsole.log(data.toDateString());  \u002F\u002F只保留日期部分\nconsole.log(data.toTimeString());  \u002F\u002F只保留时间部分\nconsole.log(data.toLocaleDateString());  \u002F\u002F以本地化形式，只保留日期部分\nconsole.log(data.toLocaleTimeString());  \u002F\u002F以本地化形式，只保留时间部分\n```\n\n这些操作可以实现时间字符串的格式快速转换，比如我们只需要时间或是日期部分。\n\n### 数学对象\n\n在 JavaScript 中，虽然我们已经学习过很多运算符了，但是数学相关的高级计算并不是靠我们自己手写公式完成的，而是由一个内置对象统一提供，这个对象就是 **`Math`**。\n\n和前面讲过的 `Date` 不同，**`Math` 不是构造函数**，就是一个携带多种方法的普通对象，你可以把 `Math` 理解成一个**装满数学工具函数的工具箱**。\n\n基本上，数学中场常见的一些常量都是有的：\n\n```js\nMath.E   \u002F\u002F自然对数的底数（欧拉数，约等于 2.718）\nMath.PI   \u002F\u002F圆周率 π（约等于 3.14159）\nMath.LN2   \u002F\u002F2 的自然对数（约等于 0.693）\nMath.LN10   \u002F\u002F10 的自然对数（约等于 2.303）\nMath.LOG2E   \u002F\u002F以 2 为底 E 的对数（约等于 1.443）\nMath.LOG10E   \u002F\u002F以 10 为底 E 的对数（约等于 0.434）\nMath.SQRT2   \u002F\u002F2 的平方根（约等于 1.414）\nMath.SQRT1_2   \u002F\u002F1\u002F2 的平方根（约等于 0.707）\n```\n\n包括各种数学计算：\n\n```js\nMath.abs(x)   \u002F\u002F返回 x 的绝对值\nMath.ceil(x)   \u002F\u002F向上取整（返回大于等于 x 的最小整数）\nMath.floor(x)   \u002F\u002F向下取整（返回小于等于 x 的最大整数）\nMath.round(x)   \u002F\u002F四舍五入取整\nMath.trunc(x)   \u002F\u002F去除小数部分，返回整数（ES6 新增）\nMath.sign(x)   \u002F\u002F返回 x 的符号（正数返回 1，负数返回 -1，0 返回 0）\nMath.pow(x, y)   \u002F\u002F返回 x 的 y 次幂（等价于 x ** y）\nMath.sqrt(x)   \u002F\u002F返回 x 的平方根\nMath.cbrt(x)   \u002F\u002F返回 x 的立方根（ES6 新增）\nMath.hypot(...values)   \u002F\u002F返回所有参数的平方和的平方根（ES6 新增）\n\u002F* 对数运算 *\u002F\nMath.exp(x)   \u002F\u002F返回 E 的 x 次幂（E^x）\nMath.log(x)   \u002F\u002F返回 x 的自然对数（ln(x)）\nMath.log10(x)   \u002F\u002F返回以 10 为底的 x 的对数（ES6 新增）\nMath.log2(x)   \u002F\u002F返回以 2 为底的 x 的对数（ES6 新增）\nMath.log1p(x)   \u002F\u002F返回 1 + x 的自然对数（ln(1+x)，适用于 x 接近 0 时的高精度计算）\n\u002F* 三角函数 *\u002F\nMath.sin(x)   \u002F\u002F正弦值\nMath.cos(x)   \u002F\u002F余弦值\nMath.tan(x)   \u002F\u002F正切值\nMath.asin(x)   \u002F\u002F反正弦值（返回值范围：-π\u002F2 到 π\u002F2）\nMath.acos(x)   \u002F\u002F反余弦值（返回值范围：0 到 π）\nMath.atan(x)   \u002F\u002F反正切值（返回值范围：-π\u002F2 到 π\u002F2）\nMath.atan2(y, x)   \u002F\u002F返回点 (x, y) 与 x 轴的夹角（返回值范围：-π 到 π）\n\u002F* 双曲函数 *\u002F\nMath.sinh(x)   \u002F\u002F双曲正弦\nMath.cosh(x)   \u002F\u002F双曲余弦\nMath.tanh(x)   \u002F\u002F双曲正切\nMath.asinh(x)   \u002F\u002F反双曲正弦\nMath.acosh(x)   \u002F\u002F反双曲余弦\nMath.atanh(x)   \u002F\u002F反双曲正切\n```\n\nES6之后，为了进一步强化数学工具，新增了如下方法：\n\n```js\nMath.clz32(x)   \u002F\u002F返回 32 位整数 x 的前导零位数\nMath.imul(x, y)   \u002F\u002F返回两个 32 位整数相乘的结果（避免溢出）\nMath.fround(x)   \u002F\u002F返回 x 的单精度浮点数表示\nMath.expm1(x)   \u002F\u002F返回 Math.exp(x) - 1（适用于 x 接近 0 时的高精度计算）\n```\n\n各位小伙伴根据自己的需求，合理选择即可。\n\n### 正则表达式\n\n在前面的学习中，我们已经掌握了字符串的各种操作方法，但你可能已经发现一个问题，字符串提供的方法很多，但遇到“规则匹配”时就开始力不从心了。比如下面这些需求：\n\n- 判断手机号是否合法\n- 判断邮箱格式是否正确\n- 从一大段字符串中找出所有数字\n- 替换掉所有不符合规则的字符\n\n如果只靠 `indexOf`、`includes`、`slice` 这些方法，代码会变得非常复杂。这时，我们就需要一个**专门用于“规则匹配”的工具**，**正则表达式（Regular Expression，简称 RegExp）**。\n\n正则表达式的创建方式非常简单，只需要使用`\u002F\u002F`进行囊括即可：\n\n```js\nconst reg = \u002Fabc\u002F\n```\n\n这种写法最直观、最常用，它表示一个匹配规则，判断字符串中是否包含 `\"abc\"`。除此之外，我们也可以使用构造函数：\n\n```js\nconst reg = new RegExp(\"abc\")  \u002F\u002F构造函数中传入的是字符串，某些特殊字符需要额外转义\n```\n\n这种写法适合**规则需要动态拼接**的场景，但新手阶段不太常用，我们还是更推荐上面的简单写法。\n\n当然，正则表达式本身只是规则，**必须配合方法使用才有意义**，我们可以使用`test`方法来对字符串进行正则表达式检测：\n\n```js\nconst reg = \u002Fabc\u002F\nconsole.log(reg.test(\"hello abc world\")) \u002F\u002F 包含abc，结果为true\nconsole.log(reg.test(\"hello world\"))     \u002F\u002F 不包含abc，结果为false\n```\n\n我们也可以反过来，使用字符串提供的`match`方法：\n\n```js\nconst str = \"hello abc world\"\nconsole.log(str.match(\u002Fabc\u002F))\n```\n\n如果匹配成功，返回一个数组，否则返回`null`。同样的，包括字符串的`replace`、`search`方法，都支持正则表达式的匹配方式：\n\n```js\nconst str = \"hello abc world\"\nconst result = str.replace(\u002Fabc\u002F, \"JS\")\nconsole.log(result)\n```\n\n了解完正则表达式的用法之后，我们来看看如何编写正则表达式，最简单的就是普通字符匹配：\n\n```js\n\u002Fabc\u002F   \u002F\u002F直接写上要匹配的单个字符或子串就行了\n```\n\n只要字符串中出现 `\"abc\"` 就能匹配，此外，我们也可以使用`.`表示任意字符（换行符除外）：\n\n```js\n\"a1c\".match(\u002Fa.c\u002F)  \u002F\u002F 匹配\n\"abc\".match(\u002Fa.c\u002F)  \u002F\u002F 匹配\n\"a_c\".match(\u002Fa.c\u002F)  \u002F\u002F 匹配\n```\n\n当我们想匹配“多个可能字符中的一个”，就需要用到字符类（字符集合）使用方括号进行表示：\n\n```js\n\u002F[abc]\u002F\n```\n\n只要出现方括号中的任意一个字符就匹配：\n\n```js\n\"axc\".match(\u002F[abc]\u002F)  \u002F\u002F 匹配\n\"a_x\".match(\u002F[abc]\u002F)  \u002F\u002F 匹配\n\"666\".match(\u002F[abc]\u002F)  \u002F\u002F 不匹配\n```\n\n除了正着匹配外，我们也可以反着匹配，使用`^`代表否定：\n\n```js\n\u002F[^0-9]\u002F\n```\n\n表示除了0-9这几个字符之外的其他都算匹配成功：\n\n```js\n\"axc\".match(\u002F[^0-9]\u002F)  \u002F\u002F 匹配\n\"a_x\".match(\u002F[^0-9]\u002F)  \u002F\u002F 匹配\n\"666\".match(\u002F[^0-9]\u002F)  \u002F\u002F 不匹配\n```\n\n除此之外，正则中有一些非常常用的“简写规则”：\n\n| 规则 | 含义                       |\n| ---- | -------------------------- |\n| `\\d` | 任意数字（等价于 `[0-9]`） |\n| `\\D` | 非数字                     |\n| `\\w` | 字母、数字、下划线         |\n| `\\W` | 非字母、数字、下划线       |\n| `\\s` | 空白字符（空格、换行等）   |\n| `\\S` | 非空白字符                 |\n\n有关更多正则表达式的内容，请前往：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FRegular_expressions\n\n### 序列化工具\n\n在 JavaScript 中，**序列化（Serialization）** 指的是：把数据结构转换成“可传输、可存储”的字符串形式。而**反序列化（Deserialization）**，则是相反的过程：把字符串还原成原本的数据结构。\n\n在前端开发中，序列化非常常见，例如：\n\n- 向后端发送数据\n- 接收后端返回的数据\n- 本地存储（localStorage）\n- 数据持久化\n- 深拷贝的简化方案\n\nJavaScript 中，最核心、最常用的序列化工具就是：JSON对象。\n\n`JSON`（JavaScript Object Notation）是一种**轻量级的数据交换格式**，它看起来和 JS 对象很像，但**并不是 JS 对象**，而是一种**字符串格式的规范**。比如下面的对象：\n\n```js\nconst obj = {\n  name: \"小明\",\n  age: 18\n}\n```\n\n转换为JSON格式就是：\n\n```js\n{\n  \"name\": \"小明\",\n  \"age\": 18\n}\n```\n\n在JSON 中，属性名必须用双引号表示，字符串值必须用双引号、也不能写函数、不能写 `undefined`（这也是为什么前面建议大家一律使用`null`的原因）不能写注释更不能写 Symbol。例如下面是 **非法 JSON**：\n\n```js\n{\n  name: \"小明\",        \u002F\u002F ❌ 属性名没加双引号\n  age: undefined,     \u002F\u002F ❌ undefined 不允许\n  say() {}            \u002F\u002F ❌ 函数不允许\n}\n```\n\n要将对象转换为JSON格式的字符串，我们可以使用JSON对象提供的方法：\n\n```js\nconst obj = {\n  name: \"小明\",\n  age: 18\n}\n\nconst jsonStr = JSON.stringify(obj)\nconsole.log(jsonStr)   \u002F\u002F{\"name\":\"小明\",\"age\":18}\n```\n\n注意，序列化的结果是字符串，同样的，数组也可以进行序列化：\n\n```js\nconst arr = [1, 2, 3]\nJSON.stringify(arr)  \u002F\u002F[1,2,3] 数组序列化之后看着和原本差别不是很大\n```\n\nJSON 支持**对象嵌套对象、对象嵌套数组**：\n\n```js\nconst obj = {\n  name: \"小明\",\n  hobby: [\"JS\", \"HTML\"],\n  info: {\n    city: \"台北\"\n  }\n}\n\nJSON.stringify(obj)   \u002F\u002F{\"name\":\"小明\",\"hobby\":[\"JS\",\"HTML\"],\"info\":{\"city\":\"台北\"}}\n```\n\n如果遇到不能序列化的属性，则最终结果中不会包含：\n\n```js\nconst obj = {\n  a: 1,\n  b: undefined,\n  c: function () {},\n  d: Symbol()\n}\n\u002F\u002F{\"a\":1}\n```\n\n这里需要注意的是，如果存在循环引用，会出错：\n\n```js\nconst obj = {}\nobj.self = obj   \u002F\u002Fobj的一个属性指向自己\n```\n\nJSON 不支持循环结构，会直接得到一个错误，这是 JSON 序列化的一个硬限制。此外，我们还可以手动指定格式化哪些属性：\n\n```js\nJSON.stringify(obj, [\"name\", \"age\"])  \u002F\u002F只序列化name和age\n```\n\n最后一个参数用于控制格式化输出，它会让生成的字符串自动换行和缩进：\n\n```js\nJSON.stringify(obj, null, 2)  \u002F\u002F2就是缩进的空格数\n```\n\n既然可以序列化成字符串，那么我们也可以将字符串反序列化回普通的对象或是数组：\n\n```js\nconst jsonStr = '{\"name\":\"小明\",\"age\":18}'\nconst obj = JSON.parse(jsonStr)\n\nconsole.log(obj.name) \u002F\u002F 小明\n```\n\n这里需要注意的是，如果字符串不是一个合法的JSON字符串，解析失败会直接报错。\n\n此外，这种反序列化实际上是存在安全隐患的，因为它会将所有属性都还原为对象的属性，即使是一些特殊的属性也可以，比如`__proto__`：\n\n```js\n\u002F\u002F 恶意JSON输入\nconst maliciousJson = '{\"__proto__\": {\"isAdmin\": true}}';\n\n\u002F\u002F 不安全的反序列化\nconst user = {};\nObject.assign(user, JSON.parse(maliciousJson));\n\nconsole.log(user)\n\n\u002F\u002F 原型被污染，所有对象继承isAdmin属性\nconsole.log(user.isAdmin); \u002F\u002F 输出: true\n```\n\n![image-20260210171446734](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002FlaO1\u002Fimage-20260210171446734.png)\n\n配合序列化和反序列化，我们可以实现对象的深拷贝：\n\n```js\nconst obj = {\n    name: \"小明\",\n    age: 18,\n    meta: { key: 666 }\n}\n\nconst parse = JSON.parse(JSON.stringify(obj))\n\nconsole.log(parse === obj)\nconsole.log(parse.meta === obj.meta)  \u002F\u002F深拷贝，所以也不相等\n```\n\n可以看到，通过一次序列化和反序列化，对象不仅自己被重新创建，包括里面的内容也被一起重新创建。\n\n### 本地化工具\n\n在前面的内容中，我们已经学习了字符串、数字、日期等基础类型的处理方式。但当程序开始面向**真实用户**时，就会遇到一个非常现实的问题：\n\n> 同样的数据，在不同国家 \u002F 地区，展示方式是不一样的。\n\n举几个最直观的例子：\n\n- 数字\n  - 中国：`1,234,567.89`\n  - 德国：`1.234.567,89`\n- 日期\n  - 中国：`2025年2月10日`\n  - 美国：`02\u002F10\u002F2025`\n- 货币\n  - 中国：`￥99.00`\n  - 美国：`$99.00`\n  - 日本：`￥99`\n\n如果我们靠**手写字符串拼接**来适配这些差异，不但麻烦，而且极其容易出错。为了解决这个问题，JavaScript 提供了一套内置的国际化解决方案：**`Intl`**，`Intl` 并不是一个函数，而是一个**命名空间对象**，里面包含了多个构造函数，例如：\n\n- `Intl.NumberFormat`\n- `Intl.DateTimeFormat`\n- `Intl.Collator`\n- `Intl.RelativeTimeFormat`\n\n它们的使用套路非常统一，基本都是三步：\n\n1. 指定语言 \u002F 地区\n2. 指定格式化规则\n3. 调用 `format` 方法\n\n我们先从**最常用、最容易理解的数字格式化**开始，假设我们现在有一个普通数字，如果直接输出：\n\n```js\nconst num = 12345670000\nconsole.log(num)\n\u002F\u002F 12345670000\n```\n\n这对程序来说没问题，但对用户来说并不友好，因为用户一眼看过去根本不知道一共有多少个`0`。我们可以使用 `Intl.NumberFormat` 来进行本地化处理：\n\n```js\nconst num = 12345670000\nconst formatter = new Intl.NumberFormat(\"zh-CN\")   \u002F\u002F这里的 \"zh-CN\" 表示 中文（中国）\nconsole.log(formatter.format(num))   \u002F\u002F12,345,670,000\n```\n\n我们只需要修改地区，就能得到完全不同的格式：\n\n```js\nnew Intl.NumberFormat(\"en-US\").format(num) \u002F\u002F 1,234,567.89\nnew Intl.NumberFormat(\"de-DE\").format(num) \u002F\u002F 1.234.567,89\nnew Intl.NumberFormat(\"ja-JP\").format(num) \u002F\u002F 1,234,567.89\n```\n\n默认情况下，Intl 会**尽量保留原始数字结构**，如果我们希望强制控制小数位数，可以传入第二个参数（配置对象）：\n\n```js\nconst formatter = new Intl.NumberFormat(\"zh-CN\", {\n    minimumFractionDigits: 2,   \u002F\u002F最小保留2位小数\n    maximumFractionDigits: 2    \u002F\u002F最大保留2位小数\n})\n\nformatter.format(12)        \u002F\u002F \"12.00\"\nformatter.format(12.3456)  \u002F\u002F \"12.35\"\n```\n\n这在**金额、统计数据展示**中非常常见，此外，`Intl`在格式化货币时尤其强大，因为货币符号、位置、格式，全都因地区不同而不同：\n\n```js\nconst formatter = new Intl.NumberFormat(\"zh-CN\", {\n    style: \"currency\",\n    currency: \"CNY\"\n})\nformatter.format(99)   \u002F\u002F￥99.00\n```\n\n```js\nconst formatter = new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency: \"USD\"\n})\nformatter.format(99)   \u002F\u002F$99.00\n```\n\n除了对数字进行修改外，我们可以通过配置项，精细控制日期展示内容：\n\n```js\nconst formatter = new Intl.DateTimeFormat(\"zh-CN\", {\n    year: \"numeric\",  \u002F\u002F\"numeric\" | \"2-digit\"\n    month: \"long\",   \u002F\u002F\"numeric\" | \"2-digit\" | \"long\" | \"short\"\n    day: \"numeric\",\n    weekday: \"long\"\n})\nformatter.format(new Date())   \u002F\u002F2026年2月10日星期二\n```\n\n此外，我们也可以以相对时间进行表示：\n\n```js\nconst rtf = new Intl.RelativeTimeFormat(\"zh-CN\")\nrtf.format(-1, \"day\") \u002F\u002F \"1天前\"\nrtf.format(3, \"day\")  \u002F\u002F \"3天后\"\n```\n\n```js\nnew Intl.RelativeTimeFormat(\"en-US\").format(-1, \"day\")  \u002F\u002F \"1 day ago\"\nnew Intl.RelativeTimeFormat(\"en-US\").format(-3, \"day\")  \u002F\u002F \"3 days ago\" 自动变复数形式\n```\n\n这里仅列出数字和日期的格式化操作，有关Intl的更多内容请参阅：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FIntl\n\n### 表达式评估\n\n`eval` 是 **JavaScript 内置的全局函数**，作用只有一个：把一段“字符串形式的 JS 代码”，当成真正的 JS 代码执行。比如：\n\n```js\neval(\"console.log('Hello')\");\n```\n\n等价于你直接在JS文件中写：\n\n```js\nconsole.log('Hello');\n```\n\n所以，`eval`就是JS“字符串 到 代码执行”的转换器。你甚至还可以用它来定义变量和函数：\n\n```js\neval(\"function foo() { return 123 }\");\nfoo(); \u002F\u002F 123\n```\n\n虽然用起来感觉很强大，但实际上，这种玩法有非常大的安全隐患，很容易被代码注入 \u002F 存在 XSS 漏洞。同时，JS 引擎没法提前优化 `eval` 里的代码，性能也不如直接写的代码。\n\n在严格模式下，`eval` 有自己的作用域，无法随意污染外层作用域。\n\n### 定时器\n\n在实际开发中，我们经常会遇到这样的需求：\n\n- 过一段时间再执行某段代码\n- 每隔一段时间重复执行任务\n- 延迟提示、轮询接口、倒计时、动画更新……\n\n这些需求都离不开 **定时器**，最常见的两个定时器函数是：\n\n* `setTimeout`：**延迟执行一次**\n* `setInterval`：**按固定间隔重复执行**\n\n`setTimeout` 用于在**指定时间后执行一次代码**，最简单的例子：\n\n```js\nsetTimeout(() => {\n    console.log(\"3秒后执行\")\n}, 3000)\n```\n\n其中第一个参数`callback`表示要执行的函数，而`delay`则是延迟时间（单位：毫秒）接着，回调函数会在指定时间结束之后执行。\n\n> 这里需要注意一个细节：`setTimeout` **并不是“精确计时”**，而是“**至少等待这么久之后再执行**”，这一点我们会在后面的事件循环中详细解释。\n\n有些时候，我们可能需要在定时器结束之前，提前取消这个任务，`setTimeout` 会返回一个 **定时器 ID**，我们可以用它来取消执行，使用`clearTimeout`对指定ID的定时器取消：\n\n```js\nconst timerId = setTimeout(() => {\n    console.log(\"这句不会执行\")\n}, 3000)\n\nclearTimeout(timerId)  \u002F\u002F立即清除定时器\n```\n\n只要在定时器规定时间执行前调用 `clearTimeout`，回调函数就不会再执行。\n\n如果我们希望某段代码**每隔一段时间就执行一次**，可以使用 `setInterval`，它可以实现周期性执行：\n\n```js\nsetInterval(() => {\n    console.log(\"每秒执行一次\")\n}, 1000)\n```\n\n这里表示，**每隔 1 秒执行一次回调函数**，和 `setTimeout` 一样，`setInterval` 也会返回一个 ID，我们可以使用`clearInterval`来取消周期任务：\n\n```js\nconst timerId = setInterval(() => {\n    console.log(\"持续执行\")\n}, 1000)\n\nclearInterval(timerId)\n```\n\n如果在某个时间不需要使用定时器了，一定记得清除定时器，否则永远不会停止。\n\n不过，`setInterval` 会尝试每隔指定时间**固定触发**回调，即使上一次回调还未执行完毕（比如回调执行时间超过了间隔时间）这会导致回调被**堆积**，在主线程空闲时连续执行，造成性能问题。要解决这种问题，我们也可以考虑使用`setTimeout`递归，每次回调执行完成后，才会安排下一次执行。这确保了回调之间的间隔是**相对稳定**的（实际间隔 = 指定延迟 + 回调执行时间），不会出现任务堆积。\n\n```js\n\u002F\u002F setInterval 版本：可能出现回调堆积\nsetInterval(() => {\n  \u002F\u002F 假设这个操作偶尔会耗时超过 100ms\n  heavyOperation();\n}, 100);\n\u002F\u002F setTimeout 递归版本：确保回调完成后再执行下一次\nfunction scheduleTask() {\n  heavyOperation();\n  setTimeout(scheduleTask, 100);\n}\nscheduleTask();\n```\n\n## 错误\n\n在前面的学习中，我们写的代码几乎都是“理想情况”：参数正确、逻辑正确、执行顺利。但在真实开发中，**错误是一定会发生的**，比如：\n\n* 用户输入了非法数据\n* 访问了不存在的变量\n* 调用了不存在的方法\n* 后端返回了异常数据\n\n如果程序在遇到错误时**直接崩溃**，那用户体验会非常差，因此，JavaScript 提供了一套完整的 **错误机制（Error Handling）**，用来控制程序在出错时的行为，理解错误机制，是从“会写代码”走向“能写稳定代码”的重要一步。\n\n```js\n\u002F**\n *                             _ooOoo_\n *                            o8888888o\n *                            88\" . \"88\n *                            (| -_- |)\n *                            O\\  =  \u002FO\n *                         ____\u002F`---'\\____\n *                       .'  \\\\|     |\u002F\u002F  `.\n *                      \u002F  \\\\|||  :  |||\u002F\u002F  \\\n *                     \u002F  _||||| -:- |||||-  \\\n *                     |   | \\\\\\  -  \u002F\u002F\u002F |   |\n *                     | \\_|  ''\\---\u002F''  |   |\n *                     \\  .-\\__  `-`  ___\u002F-. \u002F\n *                   ___`. .'  \u002F--.--\\  `. . __\n *                .\"\" '\u003C  `.___\\_\u003C|>_\u002F___.'  >'\"\".\n *               | | :  `- \\`.;`\\ _ \u002F`;.`\u002F - ` : | |\n *               \\  \\ `-.   \\_ __\\ \u002F__ _\u002F   .-` \u002F  \u002F\n *          ======`-.____`-.___\\_____\u002F___.-`____.-'======\n *                             `=---='\n *          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n *                     佛祖保佑        永无BUG\n *            佛曰:\n *                   写字楼里写字间，写字间里程序员；\n *                   程序人员写程序，又拿程序换酒钱。\n *                   酒醒只在网上坐，酒醉还来网下眠；\n *                   酒醉酒醒日复日，网上网下年复年。\n *                   但愿老死电脑间，不愿鞠躬老板前；\n *                   奔驰宝马贵者趣，公交自行程序员。\n *                   别人笑我忒疯癫，我笑自己命太贱；\n *                   不见满街漂亮妹，哪个归得程序员？\n*\u002F\n```\n\n### 什么是错误\n\n从本质上来说，**错误是 JavaScript 在执行过程中遇到的异常情况**，我们先看一个最简单的例子：\n\n```js\nconsole.log(a)\n```\n\n运行后，控制台会直接报错：\n\n```js\nReferenceError: a is not defined\n```\n\n此时你会发现一个非常重要的现象：**错误一旦出现，后面的代码将不会再执行**：\n\n```js\nconsole.log(\"开始\")\nconsole.log(a)\nconsole.log(\"结束\")  \u002F\u002F 永远不会执行\n```\n\n这说明，在默认情况下，错误是**致命的**。\n\n在 JavaScript 中，错误并不是随便写出来的一段字符串，而是一个**对象**，所有错误都继承自一个统一的基类：`Error`。系统内置了一些常见的错误类型，例如：\n\n- `ReferenceError`：引用错误（变量不存在）\n- `TypeError`：类型错误（对值进行了不合法操作）\n- `SyntaxError`：语法错误（代码本身写错）\n- `RangeError`：范围错误（值超出合法范围）\n\n```js\nconst n = 123\nn()    \u002F\u002F 把数字当函数用\n\n\u002F\u002FTypeError: n is not a function\n```\n\n这些错误，都会在程序运行到对应位置时被自动创建并**抛出**。\n\n### 抛出错误\n\n除了 JavaScript 自动抛出的错误之外，我们也可以**主动抛出错误**，比如在有些情况下，虽然语法没问题，但**从业务逻辑上来说是错误的**，这也是很致命的问题，所以需要主动抛出。比如：\n\n```js\nfunction sum(a, b) {\n    return a + b\n}\n```\n\n如果这样调用：\n\n```js\nsum(1, \"2\")   \u002F\u002F求和的结果变成求字符串的拼接了\n```\n\n语法上没有任何问题，但结果显然不是我们想要的，这种情况下，我们就可以在代码中**主动抛出错误**。\n\nJavaScript 中通过 `throw` 关键字来抛出错误：\n\n```js\nfunction sum(a, b) {\n    if (typeof a !== \"number\" || typeof b !== \"number\") {\n        throw new Error(\"参数必须是数字\")  \u002F\u002F抛出错误其实就是抛出这个错误对象\n    }\n    return a + b\n}\n```\n\n默认情况下，当程序抛出错误时，将被强制终止。不过，`throw` 后面不仅可以抛出 `Error` 对象，理论上也可以抛出任何值：\n\n```js\nthrow \"出错了\"\nthrow 123\n```\n\n但在实际开发中，**强烈不推荐这样做**，因为这会破坏错误的统一结构，增加调试成本。规范做法是：**只抛出 Error 或其子类对象**。\n\n### 捕获错误\n\n前面我们看到，错误一旦抛出，程序就会直接中断执行，但在很多场景下，我们并不希望程序“直接崩掉”，而是希望给用户一个提示，不影响程序继续运行（类似于警告）这就需要用到 **错误捕获机制**。\n\nJavaScript 提供了 `try...catch` 语法，用来捕获运行时错误，基本结构如下：\n\n```js\ntry {\n  \t\u002F\u002F 可能出错的代码\n    console.log(a)\n} catch (err) {   \u002F\u002F也可以不带err参数\n    \u002F\u002F 出错后的处理逻辑\n    console.log(\"代码出错了\", err)\n}\n```\n\n如果程序可以正常运行，那么会正常执行完`try`中的代码，但是如果`try`中的代码出现了问题，那么此时程序不会直接崩溃，而是进入 `catch` 分支执行，并且这个 `err` 参数就是前面抛出的 `Error` 对象，我们可以通过它获取错误信息，用于调试或提示。这里更建议大家使用不同类型的打印：\n\n```js\nconsole.error(\"代码出错了\", err)   \u002F\u002F错误信息\nconsole.warn(\"代码出错了\", err)   \u002F\u002F警告信息\n```\n\n这样，我们可以根据不同类型的错误，分别对用户发出错误提示或是警告。\n\n不过，各位小伙伴可以思考一下，那要是我们在`catch`块中也出现错误了怎么办？\n\n```js\ntry {\n    \u002F\u002F 可能出错的代码\n    console.log(a)\n} catch (err) {\n    \u002F\u002F 出错后的处理逻辑\n    console.warn(\"代码出错了\", err)\n    try {   \u002F\u002F我们可以继续嵌套使用try-catch来处理\n        console.log(a)\n    } catch {\n\n    }\n}\n\n```\n\n不过，虽然这种方式可以实现，但是它看起来并不直观。\n\n接着，在 `try...catch` 结构中，我们还可以额外使用 `finally`语句，它可以实现**无论是否出错都会执行**里面的代码：\n\n```js\ntry {\n    \u002F\u002F 可能出错的代码\n} catch (err) {\n    \u002F\u002F 错误处理\n} finally {\n    \u002F\u002F 一定会执行的代码\n}\n```\n\n无论`try`有没有出现错误，`finally`最终都会执行，它会在`try`执行完成后或是`catch`执行完成后执行，这种特性非常适合清理资源、重置状态等。\n\n需要特别强调的一点是：**`try...catch` 只能捕获“运行时错误”**，例如，语法错误是捕获不到的：\n\n```js\ntry {\n    if (true {   \u002F\u002F乱写\n        console.log(\"hello\")\n    }\n} catch (e) {\n    console.log(\"捕获不到\")\n}\n```\n\n```js\ntry {\n    obj.#battery  \u002F\u002F包括之前的取私有属性\n} catch (e) {\n    console.log(\"捕获不到\")\n}\n```\n\n这种错误在代码解析阶段就已经失败，程序压根不会运行，自然也就不会从`try`往下走了。\n\n## 常用数据结构\n\n在 JavaScript 中，**大部分常见数据结构，官方库本身已经帮我们封装好了**，不过，理解这些结构的**特性、适用场景和差异**也是很重要的，推荐各位小伙伴有时间可以学习一下《数据结构与算法》这\n\n本节我们重点介绍 JS 中**最常用、最实用**的几种数据结构。\n\n### 迭代器\n\n在 JavaScript 中，**迭代器（Iterator）** 并不是一种“存数据的结构”，而是一种 **访问数据的统一方式**，只要一个对象实现了这套接口，我们就可以用统一的方式去遍历它。\n\n标记一个对象如果是“可迭代的”，必须满足两点：\n\n1. 对象上存在 `Symbol.iterator` 方法\n2. 该方法返回一个 **迭代器对象**\n\n这个迭代器对象必须有一个 `next()` 方法，每次调用返回一个对象：\n\n```js\n{\n    value: 当前值,\n    done: 是否遍历结束\n}\n```\n\n不知道大家是否发现，这跟我们之前介绍的生成器得到的阶段性结果如出一辙，别着急，真相很快就会浮出水面了。\n\n我们先来研究一下之前遇到过的一些对象，比如数组，数组本身就是可迭代对象：\n\n```js\nconst arr = [1, 2, 3]\nconst iterator = arr[Symbol.iterator]()  \u002F\u002F取出迭代器\n\n\u002F\u002F推动迭代器向下执行\niterator.next() \u002F\u002F { value: 1, done: false }\niterator.next() \u002F\u002F { value: 2, done: false }\niterator.next() \u002F\u002F { value: 3, done: false }\niterator.next() \u002F\u002F { value: undefined, done: true }\n```\n\n这里可以清楚看到，每次 `next()` 都“取一下个值”，当`done: true` 表示结束，这其实就是迭代器的作用，包括我们之前介绍的生成器也是：\n\n```js\nfunction* gen() {\n    console.log(\"我是第一阶段\")\n    yield\n    console.log(\"我是第二阶段\")\n    yield\n    console.log(\"我是第三阶段\")\n}\n\nconst generator = gen()\ngenerator.next()   \u002F\u002F实际上生成器本身就是个迭代器\n```\n\n我们前面为大家介绍的`for...of` 本质上 **就是在不停调用迭代器的 next 方法**：\n\n```js\nfor (const item of arr) {\n    console.log(item)\n}\n```\n\n等价于：\n\n```js\nconst iterator = arr[Symbol.iterator]()\nlet result = iterator.next()\n\nwhile (!result.done) {\n    console.log(result.value)\n    result = iterator.next()\n}\n```\n\n这下，所有的事情都说得通了。除此之外，针对于可迭代对象，我们还可以使用之前介绍的`...`展开运算符来将所有结果展开：\n\n```js\nconst numbers = gen();\nconsole.log([...numbers])\n```\n\n到目前为止，我们已经学习过的可迭代对象有：Array、String、arguments、Generator，而普通对象**不是可迭代的**，必须符合我们上面所说的条件。\n\n### Map字典\n\n`Map` 是 ES6 新增的一种 **键值对结构**，可以理解为：专门为“数据映射”而生的结构。\n\n要使用Map，我们只需要使用`new`创建一个新对象即可：\n\n```js\nconst map = new Map()\n```\n\n`Map`和对象非常类似，它可以存储键值对，也就是对象的属性和属性值。我们可以使用`set`方法来向其中插入一个新的键值对：\n\n```js\nmap.set(\"name\", \"小明\")  \u002F\u002F第一个参数就是键，第二个是值\nmap.set(\"age\", 18)\n```\n\n![image-20260210220658384](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002Fl3bO\u002Fimage-20260210220658384.png)\n\n注意，键并不要求必须使用字符串，它可以是任意类型的，这与对象的属性有很大不同：\n\n```js\nmap.set(666, \"申请\")\nmap.set(null, \"起飞\")  \u002F\u002F哪怕是null也可以作为键\n```\n\n不过，如果添加同样的键到`Map`中，依然是会覆盖之前的键值对：\n\n```js\nmap.set(null, 18)\nmap.set(null, \"起飞\")   \u002F\u002F以最后一次设置为准\n```\n\n我们可以使用`size`属性来查看`Map`当前存储了多少个键值对：\n\n```js\nconsole.log(map.size)  \u002F\u002F不能修改，只能获取\n```\n\n当然，如果我们需要获取某个键值对的值，也可以直接使用`get`方法来获取，传入指定的键就行，就像之前访问对象属性那样：\n\n```js\nconsole.log(map.get(null)) \nconsole.log(map.get(\"666\"))  \u002F\u002F注意这里也是判断的严格相等\n```\n\n如果不存在这个键值对，那么返回一个`undefined`作为结果。此外，我们还可以使用`has`来判断某个属性是否存在，或者使用`delete`来删除一个键值对，都只需提供键即可：\n\n```js\nmap.has(\"age\")    \u002F\u002F true\nmap.delete(\"age\")   \u002F\u002F删除成功返回true反之false\nmap.clear()   \u002F\u002F清除全部键值对\n```\n\n最后，`Map`还提供了三个用于遍历的方法：`keys()`、`values()` 和 `entries()`，它们都返回一个**迭代器对象**（Iterator），可以通过 `for...of` 或 `next()` 方法进行遍历：\n\n```js\nconst keys = map.keys();\n \n\u002F\u002F 方式1: 使用 for...of 遍历\nfor (const key of keys) {\n  console.log(key); \u002F\u002F 'name', 25, true\n}\n\n\u002F\u002F 方式2: 使用 next() 手动迭代\nconsole.log(keys.next().value); \u002F\u002F 'name'\nconsole.log(keys.next().value); \u002F\u002F 25\nconsole.log(keys.next().value); \u002F\u002F true\nconsole.log(keys.next().done);  \u002F\u002F true（迭代结束）\n```\n\n像是一些单纯做“数据映射”，而不是描述一个实体的场景，就很适合使用`Map`作为数据结构。\n\n### Set去重集合\n\n`Set` 表示一种 **不允许重复值的集合结构**，它类似于数组，但是其中所有的值都只能存在一个，不能重复出现。要创建一个`Set`对象我们可以创建对象：\n\n```js\nconst set = new Set()\n```\n\n我们可以使用`add`方法来为`Set`集合添加新的元素：\n\n```js\nconst set = new Set()\nset.add(222)\nset.add(333)\nconsole.log(set)\n```\n\n注意，在插入重复元素时，会直接去除：\n\n```js\nconst set = new Set()\nset.add(222)\nset.add(222)   \u002F\u002F依然是使用严格等于进行判断的\nconsole.log(set)   \u002F\u002FSet(1) {222}\n```\n\n和`Map`一样，`Set`也可以使用`size`来获取当前的元素数量：\n\n```js\nconsole.log(set.size)\n```\n\n此外，我们还可以使用`has`来判断某个元素是否存在，或者使用`delete`来删除一个属性：\n\n```js\nset.has(2)     \u002F\u002F true\nset.delete(1)   \u002F\u002F删除成功返回true反之false\nset.clear()   \u002F\u002F清除全部元素\n```\n\n由于Set的底层实现是我们数据结构中介绍的哈希表，所以在查询是否存在某个元素的时候性能非常好，比数组的`includes`快很多。\n\n此外，利用`Set`的特性，我们就可以很轻松地实现数组的去重：\n\n```js\nconst arr = [1, 2, 2, 3]\nconst result = [...new Set(arr)]\n```\n\n需要注意的是，Set不支持像数组一样能够随机访问，虽然它保持了元素的顺序，但是不允许指定下标位置访问。\n\n最后，`Set`也是可迭代对象，用法和数组大差不差：\n\n```js\nfor (const value of set) {\n    console.log(value)\n}\n```\n\n`Set`非常适合状态标记、唯一值收集等场景。\n\n### 弱引用结构（选学）\n\n弱引用结构主要包括：`WeakMap`和`WeakSet`，这一部分主要和 **垃圾回收** 有关，属于选学内容。\n\n首先介绍一下`WeakMap`，它和 `Map` 类似，但有两个关键限制：\n\n1. key **只能是对象**\n2. key 是 **弱引用**\n\n我们来尝试使用一个普通的Map进行属性存储：\n\n```js\nconst wm = new Map()\nlet obj = {}\n\nconst registry = new FinalizationRegistry(heldValue => {\n    console.log(`${heldValue}对象被垃圾回收了`)\n})\nregistry.register(obj, \"测试\")\n\nwm.set(obj, \"data\")\nobj = null   \u002F\u002F取消对这个对象的引用\n```\n\n我们可以测试一下垃圾回收，接着会发现垃圾这个对象并没有被回收，因为即使外面的变量取消了对这个对象的引用，但是`Map`还存有这个对象的引用，我们依然可以通过这个`Map`获取到这个对象，所以不会被垃圾回收。\n\n我们也可以正常创建一个新的`WeakMap`对象：\n\n```js\nconst wm = new WeakMap()\n```\n\n此时再来测试：\n\n![image-20260210223603038](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F6Yug\u002Fimage-20260210223603038.png)\n\n我们发现，当使用`WeakMap`时，测试对象一旦没有其他地方的引用，那么将会被视为垃圾回收。这正是`WeakMap`的效果，它对于对象的引用实际上是一个弱引用，当对象在其他地方不再被需要时，它随时可以被回收。并且在垃圾回收之后，这个键值对将消失。\n\n`WeakSet`和上面是同理的，这里不做详细介绍了。\n\n## Promise专题\n\n在 JavaScript 中，**异步几乎无处不在**。\n\n> 同步：任务按顺序执行，必须等待前一个任务完成后，下一个任务才能开始。\n>\n> 异步：任务无需等待前序任务完成，多个任务可以同时进行。\n\n我们前面学习的定时器 `setTimeout`，实际上就是一种异步行为，它会在一段时间之后再执行，而不影响我们正常后续的代码。早期 JS 使用 **回调函数** 来处理异步，但这种方式很快就会变得失控，这也是 Promise 出现的原因。\n\n### 回调函数的问题\n\n我们先来看一个最原始的异步写法，这里我要分阶段执行三个定时任务，上一个任务结束之后才能继续下一个，那么我们可能会像这样写：\n\n```js\nsetTimeout(() => {\n    console.log(\"第一步\")\n    setTimeout(() => {\n        console.log(\"第二步\")\n        setTimeout(() => {\n            console.log(\"第三步\")\n        }, 1000)\n    }, 1000)\n}, 1000)\n```\n\n虽然说确实这样写着没毛病，但是这种代码非常臃肿，随着我们嵌套的层数越来越多，代码 **向右无限缩进**，变得难以阅读，这就是经典的 **回调地狱（Callback Hell）**，因此，Promise 的目标只有一个：把“未来才会完成的事情”，包装成一个对象，让代码写得像同步一样清晰。\n\n### 走进Promise\n\n**Promise 是一个对象**，用于表示一个**尚未完成，但将来一定会有结果的操作**。它有三个状态：\n\n| 状态      | 含义   |\n| --------- | ------ |\n| pending   | 进行中 |\n| fulfilled | 已成功 |\n| rejected  | 已失败 |\n\n注意：Promise **状态一旦改变，就不可逆**，初始状态都是`pending`，而状态流转只有两条路：pending → fulfilled 或是 pending → rejected。\n\nPromise 通过 `new Promise()` 创建，构造函数接收一个函数参数：\n\n```js\nconst p = new Promise((resolve, reject) => {\n    \u002F\u002F 执行异步操作\n})\n```\n\n这里的`resolve`需要再我们执行完成之后进行调用，来告诉`Promise`这个任务已经完成了。`reject`用于告诉`Promise`这个任务执行失败了，类似于之前正常执行过程中抛出错误的感觉。\n\n这样，我们就可以把一些异步任务放到`Promise`里面：\n\n```js\nconst p = new Promise((resolve, reject) => {\n    setTimeout(() => {\n      try {\n        resolve(\"成功结果\")  \u002F\u002F在resolve传入执行完成之后的结果，如果没有就填undefined\n      } catch(err) {\n        reject(err)   \u002F\u002F在reject中传入失败原因，一般是错误对象本身\n      }\n    }, 1000)\n})\n```\n\n这里的`setTimeout`也会直接执行，但是当执行完成之后，会通过Promise提供的两个回调函数来进行通知。接着，我们可以使用Promise 提供的 `then` 方法，来接收成功的结果：\n\n```js\np.then(data => {   \u002F\u002F对刚刚创建的Promise对象使用then\n    console.log(data)\n})\n```\n\n我们可以使用`then`提前编写好这个任务完成之后的处理逻辑，当这个任务在1秒钟之后完成执行时，`resolve`会通知这边任务完成，接着就会执行`then`中的回调函数，并且这里的参数实际上就是刚刚传入的成功结果。\n\n当然，`then`的最大特点是它会返回一个新的 Promise 对象，我们在上一个`then`阶段中执行的返回值，会被自动包装成新的Promise对象的`resolve`值，我们可以继续在这个对象中编写上一个`then`处理完成之后的结果：\n\n```js\np.then(data => {\n    console.log(`第一次then得到: ${data}`)\n    return 6666\n}).then(data => {\n    console.log(`第二次then得到: ${data}`)\n})\n```\n\n![image-20260210231039492](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002FG1nr\u002Fimage-20260210231039492.png)\n\n利用这种机制，我们就可以连续进行多段处理了，此外，当返回值是一个新的Promise对象时，这里会直接将这个新的Promise对象作为结果返回。\n\n```js\np.then(data => {\n    console.log(`第一次then得到: ${data}`)\n    return Promise.resolve(666)   \u002F\u002F直接使用静态方法返回一个已完成的Promise\n}).then(data => {\n    console.log(`第二次then得到: ${data}`)\n})\n```\n\n所以，上面的回调地狱，就被我们成功解决了，Promise 能“拉直”回调地狱：\n\n```js\nnew Promise(resolve => {\n    setTimeout(() => resolve(), 1000)\n}).then(() => {\n    return new Promise(resolve => setTimeout(() => resolve(), 1000))\n}).then(() => {\n    return new Promise(resolve => setTimeout(() => resolve(), 1000))\n})\n```\n\n总结一下，`then()` 方法会返回一个**新的 Promise 对象**，这是实现链式调用的关键。每次调用 `then` 时：\n\n- 它会等待前一个 Promise 状态变为 `fulfilled`（已完成）\n- 执行传入的回调函数\n- 根据回调函数的返回值，决定新 Promise 的状态：\n  - 如果返回一个值，新 Promise 会以该值 `fulfilled`\n  - 如果返回另一个 Promise，新 Promise 会跟随这个 Promise 的状态\n  - 如果抛出异常，新 Promise 会以该异常 `rejected`\n\n下一节，我们接着来为大家介绍出现错误的情况。\n\n### 错误处理\n\n当我们的任务执行失败时，就可以使用`reject`来告诉`Promise`任务失败了，并返回一个错误的结果。使用`reject`或是直接在回调函数中抛出错误都会使得Promise失败：\n\n```js\nnew Promise((_, reject) => {\n    reject(new Error(\"发生了疯狂星期四vivo50的错误\"))  \u002F\u002F直接失败吧\n}).then(() => {\n    console.log(\"我是正常完结\")\n})\n```\n\n此时我们会发现，`then`并没有执行，因为Promise执行失败了，它的状态变成了`rejected`，如果我们不做任何处理，那么会在控制台出现一个错误信息：\n\n![image-20260210234708624](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F7zIj\u002Fimage-20260210234708624.png)\n\n要处理这些失败的情况，我们可以使用`catch`方法：\n\n```js\nnew Promise((_, reject) => {\n    reject(new Error(\"发生了疯狂星期四vivo50的错误\"))\n}).then(() => {\n    console.log(\"我是正常完结\")\n}).catch((err) => {\n    console.log(`我是出问题了: ${err}`)\n})\n```\n\n除了在异步操作中出现问题之外，只要链路中某一步出错，依然会进入到`catch`里面：\n\n```js\nnew Promise(resolve => {\n    resolve()\n}).then(() => {\n    throw new Error(\"送你个大报错\")\n    \u002F\u002Freturn Promise.reject(\"送你个大报错\") 或是使用静态方法直接返回一个已失败的Promise\n}).catch((err) => {\n    console.log(`我是出问题了: ${err}`)\n})\n```\n\n这种情况也会进入到`catch`中，即使最初的那个异步任务是正确`fulfilled`结束的，后续过程中如果出现问题依然会进入到`catch`里面，同时，只要链路中某一步出错，后续 `then` 会被跳过，直到遇到 `catch`：\n\n```js\nnew Promise(resolve => {\n    resolve()\n}).then(() => {\n    throw new Error(\"送你个大报错\")\n}).then(() => {\n    console.log(\"我是正常继续\")   \u002F\u002F不会执行，被跳过\n}).catch((err) => {\n    console.log(`我是出问题了: ${err}`)\n})\n```\n\n只不过，`catch`和`then`一样，也会返回一个新的Promise对象，所以，如果是`catch`之后的`then`，那么是不会受到影响的：\n\n```js\nnew Promise(resolve => {\n    resolve()\n}).then(() => {\n    throw new Error(\"送你个大报错\")\n}).catch((err) => {\n    console.log(`我是出问题了: ${err}`)\n}).then(() => {\n    console.log(\"我是正常继续\")   \u002F\u002F正常执行\n})\n```\n\n和前面介绍的`try-catch`一样，我们还可以在最后添加一个`finally`方法：\n\n```js\nnew Promise(resolve => {\n    resolve()\n}).then(() => {\n    throw new Error(\"送你个大报错\")\n}).finally(() => {\n    console.log(\"一定会执行\")\n})\n```\n\n无论上面是否出现问题，这里的`finally`一定会执行，但是由于没有处理失败的情况，所以这里控制台依然会有错误信息。需要注意的是，`finally`仍然返回的是一个Promise对象，所以仍然有可能继续向后拼接，但是不推荐大家使用这种方式，正常情况下一般都是一个`catch`一个`finally`收尾即可。\n\n最后需要提到的是，从 ES2024 开始，`Promise.withResolvers()` 正式成为标准API，它可以实现一种更加快速的异步回调和Promise的转换操作：\n\n```js\n\u002F\u002F使用解构语法直接拿关键东西\nconst { promise, resolve, reject } = Promise.withResolvers()\nsetTimeout(() => resolve(\"任务执行完成\"), 1000)\npromise.then(console.log)\n```\n\n它可以直接得到一个Promise对象，以及这个对象所属的`resolve`和`reject`方法，这样，我们就可以在任何位置对这个Promise结束或是失败，使用灵活性大大提高。但是注意，如果不去手动执行`resolve`或是`reject`，那么这个Promise将永远不能结束，永远处于`pending`状态，永远占用资源。\n\n### 并发控制\n\n这一节我们来看看然后进行更加高级的并发控制操作。在实际开发中，我们经常需要**同时发起多个异步任务**：\n\n```js\nconst p1 = new Promise(resolve => {\n    setTimeout(() => {\n        console.log(\"我是一号结束执行\")\n        resolve(\"一号结束\")\n    }, 2000)\n})\nconst p2 = new Promise(resolve => {\n    setTimeout(() => {\n        console.log(\"我是二号任务执行\")\n        resolve(\"二号结束\")\n    }, 3000)\n})\n```\n\nPromise为我们提供了大量静态方法用于在多个异步任务下的并发控制，我们首先来介绍一下最简单的一个，`Promise.all()`可以实现等待所有Promise完成之后再执行：\n\n```js\n\u002F\u002F将多个Promise以对象形式传入\nPromise.all([p1, p2]).then(res => {\n    console.log(res) \u002F\u002F ['一号结束', '二号结束']\n})\n```\n\n此时，`all`会对数组中的所有Promise 进行等待，直到它们完成。这里返回的也是一个Promise对象，当所有的Promise都完成之后，这个总的Promise才会变成`fulfilled`状态，继续执行它所属的一些`then`和`catch`。注意，如果其中一个任务失败了，那么这个总的Promise也会立即宣告失败：\n\n```js\nPromise.all([p1, p2]).then(res => {\n    console.log(res) \u002F\u002F ['一号结束', '二号结束']\n}).catch(err => {\n    console.log(`失败了${err}`)\n})\n```\n\n当其中一个Promise失败之后，`Promise.all`得到的总Promise会立即失败，不会继续等待其他未完成的Promise了（但依然会执行）我们可以在后续的`catch`中处理问题（这里其实有一个问题，后续任务即使出现问题，也没办法处理了）\n\n接下来是`Promise.any`，如果说`all`是与运算，那么它类似于或运算，也就是说只要其中一个Promise完成了，`any`生成的总Promise将立即变为`fulfilled`，直接开始后续的`then`和`catch`：\n\n```js\nPromise.any([p1, p2]).then(data => {\n    console.log(data)\n})\n```\n\n当然，其他未完成的任务依然会继续完成，但是结果会被忽略。不过，如果其中一个Promise出现了错误执行失败，那么这里并不会立即变成`rejected`状态，而是会继续等待其他Promise完成，只要有其中一个正确完成，那么这里就可以正常变为`fulfilled`。所以：\n\n* `Promise.all` 要求所有Promise都正确完成。\n* `Promise.any` 只需要有至少一个Promise能正确完成即可。\n\n此外，还有一种类似于`any`的静态方法，`Promise.race`也可以实现先完成任务的Promise立即得到结果：\n\n```js\nPromise.race([p1, p2]).then(data => {\n    console.log(data)\n})\n```\n\n但是注意，无论第一个完成的Promise是成功还是失败，`race`都会立即更新状态，如果成功就是`fulfilled`，如果失败就是`rejected`，这也是它和`any`不同的地方。\n\n接着是`Promise.allSettled`，它类似于上面的`all`，同样是需要等待所有Promise完成：\n\n```js\nPromise.allSettled([p1, p2]).then(data => {\n    console.log(data)\n}).catch(err => {   \u002F\u002F实际上不会执行\n    console.log(`失败了${err}`)\n})\n```\n\n但是需要注意的是，它不会在遇到某一个Promise失败时立即得到`rejected`，而是依然进行等待，直到所有都结束。然后再进行综合，然后直接更新为`fulfilled`状态（无论有没有Promise失败）并在`then`中返回一个数组：\n\n![image-20260211003653923](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F2rHa\u002Fimage-20260211003653923.png)\n\n这个数组中记录了所有Promise的执行结果，我们可以通过结果判断每个Promise是否执行成功。\n\n### async与await\n\n在前面的章节中，我们已经系统学习了 **Promise**，相信大家应该已经能写出结构正确的异步代码了，我们通过Promise简化了之前的回调地狱，但是新的问题来了：\n\n```js\n.then(user => {\n  return getOrders(user.id)\n})\n.then(orders => {\n  return getDetail(orders[0].id)\n})\n.then(detail => {\n  console.log(detail)\n})\n.catch(err => {\n  console.log(err)\n})\n```\n\n虽然我们解决了回调嵌套导致的混乱代码问题，但是并没有真正意义上消除回调函数带来的臃肿写法，你会发现使用Promise之后仅仅只是从横向嵌套变成了纵向嵌套。\n\n这正是 **async \u002F await 要解决的问题**，它们是一种更加简便的写法。我们可以将一个函数声明为`async`：\n\n```js\nasync function fn() {\n    return 100\n}\n```\n\n你可能会觉得：这不就是个普通函数吗？但实际这个函数得到的是一个Promise对象：\n\n![image-20260211010108476](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F3iiJ\u002Fimage-20260211010108476.png)\n\n实际上，当一个函数被声明为`async`时，它的返回值会被自动包装成一个`fulfilled`状态的Promise对象，就像我们在`then`中返回一样。此外，我们也可以直接返回一个Promise对象作为结果：\n\n```js\nasync function fn() {\n    return Promise.resolve(\"任务完成了\")\n}\n\nfn().then(data => {   \u002F\u002F可以直接对这个函数的结果使用then\n    console.log(data)\n})\n```\n\n同样的，当这个函数内部出现错误或是手动调用了`reject`，那么这里也会得到一个`rejected`状态的返回值。所以，直接调用一个`async`函数，会直接将返回值作为结果包装，如果没有返回值，那么也会得到一个结果为`undefined`的Promise对象。\n\n但是，光有`async`还不行，它只是简单得到一个Promise对象作为结果，我们需要配合`await`来实现等待结果：\n\n```js\nasync function fn() {\n  \t\u002F\u002F使用await来等待一个Promise完成，此时会卡住等待Promise状态更新，完成后Promise的结果直接作为返回值\n  \t\u002F\u002F如果await后面的不是Promise，那么会直接包装成已完成状态的Promise对象\n    const result = await new Promise(resolve => {\n        setTimeout(() => resolve(\"任务完成了\"), 1000)\n    })\n    return result\n}\n```\n\n`await`只能放到`async`函数的内部，无法在其他非`async`函数中使用。它的效果是等待后面的Promise完成，当完成之后，会直接得到Promise的结果作为值，然后再继续执行后续代码，类似于暂停的效果。如果Promise执行失败，这里直接抛出错误：\n\n```js\nasync function fn() {\n    \u002F\u002F使用await来等待一个Promise完成，此时会卡住等待Promise状态更新，完成后Promise的结果直接作为返回值\n    const result = await new Promise((resolve, reject) => {\n        setTimeout(() => reject(\"任务失败了\"), 1000)\n    })\n    return result\n}\n```\n\n![image-20260211011532951](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F5rRi\u002Fimage-20260211011532951.png)\n\n相当于这个`saync`函数执行失败，返回的Promise状态也会更新为`rejected`。有了`await`之后，你会发现，**代码从“回调结构”，变成了“顺序结构”**。我们还是以之前的回调地狱为例，此时代码就可以写成这样：\n\n```js\nasync function fn() {\n    \u002F\u002F使用await对每个任务依次等待\n    await new Promise(resolve => setTimeout(() => resolve(\"任务一完成了\"), 1000))\n    await new Promise(resolve => setTimeout(() => resolve(\"任务二完成了\"), 1000))\n    await new Promise(resolve => setTimeout(() => resolve(\"任务三完成了\"), 1000))\n}\n\nfn().then(() => {\n    console.log(\"任务全部完成啦\")\n})\n```\n\n可以看到，我们前面的一连串回调函数被全部做成顺序调用的形式了，我们通过`async\u002Fawait`消除了大量的回调函数，它是`then`链的一种替代写法，能够让代码更加简洁，所以很多人说`await`就是`Promise.then`的语法糖，本质上还是不断的`then`调用。\n\n当然，很多新手有一个误区，就是执行`async`函数时的同步异步问题：\n\n```js\nconsole.log(3)\nfn()   \u002F\u002Ffn会直接得到一个pending状态的Promise，而不是阻塞\nconsole.log(4)  \u002F\u002F所以继续执行，而不是等fn执行完\n```\n\n实际上，`await` **只会阻塞当前 async 函数**，不会阻塞主线程。同样的，直接在外面`await`用也是不行的：\n\n```js\nawait fn()\nconsole.log(\"fu执行完了\")\n```\n\n![image-20260211012359332](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F9mrH\u002Fimage-20260211012359332.png)\n\n只不过，它可以在ES模块的顶级作用域使用，有关模块化的概念我们会在后面进行介绍。需要注意的是，如果多个Promise需要并发执行而不是顺序执行，我们可以考虑使用`all`来进行整合：\n\n```js\nasync function fn() {\n    \u002F\u002F使用await对总Promise进行等待，这样就能实现并发执行\n    await Promise.all([\n        new Promise(resolve => setTimeout(() => resolve(\"任务一完成了\"), 1000)),\n        new Promise(resolve => setTimeout(() => resolve(\"任务二完成了\"), 2000)),\n        new Promise(resolve => setTimeout(() => resolve(\"任务三完成了\"), 3000))\n    ])\n}\n\nfn().then(() => {\n    console.log(\"fu执行完了\")\n})\n```\n\n很多人说，`async\u002Fawait`是 **Promise** 的语法糖，这种说法不完全正确，实际上它的实现原理是我们之前介绍的生成器，我们可以用 Generator 手动模拟其行为：\n\n```js\nfunction* generator() {\n    yield new Promise(resolve => {\n        setTimeout(() => resolve(\"任务一完成了\"), 1000)\n    })\n    yield new Promise(resolve => {\n        setTimeout(() => resolve(\"任务二完成了\"), 1000)\n    })\n}\n\nfunction fn() {\n    const iterator = generator();\n\n    function handle(result) {\n        if (result.done) return Promise.resolve(result.value);\n        return Promise.resolve(result.value)\n            .then(res => handle(iterator.next(res)))\n            .catch(err => handle(iterator.throw(err)));\n    }\n\n    return handle(iterator.next());\n}\n\nfn().then(() => {\n    console.log(\"fu执行完了\")\n})\n```\n\n所以，`await`本质上是 **Generator 函数 + Promise** 的语法糖，核心是依靠生成器来实现的暂停效果，当然，我们无需在关心它最终会等价于什么样的代码，直接爽用就完了。\n\n### 异步迭代\n\n既然普通函数可以变成`async`，那么生成器也可以是异步生成器 `async function*`\n\n```js\nasync function* gen() {\n  yield 1\n  yield await Promise.resolve(2)\n  yield 3\n}\n```\n\n可以看到，虽然这也是一个生成器，但是它的每个阶段上有可能会出现`await`进行等待，并且最终的返回结果也是一个Promise：\n\n```js\nconst generator = gen();\nconsole.log(generator.next());   \u002F\u002F得到一个Promise对象\n```\n\n这样，我们就可以实现：\n\n```js\nfunction delay(val, ms) {\n  return new Promise(resolve => {\n    setTimeout(() => resolve(val), ms)\n  })\n}\n\nasync function* gen() {\n  yield await delay(1, 1000)\n  yield await delay(2, 1000)\n  yield await delay(3, 1000)\n}\n```\n\n可以看到，这里的`yield`的结果就是等到Promise结束的值。所以每次`next`被调用时，都会由于`await`进行等待，直到出现结果后，才能从`next`得到的Promise进行通知，并暂停生成器。\n\n```js\nasync function test() {\n    const generator = gen();   \u002F\u002F得到异步迭代器\n    const data = await generator.next()  \u002F\u002F等待Promise结束\n    console.log(data)  \u002F\u002F得到此阶段结果\n}\n```\n\n我们也可以尝试遍历这个生成器：\n\n```js\nfor (const x of generator) {\n    const data = await x\n    console.log(data)\n}\n```\n\n但是程序会得到错误的结果，因为这种方式看似可以，实际上并不支持，因为`for..of`不支持异步迭代器。\n\n对于这种情况，我们可以使用`for await of`语句，效果等价：\n\n```js\nfor await (const value of gen()) {  \u002F\u002F专用于异步迭代器的for..of\n    console.log(value)\n}\n```\n\n至此，有关Promise的内容，就全部为大家介绍完毕了。\n\n### 事件循环（选学）\n\n实际上，JS的执行是单线程的，所谓单线程，就像是同一时间只有一个人来做事情，他手上如果已经在做事情了，那么其他的事情需要等待他干完手上的活才能继续。这个时候，很多新手都会产生一个巨大的疑问：\n\n> JS 不是单线程吗？那为什么 setTimeout、Promise、网络请求看起来像是“同时在跑”？\n\n答案就藏在 JavaScript 非常核心的一套机制中：**事件循环（Event Loop）**理解事件循环，你就理解了整个JS程序的执行底层原理和流程，这对你未来的发展非常关键，这几乎是每一个JS开发者深入底层前必须掌握的知识点。\n\n我们先来看一个非常让人费解的现象：\n\n```js\nconsole.log(\"A\")\nsetTimeout(() => {\n    console.log(\"B\")\n}, 0)   \u002F\u002F这里延迟0，那应该是立即执行才对\nconsole.log(\"C\")\n```\n\n实际上，这个代码并没有按照顺序进行，哪怕`setTimeout`的延迟为`0`。\n\n我们来逐步剖析这个问题，实际上在 JS 中，有一个非常重要的结构，叫做 **执行栈（调用栈 \u002F Call Stack）**，为了维护函数的调用顺序，它存储着当前正在执行的函数队列（后进先出）比如：\n\n```js\nfunction a() {\n    b()\n}\n\nfunction b() {\n    console.log(\"B\")\n}\n\na()\n```\n\n执行过程是：\n\n1. `a()` 入栈\n2. `b()` 入栈\n3. `console.log` 执行\n4. `b()` 出栈\n5. `a()` 出栈\n\n只要**执行栈不为空**，JS 就不会去处理任何异步任务。当 JS 遇到异步 API（比如 `setTimeout`）时，并不是 JS 自己在计时：\n\n```js\nsetTimeout(fn, 1000)\n```\n\n真实过程是：JS 把 `setTimeout` 交给 **浏览器** -> 浏览器负责计时 -> 时间到了，把回调函数交还给 JS，也就是说，异步任务本身，不在 JS 的执行栈里。\n\n当异步任务完成后（比如时间到了），回调函数并不会立刻执行，而是会被放进到**任务队列（Task Queue）**中。而事件循环，其实就是不断检查函数的执行栈是否为空，当JS的执行栈是空时，就会从任务队列取出一个任务执行，就像是两波人错峰执行任务一样。这种错峰执行的机制，就是 JS 能在单线程下处理“并发”的根本原因。\n\n所以，这里我们来总结一下上面的ABC为什么顺序不正确，还是按照执行顺序分析：\n\n1. 首先`console.log(\"A\")`这是同步任务，直接在主线程中执行，控制台输出。\n2. 遇到 `setTimeout(() => { console.log(\"B\") }, 0)` 它是一个**异步任务**，被交给浏览器并进行计时。\n3. 由于时间本来就是`0`，会立即把回调函数 `() => { console.log(\"B\") }` 放入**任务队列**。\n4. 此时主线程不会等待，而是继续执行后面的同步代码 `console.log(\"C\")`。\n5. 当主线程中的所有同步任务执行完后，会检查任务队列，此时任务队列中有一个任务：`console.log(\"B\")`\n6. 主线程会把这个任务取出，放入执行栈中执行，控制台输出：`B`。\n\n所以代码的最终输出顺序是：ACB，这下，你应该理解了JS的异步原理和具体执行流程了，所以本质上它依然是同步的。通过这种机制，我们也可以推出，`setTimeout`其实是不准的，如果主线程很忙，那么实际执行时间可能远远超过 1 秒。\n\n我们接着来详细介绍一下任务队列，在任务队列中，任务并不是只有一种。第一类任务，叫做 **宏任务（Macro Task）**，常见的有：\n\n- `setTimeout`\n- `setInterval`\n- `setImmediate`（Node）\n- DOM 事件回调\n- 网络请求回调\n\n除了宏任务，还有一类**优先级更高**的任务，叫做 **微任务（Micro Task）**常见的微任务有：\n\n- `Promise.then \u002F catch \u002F finally`\n- `await`之后的代码（因为后续代码本质就是Promise.then，也就是创建了新的微任务）\n- `queueMicrotask`\n- `MutationObserver`\n\n事件循环的执行顺序是：执行当前宏任务（通常是整段同步代码） ->  执行过程中产生的 **所有微任务 ** -> 微任务清空后 -> 才会执行下一个宏任务，所以**微任务永远比宏任务先执行**，实际上会有两个不同优先级的任务队列，一个是宏任务队列，一个是微任务队列。我们来看这个例子：\n\n```js\nconsole.log(\"A\")\nsetTimeout(() => console.log(\"B\"), 0)\nPromise.resolve().then(() => console.log(\"C\"))\nconsole.log(\"D\")\n```\n\n我们来拆解一下它的执行过程：\n\n1. 同步代码执行，也就是说这里会先得到 A\n2. `setTimeout` 是宏任务，所以进入宏任务队列\n3. `Promise.then` 是微任务，所以直接放进微任务队列\n4. 同步代码执行，也就是说这里会得到 D，此时同步代码执行完毕\n5. 按照规则，此时微任务队列中存在微任务，优先执行微任务，得到 C\n6. 最后再从宏任务队列中执行宏任务，得到 B\n\n最终输出顺序是，A、D、C、B，需要注意的是，如果微任务执行过程中，如果又产生新的微任务，会继续执行，直到清空，例如：\n\n```js\nsetTimeout(() => console.log(3), 0)\nPromise.resolve().then(() => {\n    console.log(1)\n    Promise.resolve().then(() => {  \u002F\u002F内部调用的then等于下崽\n        console.log(2)\n    })\n}).then(() => {  \u002F\u002F连续调用的then也等于下崽\n    console.log(4)\n})\n```\n\n这里的结果是：1、2、4、3，因为微任务下崽了，此时有新的微任务进入队列，那么还得继续处理完再去管宏任务。当然，这里介绍的事件循环机制是基于Web环境，在Node环境中可能会稍有不同，但主要思路是大体相同的。\n\n## 模块化\n\n在 JavaScript 中，**模块就是一个“独立作用域的代码单元”**，它通常具备几个特征：有自己独立的作用域、对外只暴露指定的接口、内部实现细节对外不可见、可以被其他模块复用。\n\n在没有模块化之前，常见写法是这样的：\n\n```js\n\u002F\u002Fscript.js\nconst a = 100\n```\n\n```js\n\u002F\u002Ftest.js\nconst a = 200\n```\n\n此时在同一个HTML文件中引入这两个JS文件：\n\n```html\n\u003Cscript src=\"js\u002Fscript.js\">\u003C\u002Fscript>\n\u003Cscript src=\"js\u002Ftest.js\">\u003C\u002Fscript>\n```\n\n这种情况下，浏览器会直接报错。我们知道，很多时候我们都需要用到别人提供的JS库，如果别人的库和我们的变量存在冲突，那么岂不是就乱套了？所以，模块化就是为了解决这个问题而生的。\n\n### 模块化的发展\n\n在 JavaScript 诞生之初，它的定位其实非常简单：**给网页加点交互效果**，当时的 JavaScript 代码规模通常只有几十行，甚至直接写在 HTML 里：\n\n```html\n\u003Cscript>\n  var count = 0\n  function add() {\n    count++\n  }\n\u003C\u002Fscript>\n```\n\n在这种体量下，**根本谈不上模块化**，因为所有代码都跑在同一个作用域中，看起来也“没什么问题”。随着前端逐渐变复杂，代码开始被拆分成多个文件：\n\n```html\n\u003Cscript src=\"a.js\">\u003C\u002Fscript>\n\u003Cscript src=\"b.js\">\u003C\u002Fscript>\n\u003Cscript src=\"c.js\">\u003C\u002Fscript>\n```\n\n但问题也随之而来：\n\n* 所有变量默认挂在全局作用域\n* 不同文件之间**极易发生命名冲突**\n* 文件加载顺序强依赖 HTML 中的书写顺序\n* 无法明确表达“谁依赖谁”\n\n后加载的文件会直接覆盖前面的变量或是与前面的变量发生冲突，这在大型项目中几乎是灾难。为了解决全局污染问题，开发者开始**主动制造“命名空间”**：\n\n```js\nvar App = {}   \u002F\u002F利用一个特殊名称的对象来存储当前命名空间下的变量和函数\n\nApp.count = 0\nApp.add = function () {\n  App.count++\n}\n```\n\n虽然这种方式可以在一定程度上避免大量全局变量导致的冲突，但是它本质还是全局变量，依然有可能出现冲突，也无法真正隐藏内部实现，甚至容易被意外修改。后来，大家开始利用**函数作用域**来“模拟模块”：\n\n```js\nvar counter = (function () {\n  var count = 0   \u002F\u002F 私有变量\n\n  function add() {\n    count++\n    return count\n  }\n\n  return {   \u002F\u002F返回一个对象，将函数内部的属性通过返回值给出去，这样外面就没办法看到实现细节了\n    add\n  }\n})()\n```\n\n这种写法第一次真正实现了私有变量，内部实现不可直接访问，但问题也很明显，这种写法太繁琐了。随着前端工程化需求的爆发，社区开始尝试**标准化模块方案**：\n\n* **CommonJS**（Node.js）\n* **AMD**（浏览器异步加载）\n* **CMD**（SeaJS）\n\n这些规范第一次提出了统一思想：一个文件就是一个模块，这一步，标志着 JavaScript **真正进入模块化时代**。虽然社区方案解决了很多问题，但它们都存在一个共同点：不是 JavaScript 语言本身的一部分。直到 ES6（ES2015），官方终于给出了答案，引入了`import`和`export`关键字，至此，模块化正式成为 **语言级能力**，不再依赖外部规范或工具。\n\n### ES Module\n\n前面我们已经看到，CommonJS、AMD 等模块方案，本质上都属于**社区规范**。虽然它们解决了实际问题，但始终存在一个核心缺陷：模块化并不是 JavaScript 语言自身的能力。直到 ES6（ES2015），JavaScript 才正式引入官方模块方案 —— **ES Module（简称 ESM）**\n\n在 ES Module 中，有一个非常重要的规则，只要使用了 `import` 或 `export`关键字，那么这个文件就会被当成一个模块\n\n```js\nexport const a = 200\n```\n\n这个文件天然具备独立作用域，不污染全局，所有需要暴露的属性使用`export`来明确。要引入模块化的JS文件，我们需要在引入时添加类型：\n\n```html\n\u003Cscript type=\"module\" src=\"js\u002Ftest.js\">\u003C\u002Fscript>\n```\n\n我们可以使用`export`导出所有我们想要导出给外面的内容：\n\n```js\n\u002F\u002F导出常量和变量\nexport const age = 18\nexport let count = 0\n\n\u002F\u002F导出函数\nexport function sayHi() {\n    console.log(\"Hi\")\n}\n\n\u002F\u002F导出类（本质就是导出构造函数）\nexport class Student {}\n```\n\n你也可以把这些需要导出的东西统一装到一个对象中一起导出：\n\n```js\nconst a = 1\nconst b = 2\n\nexport { a, b }\n```\n\n不过需要注意的是，`export` **只能写在顶层作用域**，不能写在 if \u002F for \u002F 函数这类代码块内部。一旦使用模块化机制，这些导出的属性无法直接被访问，需要导入之后才可以：\n\n![image-20260211120535502](https:\u002F\u002Ffiles.seeusercontent.com\u002F2026\u002F02\u002F11\u002F9fOo\u002Fimage-20260211120535502.png)\n\n在其他ES模块使用`import`来进行导入，同样只能在最外层使用，这里建议大家写到文件的最顶部：\n\n```js\n\u002F\u002F导入其他模块的age变量，属性需要使用花括号囊括，因为导出的内容不止一个，这里类似于解构\nimport {age} from \".\u002Ftest.js\"\n\nconsole.log(age)\n```\n\n注意这里的`from`后面是导入的文件路径，这个路径必须是静态的，不能是变量，并且变量或者函数的名称必须与导出一致，当然，如果导入的属性和当前模块的变量名称冲突，我们也可以使用`as`来起别名：\n\n```js\nimport { age as testAge } from \".\u002Ftest.js\"\n\nconsole.log(testAge)\n```\n\nES Module 还支持**默认导出**，但是注意一个模块只能有一个：\n\n```js\nexport default function () {\n    console.log(\"default\")\n}\n```\n\n当属性采用默认导出时，我们导入可以直接使用一个自定义的名字：\n\n```js\n\u002F\u002F因为默认导出只有一个，所以名字可以随便起，也不需要花括号\nimport test from \".\u002Ftest.js\"\n\nconsole.log(test)\n```\n\n当然同时存在普通导出和默认导出时，我们可以混合使用：\n\n```js\n\u002F\u002F默认导出依然随便起名字，其他属性继续花括号\nimport test, { age } from \".\u002Ftest.js\"\n\nconsole.log(test)\n```\n\n最后注意的是，在浏览器中，使用 ES Module 会自动具备以下特性：\n\n- 默认使用 `defer`属性，开启异步加载，不会阻塞HTML渲染\n- 自动开启严格模式\n- 支持顶级 `await`（模块环境）\n\n由于模块本身就是异步加载的，当我们采用模块化时，JS文件将直接支持在最外层作用域中直接使用`await`：\n\n```js\nasync function test() {\n    const { promise, reject, resolve } = Promise.withResolvers()\n    setTimeout(() => resolve(), 1000)\n    return promise\n}\n\nawait test()  \u002F\u002F会阻塞后续语句执行\nconsole.log(\"我是后续语句\")\n```\n\n有关严格模式的内容，我们将在下一节继续介绍。\n\n### 严格模式\n\n**严格模式（Strict Mode）** 是 JavaScript 提供的一种**更严格的语法和运行规则**，它的目标只有一个：让代码更安全、更规范、更容易发现错误。在严格模式下，一些“以前能跑但其实不合理”的代码，会**直接报错**。\n\n在早期 JavaScript 中，为了“尽量不报错”，语言本身允许了大量**不严谨的写法**，例如：\n\n```js\na = 10   \u002F\u002F 实际上根本没有声明变量\nconsole.log(a)\n```\n\n这段代码由于没有开启严格模式，即使我们不使用关键字，也会自动创建一个变量`a`，这显然是不合理的。而这行代码在严格模式下，将在执行阶段直接报错，我们只需要在JS文件的顶部写上`\"use strict\"`表示开启严格模式：\n\n```js\n\"use strict\"\n\na = 10   \u002F\u002F直接报错\n```\n\n严格模式的作用，就是**把这些潜在问题直接暴露出来**，防止后续出现的一些安全隐患。除了在全局作用域下使用严格模式，我们也可以在局部作用域使用：\n\n```js\nfunction fn() {\n  \"use strict\"\n  x = 10   \u002F\u002F ❌ 报错\n}\n```\n\n但是无论处于哪个作用域，`\"use strict\"`只能写到所属作用域的最顶部。\n\n此外，在严格模式下，最外层作用域的`this`实际上不指向任何对象：\n\n```js\nfunction fn() {\n  console.log(this)   \u002F\u002Fundefined\n}\n\nfn()\n```\n\n这可以防止`this`意外指向全局对象，隐式污染全局状态，有关严格模式的所有限制大致如下：\n\n- 变量必须声明后再使用\n- 函数参数不能有同名属性，否则报错\n- 不能使用 `with` 语句\n- 不能对只读属性赋值，否则报错\n- 不能使用前缀 0 表示八进制数，否则报错\n- 不能删除不可删除的属性，否则报错\n- 不能删除变量 `delete prop`，会报错，只能删除属性 `delete global[prop]`\n- `eval` 不会在它的外层作用域引入变量\n- `eval` 和 `arguments` 不能被重新赋值\n- `arguments` 不会自动反映函数参数的变化\n- 不能使用 `arguments.callee`\n- 不能使用 `arguments.caller`\n- 禁止 `this` 指向全局对象\n- 不能使用 `fn.caller` 和 `fn.arguments` 获取函数调用的堆栈\n- 增加了保留字（比如 `protected`、`static` 和 `interface`）\n\n也可以参阅MDN文档：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FStrict_mode，查看更多细节内容。\n\n至此，有关JavaScript的所有基础语法和内置库部分，就暂时到这里为止，如果你的目标是学习Web开发，请继续学习我们第四章的内容，如果你是做后端开发，可以直接开启前端工程化的课程学习。\n\n## 本章练习\n\n### 两数之和（力扣竞赛）\n\n题目地址：https:\u002F\u002Fleetcode.cn\u002Fproblems\u002Ftwo-sum\u002Fdescription\u002F\n\n给定一个整数数组 `nums` 和一个整数目标值 `target`，请你在该数组中找出 **和为目标值** *`target`* 的那 **两个** 整数，并返回它们的数组下标。\n\n```\n输入：nums = [2,7,11,15], target = 9\n输出：[0,1]\n解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。\n```\n\n```\n输入：nums = [3,2,4], target = 6\n输出：[1,2]\n```\n\n### 打家劫舍（力扣竞赛）\n\n题目地址：https:\u002F\u002Fleetcode.cn\u002Fproblems\u002Fhouse-robber\u002Fdescription\u002F\n\n你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，**如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警**。\n\n给定一个代表每个房屋存放金额的非负整数数组，计算你 **不触动警报装置的情况下** ，一夜之内能够偷窃到的最高金额。\n\n```\n输入：[1,2,3,1]\n输出：4\n解释：偷窃 1 号房屋 (金额 = 1) ，然后偷窃 3 号房屋 (金额 = 3)。\n     偷窃到的最高金额 = 1 + 3 = 4 。\n```\n\n```\n输入：[2,7,9,3,1]\n输出：12\n解释：偷窃 1 号房屋 (金额 = 2), 偷窃 3 号房屋 (金额 = 9)，接着偷窃 5 号房屋 (金额 = 1)。\n     偷窃到的最高金额 = 2 + 9 + 1 = 12 。\n```\n\n### 选择题精选\n\n1. 关于 JSDoc 注释，下列说法**正确**的是？\n\n   A. `@param` 后面的类型只用于文档，对编辑器无任何意义\n   B. `@returns` 只能写在函数体内部\n   C. 使用 `\u002F** *\u002F` 才能被大多数编辑器识别为函数注释\n   D. JSDoc 注释会影响函数运行结果\n\n2. 以下关于 IIFE（即时调用函数）的说法，哪一项是**错误**的？\n\n   A. IIFE 可以创建一个独立作用域\n   B. IIFE 在 ES6 之前常用于解决 `var` 作用域问题\n   C. IIFE 中定义的变量无法被外部访问\n   D. IIFE 在 ES6 之后完全被废弃，已经无法使用\n\n3. 关于 `arguments` 和剩余参数，下列说法**正确**的是？\n\n   A. 剩余参数和 `arguments` 都是真数组\n   B. 箭头函数可以正常使用 `arguments`\n   C. 剩余参数只能写在参数列表的最后\n   D. 剩余参数会自动忽略多余的实参\n\n4. 执行以下代码，输出结果是？\n\n   ```js\n   function test(a, ...rest) {\n     console.log(rest.length)\n   }\n   test(1, 2, 3, 4)\n   ```\n\n   A. 1    B. 2    C. 3     D. 4\n\n5. 关于箭头函数，下列哪一项描述**最准确**？\n\n   A. 箭头函数的 `this` 在调用时动态绑定\n   B. 箭头函数的 `this` 由定义时的作用域决定\n   C. 箭头函数可以通过 `bind` 修改 `this`\n   D. 箭头函数和普通函数的 `this` 行为完全一致\n\n6. 以下哪种箭头函数写法是**合法且返回对象**的？\n\n   A. `() => { name: \"Tom\" }`\n   B. `() => ({ name: \"Tom\" })`\n   C. `() => return { name: \"Tom\" }`\n   D. `() => [ name: \"Tom\" ]`\n\n7. 以下代码执行后，`this` 指向的是？\n\n   ```js\n   const obj = {\n       name: '胖猫',\n       say() {\n           setTimeout(() => {\n               console.log(this.name)\n           })\n       }\n   }\n   ```\n\n   A. 对象本身\n   B. 调用 fn 的对象\n   C. 全局对象（浏览器中为 window）\n   D. undefined\n\n8. 以下代码执行后，`this` 指向的是？\n\n   ```js\n   const obj = {\n       name: '胖猫',\n       say() {\n           setTimeout(function () {\n               console.log(this.name)\n           }, 1000)\n       }\n   }\n   ```\n\n   A. fn 本身\n   B. 调用 fn 的对象\n   C. 全局对象（浏览器中为 window）\n   D. undefined\n\n9. 关于数组解构，下列说法**错误**的是？\n\n   A. 数组解构是按位置匹配\n   B. 可以通过逗号跳过元素\n   C. 解构失败时会抛出异常\n   D. 可以设置默认值\n\n10. 执行以下代码，`b` 的值是？\n\n    ```js\n    const arr = [10]\n    const [a, b = 20] = arr\n    ```\n\n    A. undefined    B. null    C. 10    D. 20\n\n11. 关于对象解构，下列哪项说法**正确**？\n\n    A. 对象解构按属性顺序匹配\n    B. 解构变量名必须与属性名一致，无法重命名\n    C. 不存在的属性解构结果为 undefined\n    D. 对象解构不支持默认值\n\n12. 以下代码执行结果是？\n\n    ```js\n    const obj = { a: 1, b: 2, c: 3 }\n    const { a, ...rest } = obj\n    console.log(rest)\n    ```\n\n    A. `{}`\n    B. `{ a: 1 }`\n    C. `{ b: 2, c: 3 }`\n    D. `[2, 3]`\n\n13. 关于展开运算符，下列哪项描述**错误**？\n\n    A. 展开数组可以实现浅拷贝\n    B. 展开对象时属性冲突，后者覆盖前者\n    C. 展开运算符可以深拷贝嵌套对象\n    D. 展开数组可用于函数参数传递\n\n14. 标签模板函数中，第一个参数 `strs` 的特点是？\n\n    A. 字符串拼接后的最终结果\n    B. 插值表达式计算后的值数组\n    C. 按插值位置切割后的字符串数组\n    D. 原始模板字符串\n\n15. 关于标签模板，下列哪项是**正确用途**？\n\n    A. 提高字符串拼接性能\n    B. 防止 XSS 注入\n    C. 替代 JSON.parse\n    D. 自动国际化所有字符串\n\n16. 调用生成器函数后，返回的是？\n\n    ```js\n    function* gen() {}\n    const g = gen()\n    ```\n\n    A. 普通函数\n    B. Promise\n    C. 生成器对象\n    D. undefined\n\n17. 关于 `yield` 的作用，下列说法**正确**的是?\n\n    A. `yield` 会结束整个函数\n    B. `yield` 只能使用一次\n    C. `yield` 会暂停函数执行并返回一个值\n    D. `yield` 等价于 `return`\n\n18. 关于“属性继承 + call”的组合，下列哪项是其主要目的？\n\n    A. 复制父类方法\n    B. 建立原型链\n    C. 初始化父类的实例属性\n    D. 修改 constructor 指向\n\n19. 以下哪一行代码**必须写在子类构造函数最前面**？\n\n    A. `this.level = level`\n    B. `extends Student`\n    C. `super(name, age)`\n    D. `constructor()`\n\n20. 关于 `class` 的本质，下列哪项描述**最准确**？\n\n    A. class 是一种全新的类型\n    B. class 是构造函数的语法糖\n    C. class 不使用原型链\n    D. class 无法进行继承\n\n21. 关于私有属性 `#`，下列哪项是**错误**的？\n\n    A. 只能在类内部访问\n    B. 不会出现在对象属性枚举中\n    C. 可以通过 `this[\"#x\"]` 访问\n    D. 是 ES2022 引入的特性\n\n### 事件循环专题练习\n\n请自行推断出下列代码的执行结果：\n\n```js\nconsole.log('start');\n\nsetTimeout(() => {\n  console.log('timeout1');\n  \n  Promise.resolve().then(() => {\n    console.log('promise1');\n  });\n}, 0);\n\nPromise.resolve().then(() => {\n  console.log('promise2');\n\n  setTimeout(() => {\n    console.log('timeout2');\n  }, 0);\n});\n\nqueueMicrotask(() => {\n  console.log('microtask');\n});\n\nconsole.log('end');\n```\n\n请自行推断出下列代码的执行结果：\n\n```js\nconsole.log('script start');\n\nsetTimeout(() => {\n    console.log('setTimeout');\n}, 0);\n\nPromise.resolve()\n    .then(() => {\n        console.log('promise1');\n        setTimeout(() => {\n            console.log('promise1 -> setTimeout');\n        }, 0);\n    })\n    .then(() => {\n        console.log('promise2');\n    });\n\nasync function async1() {\n    console.log('async1 start');\n    await async2();\n    console.log('async1 end');\n}\n\nasync function async2() {\n    console.log('async2');\n}\n\nasync1();\n\nconsole.log('script end');\n```","前面我们为大家介绍了JS的函数和面向对象，我们知道在JS中，万物皆对象，随便什么类型都可以当做对象使用，本章我们将承接上文，继续介绍JavaScript的高级特性部分。","2026-02-12 15:27:44",{"data":468,"status":460,"success":461},[469,474],{"id":8,"image":470,"link":471,"name":472,"type":473},"\u002Fimage\u002Fadv\u002Frainyun-2025-06.webp","https:\u002F\u002Fwww.rainyun.com\u002Fitbaima_","雨云优惠购","cloud",{"id":66,"image":475,"link":476,"name":477,"type":478},"\u002Fimage\u002Fadv\u002Fsimcard-2025-11.webp","https:\u002F\u002Fmall.itbaima.cn","号卡优惠","simcard"]