每个开发者都应该了解的33个JavaScript概念

原始地址：https://dev.to/eludadev/33-javascript-concepts-every-beginner-should-know-with-tutorials-4kao

‘’'你认为你真正了解JavaScript的有多少？你可能知道如何编写函数、理解简单算法，甚至可以编写类。但你知道什么是类型化数组吗？你现在不需要知道所有这些概念，但你将来在职业生涯中肯定会需要它们。这就是为什么我建议将这个列表加入书签，因为你很可能会遇到其中的一个主题，然后你会希望有一个教程来完全理解它。需要注意的是，这个列表的灵感来自以下存储库：##leonardomso / 33-js-concepts### 📜 每个开发者都应该了解的33个JavaScript概念。#每个JavaScript开发者都应该了解的33个概念## 引言这个存储库旨在帮助开发者掌握JavaScript中的概念。这不是一个要求，而是未来学习的指导。它基于由Stephen Curtis撰写的文章，并且您可以在这里阅读。 2018年的前开源项目!## 社区欢迎提交请求，添加指向自己的摘要或评论的链接。如果您想将存储库翻译成您的母语，请随意这样做。所有该存储库的翻译将在下面列出：-Shqip（阿尔巴尼亚语）— Eldrin Ereqi-اَلْعَرَبِيَّةُ（阿拉伯语）— Amr Elsekilly-汉语（中文）— Re Tian-Português do Brasil（巴西葡萄牙语）— Tiago Boeing-한국어（韩语）— Suin Lee-Español（西班牙语）— Adonis Mendoza-Türkçe（土耳其语）— İlker Demir-русский язык（俄语）—…请向33 JS Concepts存储库的作者和贡献者表示感谢，因为他们汇集了这个令人惊叹的资源列表！ ❤️所以，不再拖延，让我们开始吧！##目录调用栈 原始类型 值类型和引用类型 隐式，显式，名义，结构和鸭子类型 == vs === vs typeof 函数作用域，块作用域和词法作用域 表达式 vs 语句 IIFE，模块和命名空间 消息队列和事件循环 setTimeout，setInterval和requestAnimationFrame JavaScript引擎 位运算符，类型数组和数组缓冲区 DOM和布局树 工厂和类 this，call，apply和bind new，构造函数，instanceof和实例 原型继承和原型链 Object.create和Object.assign map，reduce，filter 纯函数，副作用，状态变更和事件传播 闭包 高阶函数 递归 集合和生成器 Promises async/await 数据结构 昂贵的操作和大O表示法 算法 继承，多态和代码重用 设计模式 偏应用程序，柯里化，组合和管道 清晰的代码##1. 调用栈调用栈是一种解释器（如Web浏览器中的JavaScript解释器）用于跟踪脚本中多个函数的位置的机制-当前正在运行的函数以及在该函数中调用的函数等等。-来源###教程- 📜了解JavaScript调用栈，事件循环 - Gaurav Pandvia- 📜理解JavaScript调用栈 - Charles Freeborn- 📜JavaScript：什么是执行上下文？什么是调用栈？- Valentino Gagliardi##2. 原始类型除对象以外的所有类型都定义了不可变的值（即无法更改的值）。例如（与C不同），字符串是不可变的。我们将这些类型的值称为“原始值”。-来源###教程- 📜JavaScript中的数字编码方式 - Dr. Axel Rauschmayer- 📜关于JavaScript数字类型需要知道的 - Max Wizard K- 📜每个JavaScript开发人员都应该了解浮点数的知识 - Chewxy##3.值类型和引用类型分配非原始值的变量会被赋予对该值的引用。该引用指向内存中对象的位置。变量实际上不包含该值。-来源###教程- 📜解释JavaScript中的值vs引用 - Arnav Aggarwal- 📜JavaScript中的原始类型和引用类型 - Bran van der Meer-

