Javascript 从入门到精通的学习路线

背景知识： 在学习Javascript之前，HTML/CSS基础知识时必备的

一般情况下，Javascript 是一个运行在浏览器上的脚本语言，使网页具有交互性。（另外：node.js可以运行在服务器环境，起步时不做详述）

交互性指的是： 操作页面的元素，比如点击按钮时弹出提示、页面实现一些动画；与服务器进行数据交互；处理用户的输入等场景。

  • 变量， 数据类型，function（函数）
  • Js表达式和语句
  • 数组（Array）以及其原生方法(Array.prototype.foreach, Array.prototype.indexOf, Array.prototype.join, Array.prototype.concat,Array.prototype.push,Array.prototype.pop,Array.prototype.shit,Array.prototype.unshift,Array.prototype.slice)
  • 对象（Object），以及其原生方法（遍历Object，Object.keys， Object.assign, Object.create, Object.entries）。
  • 操作Dom的原生API（创建DOM，改变DOM样式或者属性，删除DOM）
  • 事件监听和冒泡机制
  • 请求数据的原生API（Fetch）

学会这些， 恭喜你，你不是小白了！！可以实现绝大多数的页面了！！

  • 作用域和闭包
  • this, call, apply 和 bind
  • setTimeout, setInterval 和 requestAnimationFrame
  • 同步和异步
  • class
  • 原型链和原型方法，instanceof
  • Dom树和渲染过程，回流和重绘
  • 图片格式、加载过程、基础优化方法
  • Promise
  • 消息队列和事件循环，宏任务和微任务

了解了这些，你就可以去学习各类前端框架了，不论是Vue、react，还是框架使用、框架源码，你都可以知其然之气所以然。

当然你也可以继续进阶，钻研：

  • 递归
  • 数据结构和算法
  • JavaScript 引擎
  • 偏函数, 柯里化, Compose 和 Pipe
  • 常用函数的封装
  • …

如果你有需要详述的部分，可以评论留言，会将其展开详述。

JavaScript 函数式编程：从入门到精通的实战指南

JavaScript作为一种多范式编程语言，支持面向对象、命令式以及函数式编程。尤其是在现代开发中，函数式编程（FP）因其清晰、简洁的代码风格和强大的可维护性，逐渐成为许多开发者的首选编程范式。本文将从基础到高级，深入剖析JavaScript中的函数式编程理念与实践，帮助你掌握这一技能，并在实际项目中游刃有余地应用。

函数式编程（Functional Programming，FP）是一种编程范式，强调使用函数而不是状态和可变数据。FP的核心思想包括：

  • 不可变性：避免数据的改变，所有数据都是不可变的，任何对数据的修改都会产生新的数据。
  • 纯函数：纯函数是指同样的输入永远返回相同的输出，并且没有副作用（如修改外部状态）。
  • 高阶函数：高阶函数是指能够接受函数作为参数或返回函数的函数。
  • 函数组合：通过将多个简单的函数组合在一起，形成一个更复杂的操作。

函数式编程的优势主要体现在以下几个方面：

  • 简洁与可读性：通过纯函数和函数组合，代码结构更清晰，容易理解和维护。
  • 更少的副作用：函数式编程通过避免修改全局状态，减少了副作用，提高了程序的可预测性和可调试性。
  • 易于并行化：由于函数是纯的，不依赖于外部状态，函数式编程在并行计算中更具优势。

在JavaScript中，函数不仅可以作为变量赋值、传递，还能作为返回值返回。这使得JavaScript非常适合进行函数式编程。

这里的 operate 函数就是一个高阶函数，它接受一个函数 operation 作为参数。

在函数式编程中，我们尽量避免直接修改数据，而是创建数据的副本。这样做可以避免副作用，提高代码的可维护性。

纯函数的特征是输入相同，输出必定相同，并且没有副作用。在JavaScript中，保持函数纯净是编写可预测代码的关键。

在函数式编程中，我们应当尽量避免使用外部状态或修改外部变量。

高阶函数是接受一个或多个函数作为输入，并返回一个函数的函数。JavaScript通过内置的高阶函数，如 map()、filter() 和 reduce()，实现了数组操作的函数式编程风格。

函数式编程强调将多个小函数组合成更复杂的功能。在JavaScript中，函数组合是通过将多个函数的输出传递给下一个函数来实现的。

柯里化是将一个多参数的函数转化为一系列单参数函数的过程。通过柯里化，可以实现函数的部分应用，提高代码的复用性。

