每个开发者都应该知道的33个javascript概念

@大迁世界      2022-04-25     655

关键词:

作者:Ahmad Shadeed
译者:前端小智
来源:dev

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

首先,问大家一个问题,你对 JS 的熟练程度有多深?

今天,我们来介绍一下 JS 中的33个概念,这些概念中,你可能知道,也有可能不知道,甚至连听都没听过。

这些概念是作为前端都应该需要知道的,那我们开始吧。

1. 调用堆栈

调用堆栈是一种机制,用于解释器(如网络浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本中的位置–当前正在运行什么函数,以及从该函数中调用什么函数,等等。

2. 原始类型

除了对象之外,所有的类型都定义了不可变的值(也就是说,不能改变的值)。例如(与C语言不同),字符串是不可变的。我们把这些类型的值称为 “原始值”。

3. 值类型和引用类型

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

4. Implicit, Explicit, Nominal, Structuring and Duck Typing

类型强制是指当运算符的操作数为不同类型时,其中一个操作数将被转换为另一个操作数类型的 "等价 "值。

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

5. == vs === vs typeof

JavaScript有两种视觉上相似但又非常不同的方法来测试相等性。你可以用 ==== 来测试相等性。

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

1: 函数作用域
2:块作用域
3:记法作用域

7. 表达式与声明式

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

8. IIFE,模块和命名空间

参考:https://vvkchandra.medium.com/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6

9. 消息队列和事件循环

“JavaScript是如何做到异步和单线程的?” 简短的回答是,JavaScript语言是单线程的,异步行为不是JavaScript语言本身的一部分,而是建立在浏览器(或编程环境)中的核心JavaScript语言之上,并通过浏览器的API访问。

参考:https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

10. setTimeout, setInterval 和 requestAnimationFrame

我们希望不要黎曼执行一个函数,而是在以后的某个时间执行。这就是所谓的 “调度调用”。

参考:https://javascript.info/settimeout-setinterval

11. JavaScript引擎

为Web编写代码有时感觉有点神奇,因为开发人员编写了一系列字符,这些字符在浏览器中变成了具体的图像、文字和动作。理解这项技术可以帮助开发人员更好地调整他们作为程序员的技能。

参考:http://www.softwaremag.com/javascript-engines/

12. 按位运算符,类型数组和数组缓冲区

从技术上来说,对于计算机来说,所有东西都是1和0。它不使用数字、字符或字符串,它只使用二进制数字(位)。简单解释主浊,所有东西都以二进制形式存储。然后计算机使用诸如UTF-8之类的编码将保存的位组合映射到字符、数字或不同的符号(ELI5版本)。

参考:https://hackernoon.com/programming-with-js-bitwise-operations-393eb0745dc4

13. DOM和布局树

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

参考:https://www.digitalocean.com/community/tutorials/introduction-to-the-dom

14. 工厂和类

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

参考:https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript

15. this, call, apply 和 bind

这些函数对每个JavaScript开发者来说都非常重要,几乎每个JavaScript库或框架都会用到。

参考:https://levelup.gitconnected.com/grokking-call-apply-and-bind-methods-in-javascript-392351a4be8b

16. new, Constructor, instanceof 和 Instances

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

参考:https://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e

17. 原型继承和原型链

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

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

18. Object.create 和 Object.assign

Object.create 方法是在JavaScript中创建一个新对象的方法之一。

参考:https://medium.com/@happymishra66/object-create-in-javascript-fa8674df6ed2

19. map, reduce, filter

即使你不知道函数式编程是什么,你也可能一直在使用map、filter和reduce,因为它们非常有用,可以让你写出更整洁的逻辑,从而让你的代码不那么糟糕。

参考:https://medium.com/@bojangbusiness/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d

20.纯函数、副作用、状态突变和事件传播

我们的许多bug都源于与IO相关的、数据突变的、产生副作用的代码。这些问题在我们的代码库中随处可见–从接受用户输入、通过http调用接收一个意外的响应,或向文件系统写入等。是一个残酷的现实,所以我们也要正确的对待并解决它。

参考:https://hackernoon.com/javascript-and-functional-programming-pt-3-pure-functions-d572bb52e21c

21.闭包

闭包是将函数与对其周围状态(词法环境)的引用捆绑在一起的组合。换句话说,闭包允许我们从内部函数访问外部函数的作用域。在JavaScript中,闭包在每次创建函数时创建。

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

22. 高阶函数

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

参考:https://www.sitepoint.com/higher-order-functions-javascript/

23. 递归

参考:https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f

24. 收集器和生成器

生成器对象是由生成器函数返回的,它同时符合可迭代协议和迭代器协议。

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator

25. Promise

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

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

26. async/await

参考:https://javascript.info/async-await

27. 数据结构

Javascript每天都在不断发展。随着React、Angular、Vue、NodeJS、Electron、React Native等框架和平台的迅速发展,在大规模应用中使用javascript已经变得相当普遍。

参考:https://blog.cloudboost.io/playing-with-data-structures-in-javascript-stack-a55ebe50f29d

28. 昂贵的运算和大O符号

"什么是大O符号?"这是一个非常常见的开发人员的工作面试问题。简而言之,它是一种数学表达方式,即根据输入的时间长短,一个算法需要运行多长时间,通常说的是最坏情况。

参考:https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b

29. 算法

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

30. 继承、多态性和代码重用

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

参考:https://javascript.info/class-inheritance

31. 设计模式

每个开发人员都在努力编写可维护、可阅读和可重用的代码。当应用程序变得越来越大时,代码的结构化变得更加重要。设计模式被证明是解决这一挑战的关键–为特定情况下的共同问题提供一个组织结构。

参考:https://www.digitalocean.com/community/tutorial_series/javascript-design-patterns

32. 局部应用、柯里化、组成和管道

函数组合是一种将多个简单的函数组合起来以建立一个更复杂的函数的机制。

参考:https://www.codementor.io/@michelre/use-function-composition-in-javascript-gkmxos5mj

33. 简洁代码

编写干净的、可理解的、可维护的代码是每个开发者都要掌握的一项技能。

参考:https://www.freecodecamp.org/news/clean-coding-for-beginners/

如果你觉得这份清单很有用,别忘了把它收藏起来,并关注我以获得更多类似的内容。


编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

https://dev.to/eludadev/33-javascript-concepts-every-beginner-should-know-with-tutorials-4kao

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

javascript开发者都应该知道的十个概念

...块级作用域之间的区别。了解变量在哪里是可用的,了解JavaScript引擎如何执行变量查找。 3.提升(Hoisting)认识到变量和函数的声明会被提升到声明所在的 查看详情

每个开发人员都应该知道的10个github仓库

作者:Pawel翻译:LeanCloudGitHub不仅是互联网上最有趣的开源项目的所在地,而且还是共享各种资源的好地方,从免费的书籍到API,产品路线图到项目思路到项目方案。但是,由于数量庞大,你可能很难找到实际有用的仓库。因此... 查看详情

每个前端程序员都应该知道的10个chrome扩展

...能需要几天时间才能克服。所以为了让这个过程更容易,每个开发人员都应该尝试各种chrome扩展:- 1、开发人员工具箱下载地址:https://chrome.google.com/webstore/detail/web-developer/bfbamenei 查看详情

每个开发人员都应该知道的15个intellijidea快捷方式

作为开发人员,高效地工作非常重要。这包括快捷方式,这些快捷方式对于快速工作和减少鼠标移动至关重要。但是,初学者往往不知道哪些快捷方式可用或忘记使用它们。出于这个原因,在这篇文章中,我... 查看详情

每个java开发人员都应该知道的4个spring注释(代码片段)

这是每个Java开发人员都应该知道的最重要的Spring注解。感谢优锐课老师对本文提供的一些帮助。随着越来越多的功能被打包到单个应用程序或一组应用程序中,现代应用程序的复杂性从未停止增长。尽管这种增长带来了一些惊... 查看详情

每个开发者都应该知道的solid原则(代码片段)

每个开发者都应该知道的SOLID原则单一职责原则(SRP)它为什么违反了SRP?这种设计将来会带来什么问题?开闭原则(OCP)如何使它(AnimalSound)符合OCP?里氏替换原则(LSP)接口隔离原则(ISP)依赖倒置原则(DIP)小结每个开... 查看详情

每个开发人员都应该知道的16个顶级新计算机编程语言

...没有运行时异常而闻名。PureScriptPureScript是一种可编译为JavaScript的纯函数式编程语言。与Haskell最相似的是,PureScript最适合用于开发Web应用程序和服务器端应用程序。PureScript支持类型推断,与其他语言相比,需要明显类型注释要... 查看详情

每个web开发人员都应该知道的10个html5黑客

...至是金钱)。通过优锐课的行业讨论提升中,总结了一些每个Web开发人员都应该知道的10个HTML5黑客,使你的日常开发工作变得更加轻松的10条提示。因此,如果你有空闲时间,这里列出了10个有用的HTMLhack,你可以在几小时内掌... 查看详情

