关于javascript:要深入-JavaScript你需要掌握这-36-个概念

本文曾经原作者受权

作者：Mahdhi Rezvi 译者：前端小智 起源：medium

原文：https://medium.com/better-pro…

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

你可能会常常听到一些人在埋怨 JS 很奇怪，有时甚至是一文不值。之所以有这种想法，是因为他们不太理解 JS 背地的运作形式。我也感觉 JS 在某些状况解决形式与其它语言不太一样，但这并不能怪它，它也只是以本人的形式展示给大家而已。

如果，你酷爱一门编程语言，那么应该就会想深刻理解并一一把握它的概念。

这里列出了 36 个 JavaScript 概念，你须要把握这些概念能力成为一个更懂 JS 的前端开发者。

1. 调用堆栈执行

咱们都晓得堆栈溢出，然而你晓得堆栈溢出是由什么起因导致的吗? 堆栈溢出是与调用堆栈一些操作谬误相关联的。

了解了调用堆栈，你就会分明解像是 JS 这们的编程语言是如何执行的。

2. 原始数据类型

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

这里，咱们将值 bar 调配给常量 foo 时，它属于原始类型 string。这个每个人都晓得。然而各位少侠想没想过一个问题，string 是根本数据类型，怎么能调用办法了？

奇怪吗? 不。

这个个性称为 主动装箱 。每当读取一个根本类型的时候，JS 后盾就会创立一个对应的 根本包装类型对象，从而让咱们可能调用一些办法来操作这些数据。

还是拿下面的例子开始：

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

变量 foo 是一个根本类型值，它不是对象，它不应该有办法。然而 JS 外部为咱们实现了一系列解决（即 装箱），使得它可能调用办法, 实现的机制如下：

• 创立 String 类型的一个实例
• 在实例上调用指定的办法
• 销毁这个实例

const foo  = new String("bar");
foo.length
foo === 'bar'
foo = null

通过对原始数据类型有深刻的理解，咱们就应该晓得这些“怪异”状况是如何产生的，以及它们背地的逻辑起因。

3. 值类型和援用类型

最近，我对 “援用传递 ” 在 JS 是怎么工作的感到困惑。只管我晓得 C 和 Java 等语言中有“按援用传递” 和“按值传递”的概念，然而我不确定它在 JS 中如何工作。

你是否晓得调配给 JS 中非原始值的变量对该值的援用？援用指向存储值的内存地位。。

var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(10);
console.log(arr2);
//[1, 2, 3, 10]
console.log(arr1);
//[1, 2, 3, 10]

下面的示例中能够看到，对 arr2 所做的任何批改也将体现在 arr1 上。这是因为它们仅保留值对应的内存地址的援用，而非值自身。

通过理解值类型和援用类型的概念，你就会更好地理解如何为变量调配值和内存援用。

4. 强制类型转换

这个概念次要解释了隐式和显式类型强制之间的区别。这是前端开发中对 JS 蛊惑少数几个畛域之一。对于 隐式强制转换 的概念尤其如此，因为它对不同的数据类型以不同的形式体现。

这是 JS 面试中最常被考的。

Number('789')   // 显式
+'789'          // 隐式
789 != '456'    // 隐式
9 > '5'         // 隐式
10/null          // 隐式
true | 0        // 隐式

把握了类型显隐转换，祝贺你对 JS 理解就进一步了。

5. 比拟运算符号 和 typeof 运算符

双等与三等，它们在大多数状况下在表面上看起来雷同并且给出雷同的后果，然而，它们有时候可能会给带来意想不到的谬误。

为了理解这两亲兄弟的区别，咱们能够借助 typeof 来查看被比拟的值的类型。

typeof 3 // "number"
typeof "abc" // "string"
typeof {} // "object"
typeof true // "boolean"
typeof undefined // "undefined"
typeof function(){} // "function"
typeof [] // "object"
typeof null // "object"

6. JavaScript 作用域

作用域是 JS 中一个很重要的难堪，JS 也始终在不断完善本人的作用域。依据 Wissam 的说法，作用域的简略定义是，编译器在须要时查找变量和函数。

理解作用域有助于咱们无效地应用 JavaScript。咱们还须要理解 全局作用域 以及块和函数作用域，也称为词法作用域。JS 作用域一开始接触会感到很困惑，然而一旦你理解了事件的幕后原理，应用它就会十分令人兴奋。

7. 语句和申明

