Javascript 中你最应该知道的 33 个概念

简介: Javascript 中你最应该知道的 33 个概念

你觉得自己对JavaScript了解多少?你可能知道如何编写函数,理解简单的算法,甚至可以编写类。但是你知道类型化数组是什么吗?

你现在不需要知道所有这些概念,但你最终会在以后的职业生涯中需要它们。这就是为什么我建议把这个列表收藏起来,因为你可能会遇到其中一个,然后你会需要一个教程来完全理解它。

我们归纳了 33 个前端开发者需要知道的 Javascript 核心概念。希望当你不理解这些概念的时候能去看看它们详细的介绍(我们也在每个概念的末尾给出了详细的介绍地址)。

1. 调用堆栈

调用栈是一种解释器机制(就像网页浏览器中的JavaScript解释器),用来跟踪它在调用多个函数的脚本中的位置——当前正在运行的函数以及在该函数中调用了哪些函数等等。

详细: https://developer.mozilla.org/zh-CN/docs/Glossary/Call_stack

2. 原始值

除了对象之外,所有类型都定义了不可变值(即不能更改的值)。例如(与C不同),string是不可变的。我们将这些类型的值称为“基本值”。

详细: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#%E5%8E%9F%E5%A7%8B%E5%80%BC

3.值类型和引用类型

赋值为非原始值的变量将被赋予该值的引用。该引用指向对象在内存中的位置。变量实际上并不包含值。

详细:https://juejin.cn/post/6844904198484541454

4. 类型转换

类型强制意味着,当操作符的操作数是不同类型时,其中一个操作数将被转换为另一个操作数类型的“等效”值。

详细: https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript

5. 双等号()和三等号(=)

JavaScript有两种看起来相似但又非常不同的方法来测试是否相等。可以用=====来测试是否相等。

详细:https://segmentfault.com/a/1190000013267129

6. 函数作用域,块作用域和词法作用域

在 ES5 及之前版本,JavaScript 只拥有函数作用域,没有块作用域(with try...catch 除外)。在 ES6 中,JS 引入了块作用域,{ } 内是单独的一个作用域。采用 let 或者 const 声明的变量会挟持所在块的作用域,也就是说,这声明关键字会将变量绑定到所在的任意作用域中(通常是 {...} 内部)。

详细:https://segmentfault.com/a/1190000008440514

7. 表达式和语句

进行这种区分很重要,因为表达式可以像语句一样工作,这就是为什么我们也有表达式语句。但是,在另一方面,语句不能像表达式那样工作。

详细:cnblogs.com/1549983239yifeng/p/14598951.html

8. IIFE,模块和命名空间

一种常用的函数编码模式有一个奇特的名字:立即调用函数表达式。或者更广为人知的IIFE,发音为“iffy”。

详细:https://developer.mozilla.org/zh-CN/docs/Glossary/IIFE

9. 消息队列和事件循环

“异步JavaScript和单线程?”答案是JavaScript语言线程和异步行为不是JavaScript语言本身的一部分,而是建立在核心的浏览器中的JavaScript语言(或编程环境)和通过浏览器访问api。

详细:https://www.bbsmax.com/A/kjdwajrGJN/

10. setTimeout, setInterval和requestAnimationFrame

我们可能决定不立即执行某个函数,而是在以后的某个时间执行。这就是所谓的“电话预约”。

详细:https://www.cnblogs.com/ling-nl/p/14245218.html

11. Javascript 引擎

为Web编写代码有时感觉有点神奇,因为开发人员编写了一系列字符,就像魔术一样,这些字符在浏览器中变成了具体的图像、文字和动作。理解这种技术可以帮助开发人员更好地理解Javascript的运行机制。

JavaScript引擎的组成部分有哪些?

  1. 编译器。主要工作是将源代码编译成抽象语法树,然后在某些引擎中还包含将抽象语法树转换成字节码。
  2. 解释器。在某些引擎中,解释器主要是接受字节码,解释执行这个字节码,然后也依赖来及回收机制等。
  3. JIT工具。一个能够JIT的工具,将字节码或者抽象语法树转换成本地代码,当然它也需要依赖牢记垃圾回收器和分析工具(profiler)。它们负责垃圾回收和收集引擎中的信息,帮助改善引擎的性能和功效。

详细:https://www.cnblogs.com/onepixel/p/5090799.html

12. 位操作符,类型数组和数组缓冲区

对于计算机来说,所有的都是10。它不操作数字、字符或字符串,它只使用二进制数字(位)。简而言之,一切都是以二进制形式存储的。然后计算机使用诸如UTF-8这样的编码将保存的比特组合映射为字符、数字或不同的符号(ELI5版本)。

详细:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E4%BD%8D%E8%BF%90%E7%AE%97%E7%AC%A6

13. DOM 和 渲染树

文档对象模型(Document Object Model),通常称为DOM,是使网站具有交互性的重要组成部分。它是一个界面,允许编程语言操作网站的内容、结构和风格。JavaScript是在internet浏览器中连接到DOM的客户端脚本语言。

详细:https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work

14. 原型继承

JavaScript是一种基于原型的语言,这意味着对象属性和方法可以通过具有克隆和扩展能力的通用对象来共享。这被称为原型继承,与类继承不同。

