「万字总结」熬夜总结50个JS的高级知识点，全都会你就是神

以下是50个JS高级知识点的总结：

1. 变量声明与定义

   • undeclared与undefined：undeclared表示变量未被声明，undefined表示变量已被声明但未被赋值。

2. 变量声明关键字

   • let、const与var：分别用于声明局部变量、常量和全局变量。

3. 暂时性死区

   • 在变量声明之前访问该变量会得到ReferenceError，而不是undefined。

4. DOM操作

   • 获取DOM元素：getElementById、querySelector、querySelectorAll等。
   • 操作DOM元素：innerHTML、appendChild、removeChild等。
   • DOM类型：包括Element、Node、NodeList等共12种。

5. 作用域与作用域链

   • 作用域：分为全局作用域和函数作用域。
   • 作用域链：使得变量在不同作用域下可以隔离。

6. 数组与字符串方法

   • splice与slice：分别用于修改和提取数组元素。
   • substr和substring：用于提取字符串子串，但substring更安全。
   • includes与indexOf：includes方法更优秀于indexOf，因为它可以检测NaN。

7. 异步编程

   • Promise：用于解决异步编程中的回调地狱问题。
   • async/await：进一步简化了Promise的使用，使其更接近同步代码。

8. 正则表达式

   • 常用正则表达式可以提高代码效率，帮助高效地处理文本数据。

9. 页面加载优化

   • 延迟加载：使用defer或async属性的脚本标签，优化页面加载性能。

10. 对象创建

    • new操作符：通过构造函数创建实例对象。

11. 文档碎片

    • 用于高效地创建和管理DOM元素，节省内存和提高性能。

12. 错误处理

    • async/await与try/catch：优雅地处理异步代码中的错误。

13. 事件循环

    • 宏任务与微任务：执行顺序由事件循环控制，主要依赖于Promise和setTimeout等。

14. 对象属性描述符

    • Object.defineProperty：允许自定义目标对象的属性描述符，提供更细粒度的控制。

15. 函数优化策略

    • 防抖与节流：优化函数执行频率的策略，适用于处理频繁触发的事件。

16. 高阶函数

    • 将函数作为参数或返回值的函数，如map、reduce、filter等。

17. 函数柯里化

    • 将多个参数的函数转换为接收一系列单个参数的函数。

18. compose函数

    • 用于组合多个函数，实现复杂的逻辑。

19. 箭头函数

    • 与普通函数在语法糖上有所不同，主要体现在this指向、参数列表和表达式等方面。

20. Symbol

    • 提供一种独特的属性名，用于避免属性冲突并替代常量。

21. 模块规范

    • AMD与CMD：解决了模块加载问题。
    • CommonJS与ES6 Module：在服务器端和浏览器端各有优势。

22. ES6ES12语法

    • 提供了丰富的特性，如let和const、箭头函数、Promise等。

23. 特殊值比较

    • ：当a为NaN时，表达式可能为true。

24. 函数length属性

    • 表示函数的参数数量，通过函数定义来设置。

25. MUL函数

    • 表示简单的乘法运算，通过递归调用实现。

26. 遍历策略

    • 深度遍历与广度遍历：解决树或图问题的两种策略。

27. 设计模式

    • 如工厂模式、单例模式等，是解决常见编程问题的通用解决方案。

28. 循环控制

    • forEach：不能直接使用break或return跳出循环，可采用try/catch或递归实现。

29. 页面重定向

    • 通过window.location.href或window.history.pushState等方法实现。

30. 原生方法实现

    • 实现常用的JS原生方法如Math、Array、DOM等，提升代码可读性和复用性。

31. 事件处理

    • 鼠标事件：click、dblclick、mousedown等。
    • 键盘事件：onkeydown、onkeyup、onkeypress。

32. 元素信息获取

    • 通过DOM API获取元素的坐标、尺寸、视图尺寸等信息，如getBoundingClientRect、IntersectionObserver等。

33. 视图尺寸获取

    • 通过window.innerWidth、window.innerHeight等属性获取Window、Document视图的尺寸。

34. 高级DOM方法

    • 如getBoundingClientRect、IntersectionObserver等，提供更高效、更优雅的DOM操作。

35. DOM树遍历

    • createNodeIterator：用于遍历DOM树，实现对页面中所有元素的遍历。

36. CSS样式获取

    • getComputedStyle：用于获取元素的CSS样式，访问元素的CSS属性值。

37. 动画与性能优化

    • requestAnimationFrame：用于执行帧间动画，提高用户体验。
    • requestIdleCallback：允许在浏览器空闲时执行任务，优化性能。

38. 页面加载事件

    • DOMContentLoaded：在HTML文档加载和解析完成后触发，用于处理页面加载后的逻辑。

39. DOM结构检测

    • MutationObserver：用于检测DOM结构的更改，并在检测到更改时触发回调。

40. Promise处理

    • Promise.any：用于并行处理多个Promise，返回第一个成功的Promise或所有失败的Promise。

这些知识点涵盖了JS的高级特性、异步编程、DOM操作、性能优化等多个方面，掌握它们将大大提高你的JS编程能力。