JavaScript 程序是一系列可执行 语句 的汇合。所谓 语句，就是一个可执行的单元，通过该语句的执行，从而实现某种性能。通常一条语句占一行，并以分号完结。默认状况下，JavaScript 解释器依照语句的编写流程顺次执行。如果要扭转这种默认执行程序，须要应用判断、循环等流程管制语句。

咱们应该要晓得 语句和申明 的区别，这对咱们全面理解 JS 是很有帮忙的。

8. 立刻调用的函数表达式和模块

IIFE: Immediately Invoked Function Expression，意为立刻调用的函数表达式，也就是说，申明函数的同时立刻调用这个函数。它次要用于防止净化全局作用域。起初，引入了 ES6 模块，为防止全局作用域的净化提供了一种规范办法，只管有人认为它不是 IIFE 的间接代替。

通过了解 IIFE 和模块，你能够构建较少因为全局空间处理不当而导致的谬误的应用程序。当然，应用模块，咱们还能够做很多事件。

9. 音讯队列和事件循环

正如 MDN 文档所说，JavaScript 有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子工作。这个模型与其它语言中的模型截然不同，比方 C 和 Java。

在并发模型中，音讯队列用于解决最早的音讯。只有有事件产生，便会退出音讯队列中。通过了解这些概念，你能够更好地了解 JS 在底层是如何工作的，以及晓得你的代码是如果运行的。

10. 工夫距离

想在 JS 有打算的调用的函数，能够应用上面两个函数：

• setTimeout 容许咱们在特定工夫距离后运行一次函数。
• setInterval容许咱们反复运行一个函数，从一个特定的工夫距离开始，而后以该距离间断反复。

这些与后面的音讯队列和事件处理程序的概念有些关联。因而，通过了解工夫距离办法，咱们能够了解它们是如何工作的，并在咱们的用例中无效地应用它们。

11.JS 引擎

JavaScript 引擎是执行 JS 代码的计算机程序或解释器。JS 引擎能够用多种语言编写。例如，驱动 Chrome 浏览器的 V8 引擎是用 c++ 编写的，而驱动 Firefox 浏览器的 SpiderMonkey 引擎是用 C 和 c++ 编 写的。

要想编写高效的代码，你必须理解所应用的 JS 引擎。应用 webview 的挪动开发人员要特地留神这一点。

12. 按位运算

按位运算操作将值视为 位（0 和 1），而不是十进制，十六进制或八进制数字。按位运算符对此类二进制示意模式执行其操作，然而它们返回规范 JavaScript 数值。

通常，很少会在代码中应用这些操作，然而它们的确有一些用例。比方，能够应用它们来查找偶数和奇数值，色彩转换，色彩提取等等。

通过全面理解这些按位操作，您能够很好地应用 WebGL 之类的技术，因为它蕴含许多像素操作。

13. DOM 和布局树

咱们大多数人都据说过文档对象模型（DOM），但只有多数人对此有深刻的理解。你晓得在浏览器中看到的不是 DOM 吗？而是渲染树，它实际上是 DOM 和 CSSOM 的组合。

通过了解 DOM 的工作形式、构造以及页面的渲染形式，咱们就可能在 JS 的帮忙下动静地操作 web 页面。这对于确保咱们的应用程序具备高标准的性能尤为必要。

14. 类和工厂

JavaScript 不是一种面向对象的语言。然而，为了模拟 OOP 属性，应用了构造函数。依据 Tania 的说法，“JavaScript 中的类实际上并没有提供其余性能，只是在原型和继承上提供语法糖，因为它们提供了更简洁，更优雅的语法。因为其余编程语言都应用类，因而 JS 中的类语法使开发人员在各种语言之间挪动变得更加简略。”

工厂函数是不是返回对象的类或构造函数的函数。依据 JS 专家 Eric Elliot 的说法，“在 JavaScript 中，任何函数都能够返回一个新对象。如果它不是构造函数或类，则称为 工厂函数。”

当开始开发规模更大的应用程序时，了解这两个概念是很有必要的。

15.this 关键字和 apply,call及 bind 办法

就我集体而言，我认为对于一个 JS 开发人员来说，了解 this 关键字是至关重要的。如果你不能正确地了解它，未来你开发的我的项目也会常常遇到this 相干的问题。

如果你对 this 关键字很分明，则能够看看 apply，call 和bind办法，这些都能够解决 this 指向引发的问题。

16. 构造函数和“instanceOf”运算符

构造函数就像惯例函数一样。然而它们有很多差别，函数名称以大写字母结尾，并且只能由 new 运算符执行。具备 OOP 开发教训的程序员会相熟 new 关键字。