管道是函数组合的延伸，通常将多个函数连接成一个流，依次处理数据。虽然JavaScript本身没有内建的管道函数，但可以通过组合现有函数来实现类似效果。

函数式编程可以帮助开发者编写更加可维护、易扩展的代码。例如，在构建大型React应用时，可以利用函数式编程的理念，利用纯函数和不变性来管理应用状态，从而避免出现难以调试的副作用。

尽管函数式编程有很多优点，但它并不适用于所有场景。例如，对于性能要求非常高的应用，过度使用高阶函数和函数组合可能会导致性能问题。此外，函数式编程对初学者来说可能会有一定的学习曲线，特别是在理解不可变性和纯函数等概念时。

JavaScript的函数式编程不仅仅是一种代码风格，它代表了编写清晰、简洁、可维护代码的一种思维方式。通过理解和应用函数式编程的核心概念，如高阶函数、纯函数、函数组合等，你将能够写出更加健壮和高效的JavaScript代码。

从基础的函数使用，到高级的柯里化、函数组合，再到实际的应用场景，本文提供了一个从入门到精通的学习路径。希望你能通过本文的实践指南，掌握JavaScript中的函数式编程技巧，并在日常开发中提高代码质量和开发效率。

最全javascript学习指南，快速了解从入门到精通需要掌握哪些知识

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

通过使用指南和教程来学习如何用JavaScript语言编程。

一些基本问题，比如“JavaScript 是什么？”、“它是怎么样的？”、“它可以用来做什么？”；同时还讨论如变量、字符串、数值和数组等 JavaScript 的核心特性。我们需要关注常见的代码块类型，如条件语句，循环，函数和事件。如果你想进一步使用该语言撰写更有效率的代码，理解 JavaScript 面向对象的精髓是很重要的。

好吧，上面太全了，来点精简版：

肉容中包含了ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

ES6+常用的知识点结合如下：

  1. 前言
  2. ECMAScript 6简介
  3. let 和 const 命令
  4. 变量的解构赋值
  5. 字符串的扩展
  6. 字符串的新增方法
  7. 正则的扩展
  8. 数值的扩展
  9. 函数的扩展
  10. 数组的扩展
  11. 对象的扩展
  12. 对象的新增方法
  13. 运算符的扩展
  14. Symbol
  15. Set 和 Map 数据结构
  16. Proxy
  17. Reflect
  18. Promise 对象
  19. Iterator 和 for…of 循环
  20. Generator 函数的语法
  21. Generator 函数的异步应用
  22. async 函数
  23. Class 的基本语法
  24. Class 的继承
  25. Module 的语法
  26. Module 的加载实现
  27. 编程风格
  28. 读懂规格
  29. 异步遍历器
  30. ArrayBuffer
  31. 最新提案
  32. Decorator
  1. JavaScript 简介
  2. 手册与规范
  3. 代码编辑器
  4. 开发者控制台
  1. Hello, world!
  2. 代码结构
  3. 现代模式，\”use strict\”
  4. 变量
  5. 数据类型
  6. 交互：alert、prompt 和 confirm
  7. 类型转换
  8. 基础运算符，数学
  9. 值的比较
  10. 条件分支：if 和 \’?\’
  11. 逻辑运算符
  12. 空值合并运算符 \’??\’
  13. 循环：while 和 for
  14. \”switch\” 语句
  15. 函数
  16. 函数表达式
  17. 箭头函数，基础知识
  18. JavaScript 特性
  1. 在浏览器中调试
  2. 代码风格
  3. 注释
  4. 忍者代码
  5. 使用 Mocha 进行自动化测试
  6. Polyfill 和转译器
  1. 对象
  2. 对象引用和复制
  3. 垃圾回收
  4. 对象方法，\”this\”
  5. 构造器和操作符 \”new\”
  6. 可选链 \”?.\”
  1. 对象 — 原始值转换
  2. 数据类型
  3. 原始类型的方法
  4. 数字类型
  5. 字符串
  6. 数组
  7. 数组方法
  8. Iterable object（可迭代对象）
  9. Map and Set（映射和集合）
  10. WeakMap and WeakSet（弱映射和弱集合）
  11. Object.keys，values，entries
  12. 解构赋值
  13. 日期和时间
  14. JSON 方法，toJSON
  1. 递归和堆栈
  2. Rest 参数与 Spread 语法
  3. 变量作用域，闭包
  4. 旧时的 \”var\”
  5. 全局对象
  6. 函数对象，NFE
  7. \”new Function\” 语法
  8. 调度：setTimeout 和 setInterval
  9. 装饰器模式和转发，call/apply
  10. 函数绑定
  11. 深入理解箭头函数
  1. 属性标志和属性描述符
  2. 属性的 getter 和 setter
  1. 原型继承
  2. F.prototype
  3. 原生的原型
  4. 原型方法，没有 __proto__ 的对象
  1. Class 基本语法
  2. 类继承
  3. 静态属性和静态方法
  4. 私有的和受保护的属性和方法
  5. 扩展内建类
  6. 类检查：\”instanceof\”
  7. Mixin 模式
  1. 错误处理，\”try…catch\”
  2. 自定义 Error，扩展 Error
  1. 简介：回调
  2. Promise
  3. Promise 链
  4. 使用 promise 进行错误处理
  5. Promise API
  6. Promisification
  7. 微任务（Microtask）
  8. Async/await
  1. Generator
  2. 异步迭代和 generator
  1. 模块 (Module) 简介
  2. 导出和导入
  3. 动态导入
  1. Proxy 和 Reflect
  2. Eval：执行代码字符串
  3. 柯里化（Currying）
  4. Reference Type
  5. BigInt

