导航现代JavaScript的广阔生态系统是一项艰巨的任务。有各种各样的前端框架，少量的模块捆绑程序和数千个实用程序库，更不用说可以在你的计算机或服务器上运行的所有Node.js模块了。你怎么知道从哪里开始？你应该在哪些技术上花费时间？
我学到了无数的东西，但从未停止使用，还有其他一些我希望自己花更多时间在上面的东西。考虑到我7年职业生涯中的经验教训，这些是我对如何学习JavaScript的建议。
1.熟悉异步JavaScript。
如果查看JavaScript（或一般而言的Web开发）的历史，就会发现异步JavaScript完全改变了游戏。它允许网站从仅具有客户端操作的静态页面到浏览器中功能全面的应用程序。实际上，发出HTTP请求并等待响应而无需重新加载页面的能力改变了万维网。
可以肯定地说，异步编程是Web开发的核心宗旨。那是你应该在早期学习JavaScript上投入大量时间的地方，因为它封装了其他核心原则，例如回调，promise，异步/等待和获取。
请花一些时间按顺序阅读我在下面列出的资源。他们应该给你一个从哪里开始异步编程的好主意。
推荐资源：
视频资料
对于零基础小白来说看视频就是最好的学习方式了，我在这里为大家准备了一套，有需要的可以私聊获取
看完视频之后，推荐下面这本书，同意也给大家准备好了电子版
JavaScript异步编程
2.了解TypeScript的基础。
我和我自己辩论了一个小时左右，以决定是否要包含此内容，因为这是一篇有关学习JavaScript的文章，而TypeScript不是JavaScript。它是它的超集，需要使用构建步骤。但是，我坚信TypeScript，以至于不得不将它包括在内。
该建议与JavaScript的关系比与最佳编码实践的关系少。JavaScript是一种松散类型的动态编程语言。当您传递没有类型协定和不可变性的变量和数据对象时，编写容易受副作用影响的代码太容易了。TypeScript通过添加强类型输入和创建只读属性的能力（在许多其他奇妙的事物中）来减轻这些问题。
考虑到这一点，我建议你尽快学习TypeScript的基础。“基础知识”的意思是：如何在变量，类属性，函数参数和函数返回值中添加类型注释。TypeScript功能非常强大，除了简单的类型注释之外，还有很多东西要学习，但是第一步将阻止您定期脚踏实地拍摄自己。它仍然让我感到惊讶，TypeScript编译器多久发现一次我最初没有看到的错误。
是的，编译器会大吼大叫……很多。没关系！它是您的朋友，它希望您成为一个更好的程序员。花点时间考虑一下TypeScript给你的错误消息，我保证您的代码将得到显着改善。
推荐资源
从官方TypeScript文档在5分钟内输入TypeScript
在在线TypeScriptREPL中玩转
[Paywalled]TypeScript4小时研讨会，作者：MikeNorth
已准备离线版
3.了解为什么存在JavaScript框架。
自从我在2012年末第一次涉足Web开发以来，JavaScript框架就已经存在。那时，AngularJS占据了上风，Backbone.js拥有可观的市场份额，而Ember则是炙手可热的新兴市场（双关语意）。有趣的是，即使它们已成为过去（主要由React和Vue代替），这些前端框架解决的问题也没有太大变化。例如：
数据绑定视图到控制器。这是最重要的。保持UI视图与前端应用程序状态同步是所有前端框架的主要原因。无论框架是完全MVC，MVVM还是仅仅是视图层，它们都可以将某些状态绑定到视图并使它们保持同步。
可重用组件。这是AngularJS做对的最大事情。前端视图的基于组件的组合，以及JS将模板编译成HTML的功能，是React和Vue等现代框架的核心，但自AngularJS以来一直存在。如果不使用现有框架或创建自己的框架，则根本不可能创建动态的，可重用的组件，因为Web组件的API非常受限制，并且无法处理数据绑定。
这些只是为了说出一对夫妇的名字。关键是，如果您看中精美的扳手，螺丝刀和其他工具，螺母和螺栓是相同的。工具的变化和技术的发展，但是，如果您了解Web开发的核心痛点（首先存在这些工具的原因），那么您将处在一个更好的位置，以理解和正确使用任何现在，将来或旧有的东西框架。
推荐资源
文章：现代JavaScript框架存在的最深层次原因
4.同时学习两个相似的框架。
依我关于框架解决的基本问题的观点并没有改变，我现在建议你一次学习两个前端框架。例如，Vue和React。
当大量使用一个框架时，很容易开始觉得该框架的语法和模式是基础语言的一部分（在我们的例子中为JavaScript）。俗话说，如果你只有锤子，那么一切都会看起来像钉子。那句话，翻译成程序设计，意味着
一次学习或了解两个框架可以颠覆这种想法，使你对框架实际为你做的事情有更多的了解。就像学习外语实际上可以使你的母语变得更好一样。你会看到两者之间的异同，海边的卡夫卡读后感（https://www.yuananren.com/duhougan/14644.html）并且你正在思考什么语言结构导致了这些异同。知道两个JavaScript框架可以提供相似的观点。通过了解同一解决方案的两条路径，你可以更好地了解它们正在解决的根本问题。 5.揭开构建过程的神秘面纱。
我现在提出了4条建议，但其中只有一项涉及学习VanillaJS，这对我来说并没有丢失。无论你是否喜欢，编写现代JavaScript都涉及许多工具和框架，而将它们联系在一起的就是构建过程。
构建工具是我整个职业中变化最大的领域，因为这是性能和资产规模最大的收益。基于Web的公司和开放源代码社区一直在努力地挤压他们在构建过程中可能无法进行的每一个小改进，从而导致了工具和过程的不断变化。
我不得不承认，花了我一段时间才了解Webpack之类的工具是如何工作的。你设置了一个简单的配置，运行了一个命令，突然您有了一个包含优化，最小化和浏览器兼容代码的文件。构建工具看起来像是不可思议的工具，因为它们都努力做到零配置或很少配置。这对于开始使用它们非常有用，但是当您实际需要进行一些自定义配置时，这会使他们望而却步。
了解这些工具正在为您做什么是非常重要的。尝试了解您的代码将经历哪些转换以及转换的顺序。尝试了解如何捆绑模块，以便更好地对其进行优化。尝试学习每个配置选项，因为这对性能和文件大小影响最大。
推荐资源
深入探讨webpack解决的问题
Grunt和Gulp.js
就是这样！我希望这个职位能带来可观的价值。正如我在介绍中所述，JavaScript生态系统令人生畏。我已经从事专业工作7年了，但我仍然经常觉得自己几乎没有刮过表面。因此，不要尝试一次全部使用-专注于这五件事，你会顺利进行的。