为了正确辨认对象的类型，咱们应用 instanceOf 运算符。简略来说，它查看一个对象是否是另一个对象的实例。

这才助于你了解对象如何互相继承，继承是通过原型实现的。

17. 原型

这是 JS 中最令人困惑的概念之一，即便对于有十年教训的人来说也是如此。

JavaScript 中的原型是在对象之间共享通用性能的机制。JavaScript 中简直所有对象都是 Object 的实例。对象会从 Object.prototype 继承所有属性和办法。

简略来说，原型是 JS 对象从中继承办法和属性的对象。

了解了原型，你就能够构建高效，疾速的应用程序。

18. 应用 new，Object.create 和 Object.assign 创建对象

创建对象有很多办法。然而，大都会抉择 Object.create 办法而不是 new 关键字。这是有起因的，因为 应用 Object.create 办法时，能够将现有对象用作新创建的对象的原型。这样就能够重用现有对象的属性和性能，有点像 OOP 中的继承概念。

应用 Object.assign 办法时，能够将可枚举的本身属性从一个或多个源对象复制到指标对象。在这种状况下，指标对象的原型不蕴含源对象的属性。这是这两种办法之间的次要区别。

通过理解对象创立的这三种形式，能够依据理论状况适当地应用它们，以创立效率更高的程序。

19.map,filter, reduce 办法

当波及到数组操作时，这三种办法十分有用。它们能够在 Array 原型中找到。

如果你有一个数组，并且想对每个元素做一些事件，那么您能够应用 map 办法。

如果你有一个数组，并且想通过某些条件来过滤一些值时，则能够应用 filter 办法。

reduce() 办法对数组中的每个元素执行一个由你提供的 reducer 函数(升序执行)，将其后果汇总为单个返回值。

典型的例子就是对数组的所有元素进行求和：

let numbers = [1,2,3,4,5,6]
const reduced = numbers.reduce((accumulator, currentValue) => accumulator + currentValue )
console.log(reduced)
// 21

请留神，上述三种办法不会更改原始数组的值。

20. 纯函数，副作用和状态变更

这三个概念对于 JS 开发人员而言十分重要，状态变更对于应用 React 的开发人员尤其重要。

纯函数指的是一个函数的返回后果只依赖于它的参数，并且在执行过程外面没有副作用。

函数副作用是指当调用函数时，除了返回函数值之外，还对主调用函数产生附加的影响。副作用的函数不仅仅只是返回了一个值，而且还做了其余的事件，比方：

• 批改了一个变量
• 间接批改数据结构
• 设置一个对象的成员
• 抛出一个异样或以一个谬误终止
• 打印到终端或读取用户输出
• 读取或写入一个文件
• 在屏幕上画图

状态变更是指你更改变量值的中央。如果你对变量进行更改，则可能会影响到其余函数，具体取决于变量被更改之前的值。在 React 环境中，倡议我不要扭转状态。

21. 闭包

闭包很难了解。然而一旦了解，你会感觉 JS 其实也挺好的。在线上有足够的资源。你花足够的工夫学习闭包，把握了解它并不难。

应用闭包能够拜访外部作用域中内部作用域的作用域。每次创立函数时都会在函数创立时创立 JavaScript 闭包。

22. 高阶函数

高阶函数是将其余函数作为参数或返回后果的函数。你能够创立仅负责一项工作的较小函数，而后在这些较小函数的帮忙下结构简单函数。这也会提交代码的可重用性。

23. 递归

递归是所有编程语言中的一个常见概念。简略地说，递归就是把大问题分解成小问题，而后解决小问题一种思路。

只管递归可能是一个让你头疼的令人困惑的概念，然而通过大量的练习，从一些小问题开始，你能够更好地了解它。

24. 汇合与生成器

ES6 中新引入了汇合和生成器。新引入的汇合有 Map，Set，WeakSet 和WeakMap。这些汇合为咱们提供一些很不便的操作。理解它们的形式至关重要，尤其是对于古代 JavaScript。

生成器有时很难了解，特地是对于初学者。生成器容许咱们编写代码函数，从而可能暂停和重新启动函数，而不会阻止其余代码的执行，这在 JavaScript 中是很不常见的。

25. Promise

Jecelyn 对 Promises 的解释如下：“设想一下你是个孩子。你妈妈向你保障，她下周会买一部新手机给你。”

你要到下周能力晓得你是否能屋那部手机。你的妈妈要么真的给你买了一个全新的手机，要么因为不开心就不给你买。

这算是一个承诺。一个 Promise 有三个状态，别离是：