每个开发人员都应该知道的11个linux命令(代码片段)

...生活工作更轻松。1.grep$grep"somestring"filegrep命令在每个文件中搜索,它还会寻找由换行符分隔的模式,并且grep会打印与模式匹配的每一行。使用grep命令查找文件中的所有React关键字:该-i选项使我们能够在给定文件中不区... 查看详情

每个开发人员都应该知道的10大安全编码实践

...的代码中至少包含一个安全漏洞的可能性很高。好消息是每个开发人员都可以采用多种安全编码实践来帮助降低编写不安全代码的风险。本指南将分享每个开发人员都应该知道的十大安全编码实践。因此,无论你是在一家大... 查看详情

每个开发人员都应该知道的10大安全编码实践

...的代码中至少包含一个安全漏洞的可能性很高。好消息是每个开发人员都可以采用多种安全编码实践来帮助降低编写不安全代码的风险。本指南将分享每个开发人员都应该知道的十大安全编码实践。因此,无论你是在一家大... 查看详情

每个linux新手都应该知道的10个命令

你可能认为你是Linux新手,但实际上并不是。全球互联网用户有3.74亿,他们都以某种方式使用Linux,因为Linux服务器占据了互联网的90%。大多数现代路由器运行Linux或Unix,TOP500超级计算机也依赖于Linux。如果你拥有一台Android智能... 查看详情