学习如何管理浏览器页面：添加元素，操纵元素的大小和位置，动态创建接口并与访问者互动。

  1. 浏览器环境，规格
  2. DOM 树
  3. 遍历 DOM
  4. 搜索：getElement*，querySelector*
  5. 节点属性：type，tag 和 content
  6. 特性和属性（Attributes and properties）
  7. 修改文档（document）
  8. 样式和类
  9. 元素大小和滚动
  10. Window 大小和滚动
  11. 坐标
  1. 浏览器事件简介
  2. 冒泡和捕获
  3. 事件委托
  4. 浏览器默认行为
  5. 创建自定义事件
  1. 鼠标事件
  2. 移动鼠标：mouseover/out，mouseenter/leave
  3. 鼠标拖放事件
  4. 指针事件
  5. 键盘：keydown 和 keyup
  6. 滚动
  1. 表单属性和方法
  2. 聚焦：focus/blur
  3. 事件：change，input，cut，copy，paste
  4. 表单：事件和方法提交
  1. 页面生命周期：DOMContentLoaded，load，beforeunload，unload
  2. 脚本：async，defer
  3. 资源加载：onload，onerror
  1. DOM 变动观察器（Mutation observer）
  2. 选择（Selection）和范围（Range）
  3. 事件循环：微任务和宏任务

教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构，你可以按你需要的顺序阅读文章。

  1. 弹窗和 window 的方法
  2. 跨窗口通信
  3. 点击劫持攻击
  1. ArrayBuffer，二进制数组
  2. TextDecoder 和 TextEncoder
  3. Blob
  4. File 和 FileReader
  1. Fetch
  2. FormData
  3. Fetch：下载进度
  4. Fetch：中止（Abort）
  5. Fetch：跨源请求
  6. Fetch API
  1. XMLHttpRequest
  2. 可恢复的文件上传
  3. 长轮询（Long polling）
  4. WebSocket
  5. Server Sent Events
  1. Cookie，document.cookie
  2. LocalStorage，sessionStorage
  3. IndexedDB
  1. 贝塞尔曲线
  2. CSS 动画
  3. JavaScript 动画
  4. Web components
  5. 从星球轨道的高度讲起
  6. Custom elements
  7. 影子 DOM（Shadow DOM）
  1. Shadow DOM 插槽，组成
  2. 给 Shadow DOM 添加样式
  3. Shadow DOM 和事件（events）
  1. 模式（Patterns）和修饰符（flags）
  2. 字符类
  3. Unicode：修饰符 “u” 和 class \\p{…}
  4. 锚点（Anchors)：字符串开始 ^ 和末尾 $
  5. Flag \”m\” — 多行模式
  6. 词边界：\\b
  7. 转义，特殊字符
  8. 集合和范围 […]
  9. 量词 `+,*,?` 和 `{n}`
  10. 贪婪量词和惰性量词
  11. 捕获组
  12. 模式中的反向引用：\\N 和 \\k<name>
  13. 选择（OR）|
  14. 前瞻断言与后瞻断言
  15. 灾难性回溯
  16. 粘性标志 \”y\”，在位置处搜索
  17. 正则表达式（RegExp）和字符串（String）的方法

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科