1. Pending: 你不晓得你是否会能失去那个电话
2. Fulfilled：妈妈快乐了，给你买了一部新手机
3. Rejected：老妈不开心了，就是不给买，爱咋滴就咋滳

26. 异步编程

要理解什么是异步编程，首先要先积善成德什么是同步编程。同步编程是线程阻塞的，因为 JS 是单线程的，因而代码将逐行执行。

然而应用异步代码，你能够执行一些比拟耗时的工作。当你必须执行破费很长时间能力实现的多个工作时，此性能特地有用。然而在某些状况下，即便是须要执行很长时间的代码，也可能须要用同步的形式，这时就能够应用async/await。

27. ES6 箭头函数

箭头函数是 ES6 的新增性能，是惯例函数的语法代替。区别在于箭头函数不绑定到 this，arguments，super 或new.target关键字。这使得箭头函数在某些状况下是一个不错的抉择，而在另一些状况下则是一个十分蹩脚的抉择。

因而，不要一上来就应用箭头函数。须要依据你理论状况还应用它们。

28. 数据结构

无论应用哪种编程语言，数据结构都是开发人员应具备的基本知识之一。

蹩脚的程序员放心代码，好的程序员放心数据结构和它们之间的关系。

数据结构方面，你应该理解链表，队列，堆栈，树，图和哈希表。

29. 工夫复杂度

不论编程语言如何，工夫复杂度剖析也是计算机编程的另一个根底。为了构建更好的应用程序，你应该编写更好的解决方案。为此，你须要理解工夫复杂度的概念。有时也称为BigO。

30. 算法

这也是在计算机根底课程中首先要教的内容之一。简而言之，算法是逐渐实现目标的过程。程序员应该可能从算法的角度看任何问题。

只管有成千上万个用例的大量算法，然而上面两个很常见：

• 查找
• 排序

这两个用例对程序员来说是十分常见的，至多应该理解实现它们的已知算法。没有固定的规定规定你应该应用这些算法之一，然而这些算法在性能方面是家喻户晓的，并且有很好的文档证实。

你甚至能够创立本人的算法，并将其介绍给世界。如果它比目前已知的算法更好，你可能会成为下一个编程明星

31. 继承，多态和代码重用

JS 中的继承可用于原型来实现。这是因为 JS 是非 OOP 语言。然而 JS 通过提供原型继承来提供 OOP 的某些性能。

多态是对象、变量或函数能够采纳多种形式的概念。在 JS 中，要看到多态的成果有点艰难，因为在动态类型的零碎中，多态的经典类型更显著。

以上两个概念都能够帮忙咱们在 JS 中实现更好代码重用。

32. 设计模式

设计模式（Design pattern）代表了最佳的实际，通常被有教训的面向对象的软件开发人员所采纳。设计模式是软件开发人员在软件开发过程中面临的个别问题的解决方案。这些解决方案是泛滥软件开发人员通过相当长的一段时间的试验和谬误总结进去的。

33. 函数式编程

函数式编程是一种编程范式，是一种构建计算机程序构造和元素的格调，它把计算看作是对数学函数的评估，防止了状态的变动和数据的可变。

你须要把握函数式编程的几个概念：

• 纯函数
• 不可变
• 援用透明性
• 高阶函数

34. 简洁代码的准则

无论应用哪种编程语言，这都是每个开发人员都应该把握的一项基本技能。每种编程语言都有一套独自的良好实际。只管这些“良好”做法是主观的，并且在工作场合之间存在差别，但有些常规被认为是“良好”。

通过遵循这些代码准则，能够确保每个人都能够浏览和保护你的代码。这也会帮忙你和你的团队在利用程序开发过程中顺利单干。

35. 解构赋值

在 ES6 中引入了解构赋值操作符，它十分有用。对于雷同的用例，它们比以前的实现更简略、更无效。

36. ES2020 新个性

编程的长处之一是，如果你不去一直学习，你永远不会成为该领域专家。编程语言会随着工夫一直倒退，因为每个次要版本中都引入了其余新的性能。

这也阐明了你对某个概念的专业知识很可能在未来的 10 年后会过期，因为会有更好的代替版本与版本更新一起公布。对于任何编程语言，这都是十分常见的状况。

ES202 0 公布了几个新个性，包含可选链接、空值合并、动静导入等等。你必须学习这些新概念，以跟上疾速变动的 It 世界。

把握一门语言须要多年的教训和工夫，然而晓得要把握什么会让事件变得更容易，心愿这 36 个概念能对你有所帮忙。

人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。