python之每个人都应该知道的30个一行代码程序(代码片段)

Python语法简洁,能够用一行代码实现很多有趣的功能,现在整理30个常见的Python一行代码集合。①转置矩阵old_list=[[1,2,3],[3,4,6],[5,6,7]]list(list(x)forxinzip(*old_list))[[1,3,5],[2,4,6],[3,6,7]]②二进制转十进制decimal=int('1010& 查看详情

每个web开发者应该知道的jqueryi18n知识!——爱创课堂

...程序的每个用户期望所有文本和消息以熟悉的格式显示。JavaScript有一个很好的国际化解决方案称为jQuery.i18n。jQueryi18n用于MediaWiki和许多其他国际网站的本地化。JQueryI1 查看详情

pdb文件:每个开发人员都必须知道的pdbfiles

PDBFiles:WhatEveryDeveloperMustKnowhttp://www.wintellect.com/CS/blogs/jrobbins/archive/2009/05/11/pdb-files-what-every-developer-must-know.aspx PDB文件:每个开发人员都必须知道的 一什么是PDB文件大部分的开发人员应该都知道PDB文件 查看详情

每个程序员都应该知道哪些最基本的常识?

...题:Whataresomeofthemostbasicthingseveryprogrammershouldknow?每个程序员都应该知道哪些最基本的常识?这个问题只有64个答案,并没有很多人愿意给自己的答案。排名第一的答案7.9k点 查看详情

pdb文件:每个开发人员都必须知道的

http://www.wintellect.com/CS/blogs/jrobbins/archive/2009/05/11/pdb-files-what-every-developer-must-know.aspx 一什么是PDB文件大部分的开发人员应该都知道PDB文件是用来帮助软件的调试的。但是他究竟是如何工作的呢,我们可能并不熟悉。本文描述了... 查看详情

编程实践每个开发者都应该知道的数据库查询sql命令

目录SQL简介                SELECT和FROM                CREATETABLE           &nb... 查看详情