JavaScript大师必须掌握的12个知识点

译者按： 前端技术涉及的愈来愈多！

• 原文: 10 things to learn on the way to becoming a JavaScript Master
• 译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。

既然你对这篇文章感兴趣，我想你应该是一位前端开发，也许你有一份不错的工做、自主创业甚至是一位自由从业者。不知你的前端技术如何，也许你是一位新手，亦或是一位资深开发。 若是你想让本身成为一个 JavaScript 大师，在此我列出 12 条必备知识：

1. 控制流(Control Flow)

咱们从最基础的开讲。固然，它也是最重要的一个知识点。若是你连这个都没有整明白的话，那你的代码生活将会很艰难。

• if else : 若是连这个都不知道，以前怎么码代码的？
• switch : 当有不少的状况要处理(>2)的时候，用它准没错。
• for: 不要去编写重复的代码，请使用 for。for of和for in都十分便利。一个很大的优点在于 for 循环是阻塞式的，能够配合async await使用。
• 高阶的条件语句: 使用三元运算符或则逻辑判断。若是想把代码写得简洁，甚至不须要存储中间值的话，能够这么作。

// ternary
console.log(new Date().getHours() < 12 ? "Good Morning!" : "Time for a siesta");

// logical operators
const isJsMaster = prompt("Are you a JavaScript master?") === "true";
console.log(isJsMaster && "proficient coder");
复制代码

2. 异常处理

无论前端仍是后端工程师，做为一个新手，常常会使用console.log或则console.error来处理错误。为了写出健壮的应用，则须要改掉处处使用 console.log 的习惯，构建本身的异常处理器，而后优雅地处理异常。 你也许对如何处理异常很感兴趣，能够看看我写的这篇文章。

3. 数据模型

须要想清楚如何组织数据(合并或则分离)，这不只仅关乎在数据库里如何定义其模型，同时也包含了函数参数，定义的变量、对象等等。

const calcShape = (width, height, depth, color, angle) => {...}
const calcShape = ({width, height, depth, color, angle}) => {...}
复制代码

4. 异步性

这个是 JavaScript 很是重要的一个特性，要么须要从服务器获取数据或则在服务器端异步去处理请求。几乎在全部的状况下，都要面对异步。若是搞不清楚异步，可能会遇到很是奇怪的报错，以致于要花费几个小时去搞定它。若是你知道异步，可是没有彻底理解，那么可能掉入“回调地狱”。现在，最好的方法是使用 Promises 和async await。

5. 操做 DOM

对于开发者来讲，一般已经学会了 jQuery，彷佛不须要再去了解如何直接操纵 DOM 的技巧。甚至直接使用前端框架，根本不须要去操纵 DOM 了。可是，我认为对于理解前端 JavaScript，这是必不可少的一环。知道 DOM 的工做原理以及如何操纵 DOM 元素会让你对网页的工做机制有更加清楚的理解。并且，尽管使用了前端框架，总有些状况下你须要直接操纵 DOM。打个比方，若是仅仅只是想访问某个元素，你确定不想把整个 jQuery 都导入到项目中吧。

6. Node.js / Express

做为一名前端开发，依然须要学习一点 Node.js。最好懂得如何用 Express 快速搭建一个服务器，而且使用路由功能。JavaScript 做为一门“脚本”语言，很适合定义各类自动化任务，所以知道如何读取文件，操纵 Buffer 能够助你构建工做流。

7. 函数式编程

函数式编程和面向对象编程哪一个更好的争论由来已久。其实，你可使用任何一种编程方式达到相同的目的。在 JavaScript 中，事情变得简单，两种方式任你挑选。像lodash就以函数式的角度提供了很是多的工具函数。现在，甚至不少函数已经内置实现，无需导入外部库，好比map,reduce,filter,forEach,find。

8. 面向对象编程

和函数式编程相似，你一样须要熟悉面向对象的 JavaScript 编程。我曾经很长一段时间拒绝在 JavaScript 中使用面向对象，可是后来发现使用对象/类/实例的方式确实会更加合适。类（class)普遍使用于 React, Mobx 或则一些自定义的构造函数中。

9. 前端框架

当今最流行的三大框架：React.js，Angular 和 Vue.js。若是你在找一个前端的工做，在简历上面至少须要列出它们其中之一。尽管它们更新很快，你须要理解它们整体的工做原理。并且，对底层原理的理解可让你更好地使用框架编写应用。若是还不肯定上哪辆车，我建议学习 React.js。我已经使用了好些年，而且不后悔当初的选择。(译者建议 Vue.js，简单好用上手快)

10. 编译(transpilation)/打包

很不幸，在 Web 开发中这一工做占了很大比重。一方面我又不能说不幸，它使得咱们能够用最新的特性来编写代码。我说不幸是由于咱们须要时刻注意新的特性在某些旧版本的浏览器不支持，须要将其翻译到低版本浏览器解释的代码。业界的通用标准是babel.js，你须要熟悉它。对于打包，可使用老大哥Webpack ，或则后起之秀parcel。我倾向于使用 parcel，尽管不完美，可是它性能很好，并且配置方便。

11. 正则表达式

不只仅针对 JavaScript，可是真的很是有用，也很容易让人迷惑。掌握正则表达式会花点时间，不须要记住全部的状况，能够边查边用。

12. 测试

正如Paul Kamma指出，在软件开发中，测试真的是一个很是重要的部分。JavaScript 也不例外，在发布新功能前，最好是(必定要)对代码进行充分的测试。甚至某些状况下须要手动操做，也是值得的。固然，使用自动化测试工具才能一劳永逸，测试包括：单元测试、端到端测试、加载速度测试、安全测试或则前端测试(组件是否加载)。目前市面上已经有不少用于测试的工具，好比 enzyme, jasmine, mocha, chai 等等。我如今最喜欢的是ava.js。

关于Fundebug

Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎你们免费试用！

版权声明

转载时请注明做者Fundebug以及本文地址： blog.fundebug.com/2019/04/03/…