📜JavaScript中的值类型，引用类型和作用域 - Ben Aston##4. 隐式，显式，名义，结构和鸭子类型类型强制转换表示当运算符的操作数是不同类型时，其中一个运算数将被转换为另一个运算数类型的“等效”值。-来源###教程- 📜关于JavaScript的隐式强制转换的注意事项 - Promise Tochi- 📜JavaScript类型强制转换解释 - Alexey Samoshkin- 📜JavaScript强制类型转换解释 - Ben Garrison##5. == vs === vs typeofJavaScript有两种外观相似但非常不同的方法来测试相等性。您可以使用或=来测试相等性。-来源###教程- 📜JavaScript双等号vs三等号 - Brandon Morelli- 📜在JavaScript中应该使用===还是==等式比较运算符？ - Panu Pitkamaki- 📜JavaScript：双等号和强制行为 - AJ Meyghani##6. 函数作用域、块作用域和词法作用域能够通过自身的变量和函数声明的方式改变自身的作用域。函数则通过其自身的词法环境引用这些变量。这一点很重要，因为表达式可以像语句一样运作，这也是为什么我们也有表达式语句的原因。然而，语句不能像表达式一样运作。-来源###教程- 📜JavaScript函数-理解基础 - Brandon Morelli- 📜函数作用域和块作用域之间的斗争 - Marius Herring- 📜在JavaScript中模拟块作用域 - Josh Clanton##7. 表达式 vs 语句表达式和语句有一个重要的区别，那就是表达式可以像语句一样运作，这也是为什么我们也有表达式语句的原因。然而，语句不能像表达式一样运作。-来源###教程- 📜JavaScript表达式，语句和表达式语句了解一切 - Promise Tochi- 📜函数表达式 vs 函数声明 - Paul Wilkins- 📜JavaScript函数——声明与表达式 - Ravi Roshan##8. IIFE，模块和命名空间函数的一种常用编码模式在峰名之间获得了一个花哨的名字：立即调用的函数表达式（Immediately-invoked Function Expression，IIFE），并且发音为“iffy”。-来源###教程- 📜精通立即调用的函数表达式 ― Chandra Gundamaraju- 📜ES6模块是否使IIFE过时？- 📜JavaScript模块，模块格式，模块加载器和模块捆绑器的10分钟入门指南 ― Jurgen Van de Moere##9. 消息队列和事件循环“JavaScript是如何进行异步和单线程的？”简而言之，JavaScript语言是单线程的，异步行为并不是JavaScript语言本身的一部分，而是在浏览器（或编程环境）的核心JavaScript语言之上构建的，并通过浏览器API访问。-来源###教程- 📜JavaScript事件循环解释 - Anoop Raveendran- 📜JavaScript事件循环：解释 - Erin Sweson-Healey- 📜理解JavaScript的事件循环 - Alexander Kondov##10. setTimeout，setInterval和requestAnimationFrame我们可以决定不立即执行函数，而是在以后的某个时间执行该函数。这被称为“调度调用”。-来源###教程- 📜setTimeout和setInterval - JavaScript.Info- 📜为什么不使用setInterval - Akanksha Sharma- 📜setTimeout VS setInterval - Develoger##11. JavaScript引擎为Web编写代码有时会让开发人员感到有点神奇，开发人员编写一系列字符，就像魔术一样，这些字符在浏览器中变成具体的图像、文字和操作。了解这项技术可以帮助开发人员更好地调整自己作为程序员的技艺。-来源###教程- 📜JavaScript引擎 - Jen Looper- 📜了解Chrome V8引擎如何将JavaScript转换为机器代码 - DroidHead- 📜了解V8的字节码 - Franziska Hinkelmann##12. 位运算符，类型数组和数组缓冲区好吧，技术上来说，对于计算机来说，一切都可以归结为1和0。它不使用数字、字符或字符串进行操作，它只使用二进制数字（位）。这个解释的简短版本是一切都以二进制形式存储。然后计算机使用UTF-8等编码将保存的位组合映射到字符、数字或不同的符号（ELI5版本）。-来源###教程- 📜使用JS进行编程：位运算 - Alexander Kondov- 📜在实际生活中使用JavaScript的位运算符 - ian m- 📜JavaScript位运算符 - w3resource##13. DOM和布局树文档对象模型（Document Object Model）通常称为DOM，是使网站具有交互性的基本部分。它是一种允许编程语言操作网站的内容、结构和样式的接口。JavaScript是客户端脚本语言，它可以在互联网浏览器中与DOM进行交互。-来源###教程- 📜如何理解和修改JavaScript中的DOM - Tania Rascia- 📜什么是文档对象模型，为什么你应该知道如何使用它 - Leonardo Maldonado- 📜带有示例的JavaScript DOM教程 - Guru99##14. 工厂和类JavaScript是一种基于原型的语言，这意味着对象的属性和方法可以通过具有克隆和扩展能力的通用对象来共享。这就是所谓的原型继承，与类继承不同。-来源###教程- 📜如何在JavaScript中使用类 - Tania Rascia- 📜JavaScript类 - 内部机制 - Majid- 📜ES6类 - Nathaniel Foster##15. this，call，apply和bind这些函数对于每个JavaScript开发人员来说非常重要，几乎在每个JavaScript库或框架中都被使用。-来源###教程- 📜理解JavaScript中的call()，apply()和bind()方法 - Aniket Kudale- 📜如何：在JavaScript中使用call()，apply()和bind() - Niladri Sekhar Dutta- 📜JavaScript的apply，call和bind方法对JavaScript专业人员至关重要 - Richard Bovell##16. new，构造函数，instanceof和实例每个JavaScript对象都有一个原型。JavaScript中的所有对象都从其原型继承其方法和属性。
【Source】(https://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e)###(https://dev.to#tutorials)教程

• 📜JavaScript初学者指南：'new’运算符 — Brandon Morelli
• 📜破解JavaScript的’new’关键字 — Cynthia Lee
• 📜构造函数，运算符’new’ — JavaScript.Info

【Source】(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)###(https://dev.to#17-prototype-inheritance-and-prototype-chain)17. 原型继承与原型链
对于有类基础语言（如Java或C++）经验的开发人员来说，JavaScript有些令人困惑，因为它是动态的，并没有提供类的实现本身（class关键字在ES2015引入，但它只是语法糖，JavaScript仍然是基于原型的）。

【Source】(https://medium.com/@happymishra66/object-create-in-javascript-fa8674df6ed2)###(https://dev.to#18-objectcreate-and-objectassign)18. Object.create与Object.assign
在JavaScript中，Object.create方法是创建新对象的方法之一。

【Source】(https://medium.com/@bojangbusiness/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d)###(https://dev.to#19-map-reduce-filter)19. map, reduce, filter
即使你不知道什么是函数式编程，你可能已经在使用map、filter和reduce，因为它们非常有用，可以通过编写更清晰的逻辑使你的代码更加简洁。

【Source】(https://hackernoon.com/javascript-and-functional-programming-pt-3-pure-functions-d572bb52e21c)###(https://dev.to#20-pure-functions-side-effects-state-mutation-and-event-propagation)20. Pure Functions, Side Effects, State Mutation and Event Propagation
我们的许多bug根源于涉及IO、数据传递、带有副作用的代码。这些问题在我们的代码库中随处可见，比如接受用户输入、接收意外的http响应或写入文件系统。不幸的是，这是一个我们应该习惯应对的严酷现实。但真的是这样吗？

【Source】(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)###(https://dev.to#21-closures)21. 闭包
闭包是将一个函数封装（闭合），并包含其周围状态（词法环境）的组合。换句话说，闭包允许您从内部函数访问外部函数的作用域。在JavaScript中，每次创建函数时都会创建闭包。

【Source】(https://www.sitepoint.com/higher-order-functions-javascript/)###(https://dev.to#22-high-order-functions)22. 高阶函数
JavaScript可以接受高阶函数。这种处理高阶函数的能力，加上其他特性，使JavaScript成为适用于函数式编程的编程语言之一。

【Source】(https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f)###(https://dev.to#23-recursion)23. 递归
将本文视为一系列学习练习。这些示例旨在让你思考，并且如果我做得对的话，也许会稍微扩展一点你对函数式编程的理解。

【Source】(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)###(https://dev.to#24-collections-and-generators)24. 集合与生成器
生成器对象是由一个生成器函数返回的对象，它符合可迭代协议和迭代器协议。

【Source】(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)###(https://dev.to#25-promises)25. Promises
Promise对象代表异步操作的最终完成（或失败）及其结果值。

【Source】(https://javascript.info/async-await)###(https://dev.to#26-asyncawait)26. async/await
有一种特殊的语法可以更方便地处理Promise，叫做“async/await”。这种语法非常容易理解和使用。

【Source】(https://blog.cloudboost.io/playing-with-data-structures-in-javascript-stack-a55ebe50f29d)###(https://dev.to#27-data-structures)27. 数据结构
JavaScript每天都在发展。随着React、Angular、Vue、NodeJS、Electron、React Native等框架和平台的快速发展，使用JavaScript开发大型应用程序已经很普遍。

【Source】(https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b)###(https://dev.to#28-expensive-operation-and-big-o-notation)28. 复杂度分析
“Big O Notation是什么？”这是一个非常常见的开发人员面试问题。简而言之，它是一个在算法运行时间方面的数学表达式，取决于输入的长度，通常讨论最坏情况。

【Source】(https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f)###(https://dev.to#29-algorithms)29. 算法
在数学和计算机科学中，算法是一组有限的、定义良好的指令序列，通常用来解决一类特定的问题或执行计算。

【Source】(https://javascript.info/class-inheritance)###(https://dev.to#30-inheritance-polymorphism-and-code-reuse)30. 继承、多态和代码重用
类继承是一种类扩展另一个类的方式，因此我们可以在现有类的基础上创建新功能。

【Source】(https://www.digitalocean.com/community/tutorial_series/javascript-design-patterns)###(https://dev.to#31-design-patterns)31. 设计模式
每个开发人员都致力于编写可维护、可读和可重用的代码。随着应用程序越来越大，代码结构变得越来越重要。设计模式对解决这个挑战至关重要，在特定情况下为常见问题提供组织结构。

【Source】(https://www.codementor.io/@michelre/use-function-composition-in-javascript-gkmxos5mj)###(https://dev.to#32-partial-applications-currying-compose-and-pipe)32. 部分应用、柯里化、组合和管道
函数组合是一种将多个简单函数组合成更复杂函数的机制。

【Source】(https://www.freecodecamp.org/news/clean-coding-for-beginners/)###(https://dev.to#33-clean-code)33. 优雅的代码
编写干净、易于理解和易于维护的代码是每个开发人员都必须掌握的技能。

如果您发现此列表有用，请收藏它，并关注我获取更多类似内容。

Eluda

大家好，Web开发者们！ 👋
如果您对记忆这么多选择器感到困难，知道您并不孤单。
我有一个解决这个问题的方法。它完全免费。打印出来，把它设为桌面背景，或者甚至把它印在T恤上。它属于您，永远属于您。
18:14 PM - 2022年5月18日