详细:https://developer.mozilla.org/zh-CN/docs/learn/javascript/objects/classes_in_javascript#%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%9A%84%E7%BB%A7%E6%89%BF

15. this, call, apply and bind

这些函数对每个JavaScript开发人员都非常重要,几乎在每个JavaScript库或框架中都使用。

详细:

16. new、Constructor、instanceof和Instances

每个JavaScript对象都有一个原型。JavaScript中的所有对象都从原型中继承了它们的方法和属性。

详细:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

17. 原型继承和原型链

对于使用基于类的语言(如Java或c++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,本身不提供类实现(class关键字是在ES2015中引入的,但它是语法上的糖,JavaScript仍然是基于原型的)。

详细:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

18. Object.create 和 Object.assign

对象。create方法是JavaScript中创建新对象的方法之一。

详细:

19. map, reduce 和 filter

即使你不知道函数式编程是什么,你也可能使用过map、filterreduce,因为它们非常有用,可以让你编写更清晰的逻辑,从而让你的代码不那么糟糕。

20. 纯函数,副作用,状态突变和事件冒泡

我们的很多bug都是源于IO相关的,数据突变,副作用。这些代码遍布我们的代码库——比如接受用户输入,通过http调用接收意外响应,或者写入文件系统。不幸的是,这是一个残酷的现实,我们应该习惯处理这些bug。

详细:https://segmentfault.com/a/1190000018524543

21. 闭包

闭包是将一个函数捆绑在一起(封装在一起),并引用其周围的状态(词法环境)的组合。换句话说,闭包使您能够从内部函数访问外部函数的作用域。在JavaScript中,闭包是在每次创建函数时创建的

详细:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

22. 高阶函数

JavaScript可以接受高阶函数。处理高阶函数的能力以及其他特性使JavaScript成为非常适合函数式编程的编程语言之一。

高阶函数是至少满足下面一个条件的函数:

  1. 接收一个或多个函数作为参数。比如filter函数
  2. 返回一个函数。 比如bind函数

详细:https://segmentfault.com/a/1190000018528025

23. 递归

一种函数调用自身的操作。递归被用于处理包含有更小的子问题的一类问题。一个递归函数可以接受两个输入参数:一个最终状态(终止递归)或一个递归状态(继续递归)。

24. 集合和Generator

Generator对象由Generator函数返回,它符合可迭代对象协议和迭代器协议。

详细:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator

25. Promises

Promise对象表示异步操作的最终完成(或失败)及其结果值。

详细:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

26. async/await

有一种特殊的语法以一种更舒适的方式处理承诺,称为“async/await”。它非常容易理解和使用。

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

详细:

27. 数据结构

Javascript每天都在发展。随着React、Angular、Vue、NodeJS、Electron、React Native等框架和平台的快速发展,在大型应用中使用javascript已经变得非常普遍。

JavaScript 语言中内建的数据结构及其属性,它们可以用来构建其他的数据结构。

详细:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

28. 时间复杂度

这是一个非常常见的面试问题。简而言之,它是算法运行时间的数学表达式取决于输入时间的长短,通常谈论的是最坏的情况。

29. 算法

在数学和计算机科学中,算法是定义明确的指令的有限序列,通常用于解决一类特定的问题或执行计算。

详细:https://www.cnblogs.com/xinkuiwu/category/1594426.html

30. 继承、多态和重用

类继承是一个类扩展另一个类的一种方式,因此我们可以在现有功能的基础上创建新的功能。

31. 设计模式

每个开发人员都努力编写可维护、可读和可重用的代码。随着应用程序变得越来越大,代码结构变得越来越重要。设计模式被证明是解决这一挑战的关键——为特定环境中的常见问题提供组织结构。

32. 柯里化

函数组合是将多个简单函数组合成一个更复杂函数的机制。

详细:https://zhuanlan.zhihu.com/p/74585560

33. Clean Code

编写干净、可理解和可维护的代码是每个开发人员都必须掌握的关键技能。

详细:https://zhuanlan.zhihu.com/p/102367865



相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
46 1
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
74 1
|
6月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
48 7
|
2月前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
140 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
2月前
|
设计模式 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
在本文中,我们将深入探讨JavaScript中的一个重要概念——闭包。闭包是一种强大的编程工具,它允许函数记住并访问其所在作用域的变量,即使该函数在其作用域之外被调用。通过详细解析闭包的定义、创建方法以及实际应用场景,本文旨在帮助读者不仅理解闭包的理论概念,还能在实际开发中灵活运用这一技巧。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
49 4
|
2月前
|
缓存 JavaScript 前端开发
深入了解JavaScript的闭包:概念与应用
【10月更文挑战第8天】深入了解JavaScript的闭包:概念与应用
|
2月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:概念与应用
【10月更文挑战第8天】深入理解JavaScript中的闭包:概念与应用
|
3月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
本文深入探讨了JavaScript中闭包的概念,从定义、作用域链和实际应用等方面进行了详细阐述。通过生动的比喻和实例代码,帮助读者理解闭包在函数执行上下文中的重要性,以及如何在实际开发中有效利用闭包解决复杂问题。同时,文章也指出了过度使用闭包可能导致的潜在问题,并给出了相应的优化建议。