我的所有文章合并

weixin_0010034

95人浏览 · 2022-08-07 01:41:14

weixin_0010034 · 2022-08-07 01:41:14 发布

绝对是您需要了解的有关 JavaScript 工作原理的所有信息。

说真的......这个列表非常详尽,它涵盖的核心概念比我在一个非常美好的一天的工作记忆中所能记住的名字还要多。

绝对是您需要了解的有关 JavaScript 工作原理的所有信息。

说真的......这个列表非常详尽,它涵盖的核心概念比我在一个非常美好的一天的工作记忆中所能记住的名字还要多。

不过先来一点有点可耻的自我推销:

(自我宣传在一堆我的狗的照片表示的行之后结束🐕)

(后面是给初学者的JavaScript简单介绍)

(最后是主要内容/资源/嵌入的YouTube链接)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--9h62bAmV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AhuxNcspoDvOfqxvn.gif)### 我的博客:

发现更多:

[网络开发中心

_Memoization、Tabulation 和 Sorting Algorithms by Example 为什么查看运行时不是一个可靠的方法..._bgoonz-blog.netlify.app](https://bgoonz-blog.netlify.app/" netlify.app/")

[](https://res.cloudinary.com/practicaldev/image/fetch/s--CzzSFcc3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/600/1%2A_J5NcnQmHmPDBvZodMmyaA.png)这是一项正在进行的工作,可能会在未来某个时间被破坏或托管在其他地方。

[JS 模块

_A 模块是一段可重用的代码,它封装了实现细节并公开了一个公共 API,因此它可以是..._dev.to](https://dev.to/bgoonz/js-modules-4c4d "https://dev.to /bgoonz/js-modules-4c4d")

[JavaScript 中的闭包

_Answer 闭包是在另一个函数内部定义的函数,即使它是..._dev.to](https://dev.to/bgoonz/closures-in-javascript-1moc "https://dev .to/bgoonz/closures-in-javascript-1moc")

[我所有文章的列表,以链接到未来的帖子

bryanguner.medium.com](https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b "https://bryanguner.medium .com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b")

[完整的 JavaScript 参考指南

_您将要收藏 this_javascript.plainenglish.io](https://javascript.plainenglish.io/complete-javascript-reference-guide-64306cd6b0db "https://javascript.plainenglish.io/complete-javascript-reference-guide- 64306cd6b0db")

[](https://res.cloudinary.com/practicaldev/image/fetch/s--RVYeGENg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/2560/1%2A2FC8D_rbP4cT3jukydhtkg.png)

JavaScript 初学者指南

这是完整的初学者的快速介绍......跳过下面的更高级的内容和资源! (在我的狗的下一张照片蒙太奇下方)

跳过以下↓ 进入主要内容!!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MtwpJgbx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/600/1%2AHCYn5Uz_jZ6uRjgp_NA5Yw.png)如果您想跳过本节,您会在页面下方约 10% 处找到主要内容......它看起来像这样:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--TYLVGSG9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/600/0%2AiHxLNzz1MOZACC5u.png)### 数字数据类型

JS中的number数据类型用于表示任意数字

值,包括整数和十进制数。 基本算术运算符是执行特定运算的符号。

+ (加法)
- (减法)
星号(乘法)
/ (除法)
%(模数)

JS 使用一般数学顺序计算更复杂的表达式

操作又名 PEMDAS。

PEMDAS:括号、指数、乘法、除法、模数、加法、减法。
要强制执行特定的操作顺序,请在表达式的一部分周围使用组运算符 ( )。

模:检查数字可分性的非常有用的操作,

检查偶数和奇数,一个数字是否是素数,等等!

(离散数学概念,循环问题可以用模解决)

每当您有一个较小的数字 % 一个较大的数字时,答案将只是最初的小数字。
console.log(7 % 10); // => 7;

字符串数据类型

string 数据类型是一种原始数据类型,用于表示

文本数据。

可以用单或双引号括起来,最好选择一个并坚持下去以保持一致性。
如果你的字符串里面包含引号,可以叠加单引号或双引号来让它工作。

“那是一根很棒的弦”; (有效的)

'莎士比亚写道,“存在或不存在”'; (有效的)

'那是一个坏字符串'; (无效的)

备用。在字符串中添加其他引号的方法是使用模板文字。

`This is a template literal`

${function} // use ${} to invoke functions within.

> .length:可以附加到数据以返回长度的属性。

> 空字符串的长度为零。

> indices :从 0 开始的数据索引,可以使用括号符号 [ ] 调用索引。

console.log("bootcamp"[0]); // =&gt; "b"
console.log("bootcamp"[10]); // =&gt; "undefined"
console.log("boots"[1 * 2]); // =&gt; "o"
console.log("boots"["boot".length - 1]); // =&gt; "t"

进入全屏模式退出全屏模式

我们也可以通过括号传递表达式,因为 JS 总是首先计算表达式。
字符串最后一个字符的索引总是比它的长度小一。
indexOf():用于查找字符串中给定字符的第一个索引的方法。
console.log("bagel".indexOf("b")); // => 0 console.log("bagel".indexOf("z")); // => -1
如果 indexOf() 搜索中的字符在字符串中不存在,则输出将为 -1。
indexOf() 搜索将返回字符串中 char 的第一个实例索引。
连接:用于描述将字符串连接成单个字符串的词。

布尔数据类型

Boolean 数据类型是最简单的数据类型,因为只有

两个值:true 和 false。

逻辑运算符(布尔运算符)用于在我们的代码中建立逻辑。
! (not):反转布尔值。

console.log(!true); // => false console.log(!!false); // => false

&& (and) 真值表

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ywGYUDWD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AY4qzqSB0C-9AmtXf.png)- 逻辑运算顺序:JS 将评估!,然后是 &&,然后是 ||。

德摩根定律:布尔逻辑中的常见错误是错误分布!跨括号。
!(A || B) === !A && !B; !(A && B) === !A || !B;
总之,正确分配!我们还必须在括号内翻转操作。

比较运算符

所有比较运算符都将产生布尔输出。

相对比较器

> (大于)
< (小于)
>u003d (大于等于)
<u003d(小于或等于)
\u003du003du003d(等于)
!u003du003d(不等于)

> 有趣的事实:“a” < “b” 被认为是有效的 JS 代码,因为字符串

> 比较按字典顺序进行比较(意思是字典顺序),

> 所以“a”小于“b”,因为它出现得更早!

> 如果有两个字符串的静止比较

> 按字典顺序(即 app vs apple),比较将认为

> 较短的字符串较小。

** u003du003d 和 u003du003du003d 之间的区别**

\u003du003du003d:严格相等,只有在两个比较完全相同时才会返回 true。
\u003du003d:松散的平等,即使值是不同的类型,也会返回真,因为强制。 (避免使用这个)

变量

变量用于存储要引用和操作的信息

在一个程序中。

我们使用 let 关键字和 \u003d 单等号(赋值运算符)初始化变量。
let bootcamp = "Lambda"; console.log(bootcamp); // "Lambda"
JS 变量名可以包含任何字母数字字符,

下划线或美元符号(不能与数字一起使用)。

如果不为变量声明值,则 undefined 是

自动设置。

let bootcamp; console.log(bootcamp); // undefined
我们可以改变之前声明的变量的值(让,不

const) 通过重新为其分配另一个值。

let 是 var 的更新版本;有一些

提升和全局/块范围方面的差异 — 将是

课程稍后会介绍(常见的面试问题!)

作业速记

let num = 0;num += 10; // same as num = num + 10num -= 2; // same as num = num - 2num /= 4; // same as num = num / 4num *= 7; // same as num = num * 7

进入全屏模式退出全屏模式

一般来说,任何无意义的算术都会导致NaN;通常包含未定义的操作。
声明:简单引入变量名的过程。
初始化:在同一行上声明和分配变量的过程。

功能

函数是调用时将运行的代码过程。功能

被使用,这样我们就不必重写代码来做同样的事情

一遍又一遍。 (将它们视为“子程序”)

函数声明:我们最初编写函数时的过程。
包括三件事:
函数的名称。
参数列表()
执行代码 {}
函数调用:我们可以随时随地调用我们的函数*我们想要的。 (*wherever 仅在初始声明之后)
JS 从上到下、从左到右评估代码。
当我们稍后在程序中执行声明的函数时,我们将其称为调用我们的函数。
除非另有说明,否则 JS 中的每个函数都返回 undefined。
当我们在函数中点击 return 语句时,我们会立即退出函数并返回到调用函数的位置。
在 JS 中命名函数时,总是使用 camelCase 并将其命名为适当的名称。 > 伟大的代码读起来像英语,几乎可以解释自己。想一想:优雅、可读、可维护!

参数和参数

参数:逗号分隔的变量指定为函数声明的一部分。
Arguments:调用函数时传递给函数的值。
如果在函数调用期间传递的参数数量与列出的参数数量不同,它仍然可以工作。
但是,是否没有为参数提供足够的参数,我们的函数可能会产生 Nan。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--RVYeGENg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/2560/1%2A2FC8D_rbP4cT3jukydhtkg.png)

初学者介绍结束(下面的主要文章)

↓↓绝对是你需要知道的关于 JavaScript 的一切↓↓

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6MXWQr2h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AfOaTsnCJCYc3wD4x)[leonardomso/33-js-concepts

_创建此存储库的目的是帮助开发人员掌握 JavaScript 中的概念。它不是一个..._github.com](https://github.com/leonardomso/33-js-concepts#20-pure-functions-side-effects-and-state-mutation "https://github.com/ leonardomso/33-js-concepts#20-pure-functions-side-effects-and-state-mutation")

[调用堆栈 - MDN Web Docs Glossary:Web 相关术语的定义 | MDN

_调用堆栈是解释器(如 Web 浏览器中的 JavaScript 解释器)跟踪其..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Glossary/ Call_stack "https://developer.mozilla.org/en-US/docs/Glossary/Call_stack")

[了解 Javascript 函数执行 — 调用堆栈、事件循环、任务等

_Web 开发人员或前端工程师,正如我们喜欢被称为的那样,现在做所有事情,从充当..._medium.com](https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-任务事件循环调用堆栈更多部分1-5683dea1f5ec“https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more -part-1-5683dea1f5ec")

[了解 JavaScript 调用堆栈

_JavaScript 引擎(可在浏览器等托管环境中找到)是单线程解释器..._medium.freecodecamp.org](https://medium.freecodecamp.org/understanding-the-javascript-call-stack- 861e41ae61d4 "https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4")

[Javascript:什么是执行上下文?什么是调用堆栈?

_什么是 Javascript 中的执行上下文?我打赌你不知道答案。一个...堆栈/“https://web.archive.org/web/2018071233338/https://www.valentinog.com/blog/js-execution-context-call-stack/”)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--F1usw1AD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2Ab31hiO4ynbDLRrXWEFF4aQ.png)[了解 Javascript 中的执行上下文和执行堆栈

_了解执行上下文和堆栈以成为更好的 Javascript 开发人员。_blog.bitsrc.io](https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0 "https:// /blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0")

[JavaScript 工作原理:引擎、运行时和调用堆栈概述

_随着 JavaScript 越来越流行,团队正在他们的堆栈中的许多级别上利用它的支持......_blog.sessionstack.com](https://blog.sessionstack.com/how-does-javascript-actually-work-part- 1-b0bacc073cf "https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf")

[用简单的术语分解 JavaScript 中的作用域、上下文和闭包。

_“JavaScript 的全局作用域就像一个公共厕所。您无法避免进入那里,但请尽量限制您与..._medium.com 的联系](https://medium.com/codex/scope-closures-context-in-javascript-f126f1523104 "https://medium. com/codex/scope-closures-context-in-javascript-f126f1523104")

[JavaScript 中提升、作用域和闭包的终极指南 - ui.dev

_这可能看起来令人惊讶,但在我看来,理解 JavaScript 最重要和最基本的概念......_tylermcginnis.com](https://tylermcginnis.com/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures -in-javascript/“https://tylermcginnis.com/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript/”)

[JavaScript 工作原理:JavaScript 引擎、堆和调用栈概述

_大家好👋,我希望你们做得很好。所以,今天你要学习 JavaScript 引擎概述,Heap..._dev.to](https://dev.to/bipinrajbhar/how-javascript-works-under-the-hood-an-overview-of-javascript -engine-heap-and-call-stack-1j5o "https://dev.to/bipinrajbhar/how-javascript-works-under-the-hood-an-overview-of-javascript-engine-heap-and-call -stack-1j5o")

[JavaScript 中的基本数据结构

_JavaScript_medium.com 中的数据结构](https://medium.com/codex/fundamental-data-structures-in-javascript-8f9f709c15b4 "https://medium.com/codex/fundamental-data-structures-in-javascript- 8f9f709c15b4")

这是一个实时代码编辑器,您可以在其中处理任何示例......

编码练习

力科
采访位
代码
HackerRank
欧拉计划
连接
Google Code Jam 练习题
黑客地球
顶级编码器
代码厨师
代码战
代码信号
码字
火码

取决于数据

> 在谈论时间复杂度时,数据结构和算法的共同点是它们都在处理数据。当您处理数据时,您会变得依赖它们,因此时间复杂度也取决于您收到的数据。为了解决这个问题,我们讨论了 3 种不同的时间复杂度。

最佳情况复杂性:当数据看起来最好时
最坏情况的复杂性:当数据看起来最差时
平均案例复杂度:当数据看起来平均时

大 O 表示法

复杂性通常用大 O 表示法表示。关于这个主题的维基百科页面非常复杂,但你可以在这里找到最著名的数据结构和排序算法的不同复杂性的一个很好的总结。

数组数据结构

[](https://res.cloudinary.com/practicaldev/image/fetch/s--3SdfGoD---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1 .medium.com/max/800/0%2AQk3UYgeqXamRrFLR.gif)### 定义

Array 数据结构,或简称为 Array,是由一组元素(值或变量)组成的数据结构,每个元素由至少一个数组索引或键标识。最简单的数据结构类型是线性数组,也称为一维数组。来自维基百科

数组是最古老和最重要的数据结构之一,并且被每个程序使用。它们还用于实现许多其他数据结构。

[JavaScript 数据类型和数据结构 - JavaScript | MDN

_编程语言都有内置的数据结构,但这些通常因一种语言而异。这..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values "https://developer.mozilla.org/en-US/docs/Web /JavaScript/Data_structures#Primitive_values")

[数字是如何在 JavaScript 中编码的

_编辑描述_2ality.com](http://2ality.com/2012/04/number-encoding.html "http://2ality.com/2012/04/number-encoding.html")

[这是您需要了解的有关 JavaScript 的 Number 类型的内容

_为什么 0.1+0.2 不等于 0.3 而9007199254740992 等于9007199254740993_medium.com](https://medium.com/angular-in-depth/javascripts-number-type-8d59199db1b6 "https://medium.com/angular -in-depth/javascripts-number-type-8d59199db1b6")

[每个 JavaScript 开发人员都应该知道的关于浮点数的知识

_在我发表关于 JavaScript 的演讲之后(真的,我在那里试图无耻地插入我的书 - Underhanded JavaScript and..._blog.chewxy.com](https://blog.chewxy.com/2014/02/24/what-every -javascript-developer-should-know-about-floating-point-numbers/“https://blog.chewxy.com/2014/02/24/what-every-javascript-developer-should-know-about-floating-点数/")

[JavaScript 基元的秘密生活

_你可能不知道,但在 JavaScript 中,每当你与字符串、数字或布尔原语交互时,你都会输入一个..._javascriptweblog.wordpress.com](https://javascriptweblog.wordpress.com/2010/09/27/the-secret -life-of-javascript-primitives/“https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/”)

作为对象的原语

这是 JavaScript 的创造者所面临的悖论:

对于字符串或数字之类的原语,人们想要做很多事情。使用方法访问它们会很棒。
基元必须尽可能快速和轻量级。

该解决方案看起来有点尴尬,但它是:

1.基元仍然是原始的。根据需要,单个值。

该语言允许访问字符串、数字、布尔值和符号的方法和属性。
为了让它工作,一个提供额外功能的特殊“对象包装器”被创建,然后被销毁。

每种基本类型的“对象包装器”都不同,它们被称为:String、Number、Boolean和Symbol。因此,它们提供了不同的方法集。

例如,有一个字符串方法str.toUpperCase()返回一个大写的str。

这是它的工作原理:

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

进入全屏模式退出全屏模式

很简单,对吧?以下是str.toUpperCase()中实际发生的情况:

字符串str是一个原语。所以在访问它的属性的那一刻,会创建一个特殊的对象,它知道字符串的值,并且有有用的方法,比如toUpperCase()。
该方法运行并返回一个新字符串(显示为alert)。
特殊对象被销毁,只留下原始str。

所以原语可以提供方法,但它们仍然是轻量级的。

JavaScript 引擎高度优化了这个过程。它甚至可能完全跳过额外对象的创建。但它仍然必须遵守规范并表现得好像它创造了规范一样。

[原始类型 |流动

_JavaScript 有许多不同的原始类型 (MDN):原始类型在语言中显示为..._flow.org](https://flow.org/en/docs/types/primitives/ "https://flow. org/en/docs/types/primitives/")

[(不是)JavaScript 中的一切都是对象

_这最初发表在 The Brewing Press 对于那些只想得到答案的人,请随意跳到..._dev.to](https://dev.to/d4nyll/not-everything-in-javascript-is-an-对象“https://dev.to/d4nyll/not-everything-in-javascript-is-an-object”)

[JavaScript 中的对象

_对象是存储其他数据的数据结构,类似于数组存储元素的方式。_medium.com](https://medium.com/codex/objects-in-javascript-b212486dade6"https://medium.com/ codex/objects-in-javascript-b212486dade6")

[深入了解 JavaScript 对象

_深入了解 JavaScript 对象描述符_blog.bitsrc.io](https://blog.bitsrc.io/diving-deeper-in-javascripts-objects-318b1e13dc12 "https://blog.bitsrc.io/diving-deeper-in -javascripts-objects-318b1e13dc12")

[JavaScript 中 Object.freeze() 与 Const 的区别

_ES6 自发布以来为 JavaScript 带来了一些新特性和方法。这些功能得到了更好的改进......_medium.com](https://medium.com/@bolajiayodeji/the-differences-between-object-freeze-vs-const-in-javascript-4eacea534d7c "https://medium.com/ @bolajiayodeji/the-differences-between-object-freeze-vs-const-in-javascript-4eacea534d7c")

[在 Javascript 中解释价值与参考

_简单看一下计算机内存就能解释发生了什么_codeburst.io](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0 "https://codeburst.io/explaining-value-vs-reference -in-javascript-647a975e12a0")

是否会发生变异:

链接...。

.concat

无突变

说明

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

Array.prototype.concat ( [ item1 [ , item2 [ , … ] ] ] )

进入全屏模式退出全屏模式

[Array.prototype.concat() - JavaScript | MDN

_concat() 方法用于合并两个或多个数组。这种方法不会改变现有的数组,而是..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat "https:// /developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat")

示例

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

进入全屏模式退出全屏模式

.copyWithin()

变异

说明

copyWithin() 方法将数组的一部分浅拷贝到同一数组中的另一个位置并返回它,而不修改它的大小。

arr.copyWithin(target)
arr.copyWithin(target, start)
arr.copyWithin(target, start, end)

进入全屏模式退出全屏模式

[Array.prototype.copyWithin() - JavaScript | MDN

_copyWithin() 方法将数组的一部分浅拷贝到同一数组中的另一个位置并返回它而不..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/参考/Global_Objects/Array/copyWithin "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin")

示例

var array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

进入全屏模式退出全屏模式

.entries()

无突变

说明

entries() 方法返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对。

a.entries()

进入全屏模式退出全屏模式

[Array.prototype.entries() - JavaScript | MDN

_entry() 方法返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对。_developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Global_Objects/Array/entries "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries")

示例

var array1 = ['a', 'b', 'c'];

var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

进入全屏模式退出全屏模式

.每

无突变

说明

every() 方法测试数组中的所有元素是否通过提供的函数实现的测试。

Array.prototype.every ( callbackfn [ , thisArg ] )

进入全屏模式退出全屏模式

[Array.prototype.every() - JavaScript | MDN

_every() 方法测试数组中的所有元素是否通过提供的函数实现的测试。它..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every "https://developer.mozilla.org/en-US /docs/Web/JavaScript/Reference/Global_Objects/Array/every")

示例

function isBelowThreshold(currentValue) {
  return currentValue &lt; 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

进入全屏模式退出全屏模式

.fill()

变异

说明

fill() 方法用静态值填充数组中从开始索引到结束索引的所有元素。

arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

进入全屏模式退出全屏模式

[Array.prototype.fill() - JavaScript | MDN

_fill() 方法将数组中的所有元素更改为静态值,从起始索引(默认 0)到结束索引..._developer.mozilla.org](https://developer.mozilla.org/en-US/ docs/Web/JavaScript/Reference/Global_Objects/Array/fill "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill")

示例:

var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

进入全屏模式退出全屏模式

.过滤器

无突变

说明

filter() 方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。

Array.prototype.filter ( callbackfn [ , thisArg ] )

进入全屏模式退出全屏模式

[Array.prototype.filter() - JavaScript | MDN

_该方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。函数是..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter "https://developer.mozilla.org/en -US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter")

示例

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word =&gt; word.length &gt; 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

进入全屏模式退出全屏模式

.find()

无突变

说明

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回未定义。

arr.find(callback[, thisArg])

进入全屏模式退出全屏模式

[Array.prototype.find() - JavaScript | MDN

_find() 方法返回提供的数组中满足提供的测试的第一个元素的值..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /Global_Objects/Array/find "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find")

示例

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element &gt; 10;
});

console.log(found);
// expected output: 12

进入全屏模式退出全屏模式

[JavaScript 中的值类型、引用类型和范围

_JavaScript 的基础只有两件事:对象和函数。_medium.com](https://medium.com/@_benaston/lesson-1b-javascript-fundamentals-380f601ba851 "https://medium.com/@_benaston/课程 1b-javascript-fundamentals-380f601ba851")

[回归根源:JavaScript 价值与参考

_让我们看看价值与参考的概念。每个 JavaScript 开发人员都应该知道这个主题,因为它通常是..._medium.com](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18 "https://medium.com /dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18")

[掌握 JavaScript 中的“按值”和“按引用”

_并了解为什么了解差异至关重要_hackernoon.com](https://hackernoon.com/grasp-by-value-and-by-reference-in-javascript-7ed75efa1293 "https://hackernoon.com/grasp-by -value-and-by-reference-in-javascript-7ed75efa1293")

[JavaScript 引用和复制变量 |黑客中午

_每种编程语言都有自己的特点(JavaScript也有很多),今天我要讲的是......_hackernoon.com](https://hackernoon.com/javascript-reference-and-copy-variables-b103074fdf0" https://hackernoon.com/javascript-reference-and-copy-variables-b103074fdf0")

[JavaScript 原语与参考值

总结:在本教程中,您将了解原始值和参考值之间的区别。在 JavaScript 中,...](http://www.javascripttutorial.net/javascript-primitive-vs-reference-values/ "http://www.javascripttutorial.net/javascript-primitive-vs-reference-values/" )www.javascripttutorial.net

[JavaScript 引用 vs. 值

_我正在寻找一些关于 JavaScript 何时通过值传递某些东西以及何时通过..._stackoverflow.com](https://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value) https://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value")

[JavaScript 面试准备:原始与参考类型

_original 文章在 JavaScript 采访中,他们可能会问你是否了解原始和..._dev.to 之间的区别](https://dev.to/mostlyfocusedmike/javascript-interview-prep-primitive-vs-reference-types-3o4f " https://dev.to/mostlyfocusedmike/javascript-interview-prep-primitive-vs-reference-types-3o4f")

[您需要了解的关于 Javascript 的隐式强制转换的知识

_Javascript 的隐式强制只是指 Javascript 试图将意外的值类型强制转换为..._dev.to](https://dev.to/promhize/what-you-need-to-know-about-javascripts-implicit-coercion- e23“https://dev.to/promhize/what-you-need-to-know-about-javascripts-implicit-coercion-e23”)

[JavaScript 类型强制解释

_了解你的引擎_medium.freecodecamp.org](https://medium.freecodecamp.org/js-type-coercion-explained-27ba3d9a2839 "https://medium.freecodecamp.org/js-type-coercion-explained-27ba3d9a2839")

[Javascript 强制解释

_连同一些实际示例_hackernoon.com](https://hackernoon.com/javascript-coercion-explained-545c895213d3 "https://hackernoon.com/javascript-coercion-explained-545c895213d3")

[** Javascript 中的类型强制究竟是什么?**

_让我们从类型系统的简短介绍开始,我认为这将帮助您理解类型的一般概念..._stackoverflow.com](https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in -javascript“https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript”)

https://thedevs.network/

_弱动态类型可以说是每个人都喜欢挑选的关于 JavaScript 的事情之一。对于优雅的动态......_thedevs.network

[getify/You-Dont-Know-JS

_JavaScript 系列丛书。 @YDKJS 在推特上。通过创建..._github.com](https://github.com/getify/You-Dont-Know-JS/tree/1st-ed "https://github.com 为 getify/You-Dont-Know-JS 开发做出贡献.com/getify/You-Dont-Know-JS/tree/1st-ed")

[JavaScript — 双等式与三等式

_在 3 分钟内了解 JavaScript 中的相等性_codeburst.io](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a "https://codeburst.io/javascript-double-equals-vs-triple -等于-61d4ce5a121a")

[我应该在 JavaScript 中使用 u003du003du003d 还是 u003du003d 相等比较运算符?

_你知道 JavaScript 中有两种不同的相等比较运算符:u003du003du003d 和 u003du003d 运算符,或者三元组..._bytearcher.com](https://bytearcher.com/articles/equality-comparison-operator-javascript/ "https ://bytearcher.com/articles/equality-comparison-operator-javascript/")

[\u003du003d vs u003du003du003d JavaScript:双重等于和强制 |编码员

u003du003d(双等号或松散等号)运算符是一个有趣的运算符。许多人避免它,因为他们不知道如何...](https://www.codementor.io/javascript/tutorial/double-equals-and-coercion-in-javascript "https://www.codementor.io/ javascript/tutorial/double-equals-and-coercion-in-javascript")www.codementor.io

[为什么在 JavaScript 中使用三等号运算符? - 令人印象深刻的网络

“判断两个变量是否等价是编程中最重要的操作之一。”那是......](https://www.impressivewebs.com/why-use-triple-equals-javascipt/“https://www.impressivewebs.com/why-use-triple-equals-javascipt/”)www .impressivewebs.com

[JavaScript 中 u003du003d 和 u003du003du003d 有什么区别?

表面上 u003du003d 和 u003du003du003d 在功能上看起来是一样的,那么为什么还要输入一个额外的字符呢?在这个视频中...](https://www.oreilly.com/learning/what-is-the-difference-between-and-in-javascript "https://www.oreilly.com/learning/what-is -javascript之间的差异”)www.oreilly.com

[为什么javascript的typeof总是返回“object”?

_要与其他添加,typeof 返回对象和原语。 javascript 中有 5 种原始类型..._stackoverflow.com](https://stackoverflow.com/questions/3787901/why-javascripts-typeof-always-return-object "https://stackoverflow.com/questions/3787901/why -javascripts-typeof-always-return-object")

[检查 Javascript 中的类型

_你有没有想过:检查 Javascript 变量是否为数组的正确方法是什么?做一个谷歌搜索和..._tobyho.com](http://tobyho.com/2011/01/28/checking-types-in-javascript/ "http://tobyho.com/2011/01/28/checking-类型-in-javascript/")

[如何更好地检查 javascript 中的数据类型 - Webbjocke

_检查 javascript 中的数据类型并不总是最简单的。该语言本身提供了一个运算符..._webbjocke.com](https://webbjocke.com/javascript-check-data-types/ "https://webbjocke.com/javascript-check-data-types/")

[托默·阿伯巴赫 |检查 JavaScript 中是否存在值

_当我第一次开始学习 JavaScript 时,我对开发人员检查缺失的看似无穷无尽的方式感到困惑......_tomeraberba.ch](https://tomeraberba.ch/html/post/checking-for-the-absence-of-a-value -in-javascript.html "https://tomeraberba.ch/html/post/checking-for-the-absence-of-a-value-in-javascript.html")

[getify/You-Dont-Know-JS

_JavaScript 系列丛书。 @YDKJS 在推特上。通过创建..._github.com](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures "https 为 getify/You-Dont-Know-JS 开发做出贡献://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures")

[JavaScript 函数 — 了解基础知识

_探索 JavaScript 中的函数 — 声明、表达式、调用等。_codeburst.io](https://codeburst.io/javascript-functions-understanding-the-basics-207dbf42ed99 "https://codeburst.io/javascript-functions -了解基础知识 207dbf42ed99")

[ES6: var, let 和 const - 函数作用域和块作用域之间的战斗

在 ES6 之前的时代,在 JavaScript 中只有一种声明变量的方法——使用 var。 var 有...](http://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/"http ://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/")www.deadcoderising.com

[在 JavaScript 中模拟块作用域

_虽然有很多问题让来自其他语言的开发人员感到困惑,但变量作用域可能是第一位的......_adripofjavascript.com](http://adripofjavascript.com/blog/drips/emulating-block-scope-in-javascript.html" http://adripofjavascript.com/blog/drips/emulating-block-scope-in-javascript.html")

[JavaScript 中函数作用域和块作用域的区别

_回到 var、let 和 const 变量的基础知识_josephcardillo.medium.com](https://josephcardillo.medium.com/the-difference-between-function-and-block-scope-in-javascript-4296b2322abe "https: //josephcardillo.medium.com/the-difference-between-function-and-block-scope-in-javascript-4296b2322abe")

[JavaScript 中的函数作用域和块作用域

_以下行是 JavaScript 代码的有效行吗?_edgecoders.com](https://edgecoders.com/function-scopes-and-block-scopes-in-javascript-25bbd7f293d7 "https://edgecoders.com/function-范围和块范围-in-javascript-25bbd7f293d7")

[理解 JavaScript 中的作用域和上下文

_Understanding Scope and Context in JavaScript 2013 年 8 月 16 日 JavaScript JavaScript 对范围和上下文的实现..._ryanmorr.com](http://ryanmorr.com/understanding-scope-and-context-in-javascript/ "http://ryanmorr.com /understanding-scope-and-context-in-javascript/")

[JavaScript 范围和闭包

_Scopes 和闭包在 JavaScript 中很重要。但是,当我第一次开始时,它们让我感到困惑。这是一个..._css-tricks.com](https://css-tricks.com/javascript-scope-closures/ "https://css-tricks.com/javascript-scope-closures/")

[了解 JavaScript 中的作用域 - Telerik 博客

_Scope 是 JavaScript 中一个重要但含糊的概念。正确使用,它可以让您利用良好的设计..._developer.telerik.com](https://developer.telerik.com/topics/web-development/understanding-scope-in-javascript/ "https://developer.telerik .com/topics/web-development/understanding-scope-in-javascript/")

[第 16 章。变量:作用域、环境和闭包

_第 16 章变量:作用域、环境和闭包本章首先解释如何使用变量,然后..._speakingjs.com](http://speakingjs.com/es5/ch16.html "http://speakingjs.com/es5 /ch16.html")

[理解 JavaScript 中的作用域

_JavaScript 有一个叫做 Scope 的特性。虽然对于许多新人来说,范围的概念并不那么容易理解......_scotch.io](https://scotch.io/tutorials/understanding-scope-in-javascript "https://scotch.io/tutorials/understanding-范围在 javascript")

[何时使用函数声明与函数表达式

_它们之间的区别以及何时使用其中一种。_medium.freecodecamp.org](https://medium.freecodecamp.org/when-to-use-a-function-declarations-vs-a-function-expression- 70f15152a0a0“https://medium.freecodecamp.org/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0”)

[JavaScript 基础备忘单:范围、上下文和“this”

_Scope 范围是指可以在程序中访问变量的位置。一些变量可以从任何地方访问..._dev.to](https://dev.to/alexandrafren/a-javascript-fundamentals-cheat-sheet-scope-context-and-this-28ai "https://dev.to /alexandrafren/a-javascript-fundamentals-cheat-sheet-scope-context-and-this-28ai")

[快速提示:函数表达式与函数声明 - SitePoint

本文由 Jeff Mott 同行评审。感谢所有 SitePoint 的同行评审员制作 SitePoint 内容...](https://www.sitepoint.com/function-expressions-vs-declarations/ "https://www.sitepoint.com/function-expressions-vs-声明/")www.sitepoint.com

[JavaScript 函数 — 声明 vs 表达式

_Functions 在 JavaScript 中被视为一等公民,明确概念非常重要......_medium.com](https://medium.com/@raviroshan.talk/javascript-function-declaration-vs-expression-f5873b8c7b38 “https://medium.com/@raviroshan.talk/javascript-function-declaration-vs-expression-f5873b8c7b38”)

[函数声明与函数表达式

_什么是 JavaScript 中的函数语句/声明?_medium.com](https://medium.com/@mandeep1012/function-declarations-vs-function-expressions-b43646042052 "https://medium.com/@mandeep1012/function-声明-vs-函数-表达式-b43646042052")

[函数声明与函数表达式

_让我们从一个小测验开始。在每种情况下会发出什么警报?:问题 1:问题 2:问题 3:问题 4:如果您..._javascriptweblog.wordpress.com](https://javascriptweblog.wordpress.com/2010/07/06/function-declarations- vs-function-expressions/“https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/”)

[基本 JavaScript:掌握立即调用的函数表达式

_从里到外理解函数,然后学习如何利用它们编写现代、干净的 JavaScript 代码是一个......_vvkchandra.medium.com](https://vvkchandra.medium.com/essential-javascript-mastering-immediately-invoked-function-表达式-67791338ddc6 "https://vvkchandra.medium.com/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6")

[** ES6 模块是否让 IIFE 过时了? - 哈希节点**

_IIFE 是 ES5 标准中最常用的模式之一,因为函数是声明..._hashnode.com 范围块的唯一方法](https://hashnode.com/post/do-es6-modules-make-the -case-of-iifes-obsolete-civ96wet80scqgc538un20es0 "https://hashnode.com/post/do-es6-modules-make-the-case-of-iifes-obsolete-civ96wet80scqgc538un20es0")

[** JavaScript 模块、模块格式、模块加载器和模块捆绑器的 10 分钟入门知识**

现代 JavaScript 开发可能是压倒性的。在进行项目时,您可能想知道为什么所有现代...](https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and -module-bundlers/“https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/”)www.jvandemo .com

[16\。模块

_编辑描述_exploringjs.com](http://exploringjs.com/es6/ch_modules.html "http://exploringjs.com/es6/ch_modules.html")

[ES 模块:深入了解卡通 - Mozilla Hacks - Web 开发人员博客

_ES 模块为 JavaScript 带来了一个官方的、标准化的模块系统。随着 5 月 Firefox 60 的发布,所有..._hacks.mozilla.org](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/ "https://hacks .mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/")

[理解 ES6 模块 - SitePoint

几乎每种语言都有模块的概念——一种将在一个文件中声明的功能包含在另一个文件中的方法......](https://www.sitepoint.com/understanding-es6-modules/ "https://www.sitepoint.com /understanding-es6-modules/")www.sitepoint.com

[JavaScript 中的 ES6 模块概述

_Introduction 直到最近,如果你想充分利用 JavaScript 中的模块,你需要使用..._blog.cloud66.com](https://blog.cloud66.com/an-overview-of-es6-modules-in- javascript/ "https://blog.cloud66.com/an-overview-of-es6-modules-in-javascript/")

[深入了解 ES6 模块

_欢迎回到 ES6——“哦,很好。这不是另一篇关于 Unicode 的文章”——在深度系列中。如果您从未去过......_ponyfoo.com](https://ponyfoo.com/articles/es6-modules-in-depth "https://ponyfoo.com/articles/es6-modules-in-depth")

[ES6 模块、Node.js 和 Michael Jackson 解决方案

_JavaScript 从来没有一个标准的方法来将功能从一个源文件导入和导出到另一个文件。嗯,它有..._medium.com](https://medium.com/dailyjs/es6-modules-node-js-and-the-michael-jackson-solution-828dc244b8b "https://medium.com/dailyjs/ es6-modules-node-js-and-the-michael-jackson-solution-828dc244b8b")

[JavaScript 模块:初学者指南

_如果你是 JavaScript 新手,像“模块捆绑器与模块加载器”、“Webpack 与 Browserify”和“AMD..._medium.freecodecamp.org](https://medium.freecodecamp.org/javascript-modules -a-beginner-s-guide-783f7d7a5fcc “https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc”)

[JavaScript 模块

_这篇文章解释了如何使用 JavaScript 模块,如何负责任地部署它们,以及 Chrome 团队是如何工作的......_developers.google.com](https://developers.google.com/web/fundamentals/primers/modules" https: //developers.google.com/web/fundamentals/primers/modules")

[IIFE:立即调用的函数表达式

_IIFE 是一个同时声明和调用的函数。您可以使用匿名函数和..._dev.to 创建它们调用函数表达式 49c5")

[JavaScript 事件循环解释

_“JavaScript 是如何异步和单线程的?”简短的回答是 JavaScript 语言是单线程的..._medium.com](https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4 "https://medium.com/front -end-weekly/javascript-event-loop-explained-4cd26af121d4")

[JavaScript 事件循环:解释

_随着 JavaScript 作为网络浏览器的脚本语言几乎无处不在,拥有一个基本的..._blog.carbonfive.com](https://blog.carbonfive.com/2013/10/27/the-javascript-事件循环解释/“https://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/”)

[理解 JS:事件循环

_由于数量惊人的库、工具和各种使您的开发更容易的东西,很多..._hackernoon.com](https://hackernoon.com/understanding-js-the-event-loop-959beae3ac40 "https ://hackernoon.com/understanding-js-the-event-loop-959beae3ac40")

[了解 JavaScript 事件循环

如果您是听说过事件循环、回调队列、并发模型和调用堆栈等术语的人,但是......](https://www.zeolearn.com/magazine/understanding-the-javascript-event-loop "https: //www.zeolearn.com/magazine/understanding-the-javascript-event-loop")www.zeolearn.com

[javascript中的事件循环

_如果你喜欢 javascript,你需要学习这个。 JavaScript 更深层次的方面之一是它的事件循环。它的..._code.likeagirl.io](https://code.likeagirl.io/what-the-heck-is-event-loop-1e414fccef49 "https://code.likeagirl.io/what-the-heck-is -事件循环 1e414fccef49")

[JavaScript 事件循环

_事件循环是了解 JavaScript 最重要的方面之一。我已经用..._flaviocopes.com 编程多年](https://flaviocopes.com/javascript-event-loop/ "https://flaviocopes.com/javascript-event-loop/")

[JavaScript 的工作原理:事件循环和异步编程的兴起 + 5 种更好的编码方式......

_欢迎发布致力于探索 JavaScript 及其构建组件的系列的第 4 篇文章。在..._blog.sessionstack.com](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to- Better-coding-with-2f077c4438b5 "https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-带-2f077c4438b5")

[任务、微任务、队列和时间表

_编辑描述_jakearchibald.com](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/“https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/”)

[用比萨餐厅类比可视化 JavaScript 事件循环

_考虑一家比萨店。我们目前从一个客户那里得到两种类型的订单——一种是..._dev.to](https://dev.to/presto412/visualising-the-javascript-event-loop-with-a-pizza- restaurant-analogy-47a8 "https://dev.to/presto412/visualising-the-javascript-event-loop-with-a-pizza-restaurant-analogy-47a8")

[✨♻️ JavaScript 可视化:事件循环

_Oh boi 事件循环。这是每个 JavaScript 开发人员必须以一种或另一种方式处理的事情之一......_dev.to](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif "https://dev.到/lydiahallie/javascript-visualized-event-loop-3dif")

[调度:setTimeout 和 setInterval

_编辑描述_javascript.info](https://javascript.info/settimeout-setinterval "https://javascript.info/settimeout-setinterval")

[为什么不使用 setInterval

_最近,我遇到了一个要求,我必须在特定时间间隔后重复调用一个函数,比如..._dev.to](https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9" https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9")

[setTimeout VS setInterval

_Intro_develoger.com](https://develoger.com/settimeout-vs-setinterval-cff85142555b "https://develoger.com/settimeout-vs-setinterval-cff85142555b")

[使用 requestAnimationFrame

_过去只有一种方法可以在 JavaScript 中执行定时循环:setInterval()。如果你需要重复一些漂亮的东西......_css-tricks.com](https://css-tricks.com/using-requestanimationframe/ "https://css-tricks.com/using-requestanimationframe/")

[了解 JavaScript 的 requestAnimationFrame() 方法以获得流畅的动画效果

更新时间:2017 年 11 月 1 日当今的现代网络在每个页面上都充满了值得一看的景点,菜单滑入其中......](http://www.javascriptkit.com/javatutors/requestanimationframe.shtml "http:// www.javascriptkit.com/javatutors/requestanimationframe.shtml")www.javascriptkit.com

[在 JavaScript 中处理时间间隔

在开发 Electron 应用程序 Pomolectron 时,我需要通过 setInterval()...](https://www.amitmerchant.com/Handling-Time-Intervals-In-Javascript/ "https://www. amitmerchant.com/Handling-Time-Intervals-In-Javascript/")www.amitmerchant.com

[JavaScript 引擎 -

由 Jen Looper 为 Web 编写代码有时感觉有点神奇,因为开发人员编写了一系列...](http://www.softwaremag.com/javascript-engines/ "http://www.softwaremag.com/javascript -engines/")www.softwaremag.com

[了解 Chrome V8 引擎如何将 JavaScript 转换为机器代码

_在深入了解 Chrome V8 的核心之前,首先让我们了解一下基础知识。我们所有的系统都包含..._medium.freecodecamp.org](https://medium.freecodecamp.org/understanding-the-core-of-nodejs-the-powerful-chrome-v8-engine-79e7eb8af964 "https:// medium.freecodecamp.org/understanding-the-core-of-nodejs-the-powerful-chrome-v8-engine-79e7eb8af964")

[理解 V8 的字节码

_V8 是 Google 的开源 JavaScript 引擎。 Chrome、Node.js 和许多其他应用程序都使用 V8。本文..._medium.com](https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775 "https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775")

[Google V8 JavaScript 引擎简史

Javascript 在开发者圈子中被认为是一种糟糕的语言。它是无类的、松散的类型,并且受到...](https://www.mediacurrent.com/blog/brief-history-googles-v8-javascript-engine/ "https://www.mediacurrent.com/blog/简介-历史-googles-v8-javascript-engine/")www.mediacurrent.com

[JavaScript 要点:为什么你应该知道引擎是如何工作的

_这篇文章也有西班牙语版本。_medium.freecodecamp.org](https://medium.freecodecamp.org/javascript-essentials-why-you-should-know-how-the-engine-works-c2cc0d321553"https:// /medium.freecodecamp.org/javascript-essentials-why-you-should-know-how-the-engine-works-c2cc0d321553")

[JavaScript 引擎基础:形状和内联缓存

_本文描述了所有 JavaScript 引擎共有的一些关键基础知识——不仅仅是 V8,引擎..._mathiasbynens.be](https://mathiasbynens.be/notes/shapes-ics "https://mathiasbynens.be/notes /形状-ics")

[JavaScript 引擎基础:优化原型

_本文描述了所有 JavaScript 引擎通用的一些关键基础知识——不仅仅是 V8,引擎..._mathiasbynens.be](https://mathiasbynens.be/notes/prototypes "https://mathiasbynens.be/notes/prototypes ")

[V8 中的元素种类

_注意:如果您更喜欢看演示而不是阅读文章,请欣赏下面的视频! JavaScript 对象可以..._v8.dev](https://v8.dev/blog/elements-kinds "https://v8.dev/blog/elements-kinds")

[使用 JS 编程:按位运算

_在本系列文章中,我们从 JavaScript 的棱镜来看不同的计算机科学主题。我们已经..._hackernoon.com](https://hackernoon.com/programming-with-js-bitwise-operations-393eb0745dc4 "https://hackernoon.com/programming-with-js-bitwise-operations-393eb0745dc4")

[在现实生活中使用 JavaScript 的位运算符

_假设我们是机器码程序员!_codeburst.io](https://codeburst.io/using-javascript-bitwise-operators-in-real-life-f551a731ff5 "https://codeburst.io/using-javascript-现实生活中的位运算符-f551a731ff5")

[JavaScript 位运算符 - w3resource

Bitwise 运算符对其参数的按位 (0,1) 表示执行操作,而不是十进制...](https://www.w3resource.com/javascript/operators/bitwise-operator.php "https:// www.w3resource.com/javascript/operators/bitwise-operator.php")www.w3resource.com

[Javascript 中的位运算符

_到目前为止,我们使用的两种编程语言是 Ruby 和 Javascript。 ...... -javascript-65c4c69be0d3")

[JavaScript 中二进制计算和位运算符的综合入门

_Bitwise 运算符虽然需要几分钟的时间来学习,但它是一种有趣的方式,可以让您的代码拥有更多空间并且......_medium.com](https://medium.com/techtrument/a-comprehensive-primer-on-binary-computation -and-bitwise-operators-in-javascript-81acf8341f04 "https://medium.com/techtrument/a-comprehensive-primer-on-binary-computation-and-bitwise-operators-in-javascript-81acf8341f04")

[如何理解 JavaScript 中的按位运算?

Answer: 好的,我正打算写 JavaScript 中的按位运算与其他所有语言中的相同...](https://www.quora.com/How-can-I-understand-Bitwise-operation-in -JavaScript "https://www.quora.com/How-can-I-understand-Bitwise-operation-in-JavaScript")www.quora.com

[文档对象模型:: Eloquent JavaScript

_太糟糕了!同样的老故事!完成房屋建造后,您会发现自己意外地学到了一些东西......_eloquentjavascript.net](https://eloquentjavascript.net/14_dom.html "https://eloquentjavascript.net/14_dom.html")

[如何理解和修改 JavaScript 中的 DOM |数字海洋

文档对象模型,通常称为 DOM,是使网站具有交互性的重要部分。它是......](https://www.digitalocean.com/community/tutorials/introduction-to-the-dom "https://www.digitalocean.com/community/tutorials/introduction-to-the-dom" )www.digitalocean.com

[什么是文档对象模型,以及为什么你应该知道如何使用它。

_所以,你已经学习了 HTML,你已经创建了你的第一个标签,了解了 CSS,制作了漂亮的表单,令人惊叹的按钮......_medium.freecodecamp.org](https://medium.freecodecamp.org/whats-the-document- object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d "https://medium.freecodecamp.org/whats-the-document-object-model-and-why-you-应该知道如何使用它-1a2d0bc5429d")

[JavaScript DOM 示例教程

Details JavaScript 可以利用文档对象模型 (DOM) 访问网页中的所有元素。其实网络...](https://www.guru99.com/how-to-use-dom-and-events-in-javascript.html "https://www.guru99.com/how-to -use-dom-and-events-in-javascript.html")www.guru99.com

[什么是 DOM?

_一位读者最近写信问我 DOM 是什么。他们说他们听说过它并暗示过,但不是......_css-tricks.com](https://css-tricks.com/dom/ "https://css-tricks.com/dom/" )

[使用 JavaScript 遍历 DOM

_优秀的 JavaScript 开发人员需要知道如何遍历 DOM——这是从另一个元素中选择元素的行为......_zellwk.com](https://zellwk.com/blog/dom-traversals/ "https://zellwk.com /blog/dom-traversals/")

[DOM 树

_HTML 文档的支柱是标签。根据文档对象模型 (DOM),每个 HTML 标签都是一个对象..._javascript.info](https://javascript.info/dom-nodes "https://javascript.info/dom-nodes")

[如何在 JavaScript 中遍历 DOM

_了解如何在 DOM 树中导航。_javascript.plainenglish.io](https://javascript.plainenglish.io/how-to-traverse-the-dom-in-javascript-d6555c335b4e "https://javascript. plainenglish.io/how-to-traverse-the-dom-in-javascript-d6555c335b4e")

[渲染树构造、布局和绘制 |网络基础

_CSSOM 和 DOM 树组合成一个渲染树,然后用于计算每个可见的布局..._developers.google.com](https://developers.google.com/web/fundamentals/performance/critical-rendering -path/render-tree-construction“https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction”)

[究竟什么是 DOM?

_文档对象模型或“DOM”是网页的接口。它本质上是页面的 API,允许..._bitsofco.de](https://bitsofco.de/what-exactly-is-the-dom/ "https://bitsofco.de/what-exactly-is-the -dom/")

[掌握 DOM 的 Vanilla JS 指南

_注意:这篇文章的内容是介绍性的,不包括使用任何库,如 jQuery..._dev.to](https://dev.to/bouhm/a-vanilla-js-guide-on-mastering- the-dom-3l9b "https://dev.to/bouhm/a-vanilla-js-guide-on-mastering-the-dom-3l9b")

[如何在 JavaScript 中使用类 |数字海洋

JavaScript 是一种基于原型的语言,JavaScript 中的每个对象都有一个隐藏的内部属性,称为...](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript "https://www .digitalocean.com/community/tutorials/understanding-classes-in-javascript")www.digitalocean.com

[Javascript 类 — 幕后

_Javascript 类只不过是现有基于原型的继承和构造函数的语法糖..._medium.com](https://medium.com/tech-tajawal/javascript-classes-under-the-hood-6b26d2667677 "https://medium .com/tech-tajawal/javascript-classes-under-the-hood-6b26d2667677")

[ES6 类 - JavaScript 一月

面向对象编程 (OOP) 是组织项目的好方法。与 ES6 一起引入的 javascript...](https://www.javascriptjanuary.com/blog/es6-classes "https://www.javascriptjanuary.com/blog/es6-classes")www.javascriptjanuary.com

[更好的 JavaScript 与 ES6,Pt。 II:深入学习类

_Out with the Old, In with the new 让我们从一开始就明确一件事:在引擎盖下,ES6 类不是..._scotch.io](https://scotch.io/tutorials/better-javascript-with-es6 -pt-ii-a-deep-dive-into-classes “https://scotch.io/tutorials/better-javascript-with-es6-pt-ii-a-deep-dive-into-classes”)

[用纯javascript理解工厂设计模式

_了解工厂设计模式的最简单方法_medium.com](https://medium.com/front-end-weekly/understand-the-factory-design-pattern-in-plain-javascript-20b348c832bd "https://medium. com/front-end-weekly/understand-the-factory-design-pattern-in-plain-javascript-20b348c832bd")

[JavaScript 中的工厂函数 |亚腾设计集团

_随着我们从 jQuery 插件和脚本插件的时代进入 CommonJS 和模块化架构的世界,它是......_atendesigngroup.com](https://atendesigngroup.com/blog/factory-functions-javascript "https://atendesigngroup .com/blog/factory-functions-javascript")

[JS ES6 中的工厂模式

_我试图充分利用 ES6 (ES2015) 中的所有新事物。我正在编写一个新库,我需要一个..._medium.com](https://medium.com/@SntsDev/the-factory-pattern-in-js-es6-78f0afad17e9 "https://medium.com /@SntsDev/the-factory-pattern-in-js-es6-78f0afad17e9")

[类与工厂函数:探索前进的道路

_ECMAScript 2015(又名 ES6)带有类语法,所以现在我们有两种竞争模式来创建对象。在..._medium.freecodecamp.org](https://medium.freecodecamp.org/class-vs-factory-function-exploring-the-way-forward-73258b6a8d15 "https://medium.freecodecamp.org/class-vs -factory-function-exploring-the-way-forward-73258b6a8d15")

[ES6 类如何真正工作以及如何构建自己的类

_第 6 版 ECMAScript(或简称 ES6)彻底改变了语言,添加了许多新功能,包括..._medium.com](https://medium.com/@robertgrosse/how-es6-classes-really-work-and-如何构建您自己的 fd6085eb326a “https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a”)

[理解 JavaScript 中的super

_随着几乎所有浏览器都采用 ES6/2015(有一个明显的例外),开发人员可以访问新的..._jordankasper.com](https://jordankasper.com/understanding-super-in-javascript "https:// jordankasper.com/understanding-super-in-javascript")

[理解 JavaScript 类的简单指南

_1\。 JavaScript 中的类简介在本系列的上一篇文章中,我们查看了函数构造函数..._dev.to](https://dev.to/lawrence_eagles/an-easy-guide-to-understanding-classes-in-javascript- 3bcm“https://dev.to/lawrence_eagles/an-easy-guide-to-understanding-classes-in-javascript-3bcm”)

[Function.prototype.call() - JavaScript | MDN

_调用时用作 this 的值。注意:在某些情况下,可能不是该方法看到的实际值。如果..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call "https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Function/call")

[Function.prototype.bind() - JavaScript | MDN

_bind() 方法创建一个新函数,在调用该函数时,将其 this 关键字设置为提供的值,并带有..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/ Web/JavaScript/Reference/Global_objects/Function/bind "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind")

[Function.prototype.apply() - JavaScript | MDN

_apply() 方法调用具有给定 this 值的函数,并以数组形式提供的参数(或类似数组的..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/ Web/JavaScript/Reference/Global_Objects/Function/apply “https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply”)

[在 JavaScript 中调用 call()、apply() 和 bind() 方法

_这些对于每个有抱负的 JavaScript 开发人员来说都非常重要,它们几乎被用于每个 JavaScript 库或..._levelup.gitconnected.com](https://levelup.gitconnected.com/grokking-call-apply-and-bind-methods-in -javascript-392351a4be8b“https://levelup.gitconnected.com/grokking-call-apply-and-bind-methods-in-javascript-392351a4be8b”)

[操作方法:JavaScript 中的 call()、apply() 和 bind() |编码员

在这篇文章中,我们将讨论 JavaScript 函数的 call()、apply() 和 bind() 方法之间的区别......](https://www.codementor.io/niladrisekhardutta/how-to-call-apply -and-bind-in-javascript-8i1jca6jp “https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp”)www.codementor.io

[JavaScript 的 Apply、Call 和 Bind 方法对于 JavaScript 专业人士来说是必不可少的

_先决条件: - 轻松理解 JavaScript 的“this”,并掌握它。 - JavaScript 对象 - 了解 JavaScript..._javascriptissexy.com](http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/ "http://javascriptissexy.com /javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/")

[了解“this”关键字,在 JavaScript 中调用、应用和绑定 - ui.dev

_在深入了解 JavaScript 中 this 关键字的细节之前,重要的是退后一步,先看看......_tylermcginnis.com](https://tylermcginnis.com/this-keyword-call-apply-bind-javascript/ "https ://tylermcginnis.com/this-keyword-call-apply-bind-javascript/")

[Javascript:call()、apply() 和 bind()

_“这个” refresher_medium.com](https://medium.com/@omergoldberg/javascript-call-apply-and-bind-e5c27301f7bb "https://medium.com/@omergoldberg/javascript-call-apply-and -绑定-e5c27301f7bb")

[调用/应用/绑定的区别

_JavaScript 是一种动态语言,并且足够灵活,可以让您执行多重继承等操作。那时... -call-apply-bind-276724bb825b")

[什么是 hack 在 JavaScript 中调用、应用、绑定

_在开始研究调用、应用、绑定之前,您应该了解 - “this”关键字在 JavaScript 中是如何工作的。在..._dev.to](https://dev.to/ritik_dev_js/what-the-hack-is-call-apply-bind-in-javascript-11ce "https://dev.to/ritik_dev_js/what-the -hack-is-call-apply-bind-in-javascript-11ce")

[掌握 JavaScript 中的“this”:回调和 bind()、apply()、call() - 新堆栈

_在我们关于掌握 JavaScript 中的“this”关键字的教程的第一部分中,我们研究了为什么“this”的概念可以..._thenewstack.io](https://thenewstack.io/mastering-javascript-callbacks-bind-apply -call/“https://thenewstack.io/mastering-javascript-callbacks-bind-apply-call/”)

[通过举办野餐来解释 JavaScript 的应用、调用和绑定

_如果您曾经在家庭活动或聚会上负责操作烤架,那么您可以理解 apply,call..._dev.to](https://dev.to/kbk0125/javascripts-apply-call-and-bind -explained-by-hosting-a-cookout-32jo "https://dev.to/kbk0125/javascripts-apply-call-and-bind-explained-by-hosting-a-cookout-32jo")

[如何以及何时在 Javascript 中使用绑定、调用和应用 - Eigen X

为了让你完全理解绑定、调用和应用,你必须理解这个的 Javascript 概念......](https://www.eigenx.com/blog/https/mediumcom/eigen-x/how-and- when-to-use-bind-call-and-apply-in-javascript-77b6f42898fb "https://www.eigenx.com/blog/https/mediumcom/eigen-x/how-and-when-to-use- bind-call-and-apply-in-javascript-77b6f42898fb")www.eigenx.com

[JavaScript:bind() vs apply() 和 call()

var 水果 u003d { 名称:'苹果' };和这个函数:function showDetails(size, price) { console.log(this.name + ' ' +...](https://www.hacksparrow.com/javascript-bind-vs-apply-and-call.html “https://www.hacksparrow.com/javascript-bind-vs-apply-and-call.html”)www.hacksparrow.com

[让我给你解释一下this是什么。(Javascript)

原帖:](https://dev.to/ycmjason/let-me-explain-to-you-what-is-this-javascript-44ja "https://dev.to/ycmjason/let-me- explain-to-you-what-is-this-javascript-44ja") _https://www.ycmjason.com/blog/2018/06/15.html本文假设在所有情况下都“使用严格”这..._dev.to

[了解 JavaScript 中的“this”关键字

_“this”的值在不同场景下如何赋值_betterprogramming.pub](https://betterprogramming.pub/understanding-the-this-keyword-in-javascript-cb76d4c7c5e8 "https://betterprogramming.pub/understanding-the-这个关键字在 javascript-cb76d4c7c5e8")

[如何理解 JavaScript 中的关键字 this 和上下文

_正如我之前的一篇文章中提到的,完全掌握 JavaScript 可能是一个漫长的旅程。你可能来过......_medium.freecodecamp.org](https://medium.freecodecamp.org/how-to-understand-the-keyword-this-and-context-in-javascript-cd624c6b74b8 "https://medium. freecodecamp.org/how-to-understand-the-keyword-this-and-context-in-javascript-cd624c6b74b8")

[Javascript 中的“this”是什么?

_在学习 JavaScript 时,有很多障碍,如闭包、异步编程、this 关键字等。这些..._dev.to](https://dev.to/_hridaysharma/what-the-heck-is-this-in-javascript-37n1 “https://dev.to/_hridaysharma/what-the-heck-is-this-in-javascript-37n1”)

[这并在Javascript中绑定

_如果您正在学习 Javascript,毫无疑问,您很早就会遇到 this 关键字。起初,它看起来很简单..._dev.to](https://dev.to/steelvoltage/this-and-bind-in-javascript-2pam "https://dev.to/steelvoltage/this-and-bind -in-javascript-2pam")

[3 在 JavaScript 中使用“This”保持理智的技巧

_在 JavaScript 的许多令人困惑的方面中,关键字 this 可能是最复杂的关键字之一 -- 这是一个关于..._dev.to 的笑话](https://dev.to/canderson93/3-techniques-for-maintaining-your-sanity -using-this-in-javascript-3idf“https://dev.to/canderson93/3-techniques-for-maintaining-your-sanity-using-this-in-javascript-3idf”)

[掌握 JavaScript “this”关键字

_this 关键字在 JavaScript 中是一个非常重要的概念,也是一个特别令人困惑的概念,无论是 new..._dev.to](https://dev.to/aakashsr/mastering-the-javascript-this-keyword-4pfa "https: //dev.to/aakashsr/mastering-the-javascript-this-keyword-4pfa")

[JavaScript 中的此绑定 - 4. 新绑定

_这篇文章(JavaScript 中的 This binding - 4. New binding)最初发表于 Sargalias。在这个系列中,我们谈论..._dev.to](https://dev.to/sargalias/this-binding-in-javascript-4-new-binding-2p1n "https://dev.to/sargalias/this-binding -in-javascript-4-new-binding-2p1n")

[快速介绍 JavaScript 中的“this”

_JavaScript 最令人困惑的方面之一可能是找出“this”的含义。在这篇文章中,我将尝试..._dev.to](https://dev.to/thatgalnatalie/a-quick-intro-to-this-in-javascript-2mhp "https://dev.to/thatgalnatalie/一个快速介绍到这个-in-javascript-2mhp")

[**向我的猫解释 JavaScript 'this' **

_我的猫不太擅长JavaScript(还有很多其他的东西),所以今天我将尝试向他解释这个关键字......_dev.to](https://dev.to/cat__logic/explaining-javascript-this-to -my-cat-1kig "https://dev.to/cat__logic/explaining-javascript-this-to-my-cat-1kig")

[与 Javascript 中的“this”关键字的对话

_'This' 是 Javascript 中最令人困惑的概念之一。这是一个悲伤的消息。同样重要的是理解..._dev.to](https://dev.to/developerkaren/a-conversation-with-the-this-keyword-in-javascript-3j6g "https://dev.to/developerkaren /a-conversation-with-the-this-keyword-in-javascript-3j6g")

[什么是 JavaScript 中的 call()、apply() 和 bind() - JS 好奇

_在 JavaScript 中 this 指的是所有者对象。如果你想为函数附加一些额外的属性,那么你可以..._jscurious.com](https://jscurious.com/what-are-call-apply-and-bind-in-javascript/ "https:// jscurious.com/what-are-call-apply-and-bind-in-javascript/")

[理解 Javascript 中的“this”绑定

_为了清楚地理解“this”关键字,我们首先需要了解执行上下文是如何工作的。每个..._medium.com](https://medium.com/nerd-for-tech/understanding-this-binding-in-javascript-86687397c76d "https://medium.com/nerd-for-tech/understanding-this -binding-in-javascript-86687397c76d")

[初学者的JavaScript:“新”运算符

_Preface_codeburst.io](https://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e "https://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e")

[让我们揭开 JavaScript 的“新”关键字的神秘面纱

_周末,我完成了 Will Sentance 的 JavaScript: The Hard Parts。这听起来可能不是最光荣的方式......_medium.freecodecamp.org](https://medium.freecodecamp.org/demystifying-javascripts-new-keyword-874df126184c "https://medium.freecodecamp.org/demystifying-javascripts -new-keyword-874df126184c")

[构造函数,运算符“new”

_常规的 {...} 语法允许创建一个对象。但通常我们需要创建许多相似的对象,比如多个..._javascript.info](https://javascript.info/constructor-new "https://javascript.info/constructor-new")

[了解 JavaScript 构造函数

_以下是 Faraz Kelhini 的客座帖子。其中一些东西超出了我的舒适区,所以我问凯尔辛普森..._css-tricks.com](https://css-tricks.com/understanding-javascript-constructors/ "https://css-tricks.com /理解-javascript-constructors/")

[超越typeof和instanceof:简化动态类型检查

_这篇博文描述了一种使 instanceof 适用于更多值的技术(在右侧)..._2ality.com](http://2ality.com/2017/08/type-right.html "http://2ality .com/2017/08/type-right.html")

[什么是 JavaScript 中的 Instanceof 运算符?

_了解更多关于 JavaScript 中的 Instanceof 运算符是什么?来自开发智能。您值得信赖的开发者..._appendto.com](https://appendto.com/2016/10/what-is-the-instanceof-operator-in-javascript/ "https://appendto.com/2016/10/what- is-the-instanceof-operator-in-javascript/")

[函数和对象,互为实例

_解释为什么Function是Object的实例,为什么Object是Function_javascriptrefined.io的实例](https://javascriptrefined.io/function-and-object-instances-of-each-other-1e1095d5faac "https://javascriptrefined .io/function-and-object-instances-of-each-other-1e1095d5faac")

[继承和原型链 - JavaScript | MDN

_JavaScript 对于有基于类的语言(如 Java 或 C++)经验的开发人员来说有点困惑,因为它是动态的......_developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Inheritance_and_the_prototype_chain "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain")

[Javascript:原型与类

_让我们看看 JS 中的类如何不是你想象的那样。_medium.com](https://medium.com/@parsyval/javascript-prototype-vs-class-a7015d5473b "https://medium.com/@parsyval /javascript-prototype-vs-class-a7015d5473b")

https://codeburst.io/javascript-prototype-cb29d82b8809

[Javascript 原型 |编码员

_默认情况下,每个函数都有一个属性名称作为原型,它是空的(默认情况下)。我们可以添加属性和...www.codementor.io

[JavaScript 中的原型

_在这篇文章中,我们将讨论什么是 JavaScript 中的原型,它们如何帮助 JavaScript 实现......_betterprogramming.pub](https://betterprogramming.pub/prototypes-in-javascript-5bba2990e04b "https://betterprogramming. pub/prototypes-in-javascript-5bba2990e04b")

[JavaScript 中的原型:它很古怪,但它是这样工作的

_以下四行代码足以迷惑大多数 JavaScript 开发者:_medium.freecodecamp.org](https://medium.freecodecamp.org/prototype-in-js-busted-5547ec68872"https://medium.freecodecamp.org/prototype -in-js-busted-5547ec68872")

[理解 JavaScript:原型和继承

_由于大量的库、工具和各种使您的开发更容易的东西,很多..._hackernoon.com](https://hackernoon.com/understanding-javascript-prototype-and-inheritance-d55a9a23bde2 "https ://hackernoon.com/understanding-javascript-prototype-and-inheritance-d55a9a23bde2")

[理解 JavaScript 中的类 (ES5) 和原型继承

_简而言之,上面的代码片段创建了一个可以有多个实例的 Person 类。按照约定功能..._dev.to](https://dev.to/_hridaysharma/understanding-classes-es5-and-prototypal-inheritance-in-javascript-n8d "https://dev.to/_hridaysharma/understanding-classes -es5-and-prototypal-inheritance-in-javascript-n8d")

[prototype, proto 和 JavaScript 中的原型继承

_这篇文章最初发布在我的网站上javascript-2inl "https://dev.to/varundey/prototype-proto-and-prototypal-inheritance-in-javascript-2inl")

[原型继承

_在编程中,我们经常想取一些东西并扩展它。例如,我们有一个带有属性的用户对象..._javascript.info](https://javascript.info/prototype-inheritance "https://javascript.info/prototype-inheritance")

[如何在 JavaScript 中使用原型和继承 |数字海洋

JavaScript是一种基于原型的语言,意味着对象的属性和方法可以通过泛化的方式共享......](https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript "https: //www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript")www.digitalocean.com

[掌握 JavaScript 原型和_继承_

Inheritancecodeburst.io](https://codeburst.io/master-javascript-prototypes-inheritance-d0a9a5a75c4e "https://codeburst.io/master-javascript-prototypes-inheritance-d0a9a5a75c4e")

[使用 CSS 解释 JavaScript 的原型继承

_原型继承可以说是 JavaScript 中最不被理解的方面。好消息是,如果你......_medium.freecodecamp.org](https://medium.freecodecamp.org/understanding-prototypal-inheritance-in-javascript-with-css-93b2fcda75e4" org/understanding-prototypal-inheritance-in-javascript-with-css-93b2fcda75e4")

[揭秘 ES6 类和原型继承

_在 JavaScript 语言的早期历史中,由于..._scotch.io 缺乏正确的语法而形成了一片敌意](https://scotch.io/tutorials/demystifying-es6-classes-and-prototypal-inheritance" https://scotch.io/tutorials/demystifying-es6-classes-and-prototypal-inheritance")

[原型继承简介 - JS

_在本文中,我将尝试介绍原型继承。作为“可选”的先决条件,您可以..._dev.to](https://dev.to/danny/intro-to-prototypal-inheritance---js-9di "https://dev.to/danny /intro-to-prototypal-inheritance---js-9di")

[让我们在 JS 中构建原型继承

_这篇文章的想法很简单。我想在某种程度上构建,并以此说明原型如何在..._dev.to](https://dev.to/varche/let-s-build-prototypal-inheritance-in-js-56mm "https:/ /dev.to/varche/let-s-build-prototypal-inheritance-in-js-56mm")

[JavaScript 中的对象、原型和类

_JavaScript 基于一个简单的面向对象编程模型,对象是..._dev.to 的基本组成部分](https://dev.to/attacomsian/objects-prototypes-and-classes-in-javascript-3i9b "https ://dev.to/attacomsian/objects-prototypes-and-classes-in-javascript-3i9b")

[JavaScript 原型的神奇世界

_我们听过多少次“JavaScript 不是面向对象的语言,它是面向原型的”?原来..._dev.to](https://dev.to/ladybenko/the-magical-world-of-javascript-prototypes-1mhg "https://dev.to/ladybenko/the-magical-world-of -javascript-prototypes-1mhg")

[理解 JavaScript 中的原型继承

_什么是面向对象编程 (OOP) 经典与原型继承原型对象和原型..._dev.to](https://dev.to/lawrence_eagles/understanding-prototypal-inheritance-in-javascript-4f31#chp-4 “https://dev.to/lawrence_eagles/understanding-prototypal-inheritance-in-javascript-4f31#chp-4”)

[Object.create() - JavaScript | MDN

_Object.create() 方法创建一个新对象,使用现有对象作为新创建对象的原型..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Global_Objects/Object/create "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create")

[Object.assign() - JavaScript | MDN

_Object.assign() 方法将所有可枚举的自身属性从一个或多个源对象复制到目标对象。它..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign "https://developer.mozilla.org/en-US /docs/Web/JavaScript/Reference/Global_Objects/Object/assign")

[Object.create 在 JavaScript 中

_Object.create方法是JavaScript中创建新对象的方法之一。_medium.com](https://medium.com/@happymishra66/object-create-in-javascript-fa8674df6ed2"https://medium. com/@happymishra66/object-create-in-javascript-fa8674df6ed2")

[Javascript 对象 |创建对象的新方法 | HTML 好东西

有很多方法可以在 JavaScript 中创建对象,也许更多的方法是将继承集成到其中。只是...](https://www.htmlgoodies.com/beyond/javascript/object.create-the-new-way-to-create-objects-in-javascript.html "https://www.htmlgoodies.com /beyond/javascript/object.create-the-new-way-to-create-objects-in-javascript.html")www.htmlgoodies.com

[使用 Object.create 的基本继承

_前几期我们看了如何用构造函数实现基本的继承。在本期中,我们将看看如何..._adripofjavascript.com](http://adripofjavascript.com/blog/drips/basic-inheritance-with-object-create.html "http://adripofjavascript.com/blog/滴水/基本继承与对象-create.html")

[Object.create() 在 JavaScript - GeeksforGeeks

JavaScript 中的对象和对象构造函数?在面向对象编程的现实世界中,我们已经知道...](https://www.geeksforgeeks.org/object-create-javascript/ "https://www.geeksforgeeks.org/object-create-javascript/ ")www.geeksforgeeks.org

[了解 Object.create() 和 new 运算符之间的区别。

_为什么知道差异很重要?_medium.com](https://medium.com/@jonathanvox01/understanding-the-difference-between-object-create-and-the-new-operator-b2a2f4749358" https:// /medium.com/@jonathanvox01/understanding-the-difference-between-object-create-and-the-new-operator-b2a2f4749358")

[JavaScript 对象创建:模式和最佳实践 - SitePoint

Jeff Mott 指导您逐步创建 JavaScript 对象 - 从对象文字到工厂...](https://www.sitepoint.com/javascript-object-creation-patterns-best-practices/ "https ://www.sitepoint.com/javascript-object-creation-patterns-best-practices/")www.sitepoint.com

[使用 Object.assign、Object.keys 和 hasOwnProperty 处理 JavaScript 中的对象 |...

_这篇文章是一种抓包,可以帮助您探索一些非常有用的方法来帮助您管理您在..._alligator.io](https://alligator.io/js/dealing-with-objects/ "https:// /alligator.io/js/dealing-with-objects/")

[在 JavaScript 中复制对象 |数字海洋

_Objects 是 JavaScript 的基本块。一个对象是一个属性的集合,一个属性是一个..._scotch.io](https://scotch.io/bar-talk/copying-objects-in-javascript "https://scotch.io/bar-talk /copying-objects-in-javascript")

[JavaScript: Object.assign()

_参见本文如何使用 ECMAScript 6_codeburst.io Object.assign()](https://codeburst.io/javascript-object-assign-bc9696dcbb6e "https://codeburst.io/javascript-object-assign-bc9696dcbb6e" )

[如何深度克隆 JavaScript 对象

_在 JavaScript 中复制对象可能很棘手。一些方法执行浅拷贝,这是大多数..._flaviocopes.com](https://flaviocopes.com/how-to-clone-javascript-object/ "https://flaviocopes.com/how- to-clone-javascript-object/")

[Object.create():何时以及为何使用

_Object.create() 是一种适用于所有 JavaScript 对象的方法。它需要两个参数:您要复制的对象..._dev.to](https://dev.to/vzing/object-create-when-and-why-to-use-20m9 "https://dev.to /vzing/object-create-when-and-why-to-use-20m9")

[JavaScript 函数式编程 — 映射、过滤和归约

_即使您不知道什么是函数式编程,您也可能一直在使用 map、filter 和 reduce,因为..._medium.com](https://medium.com/@bojangbusiness/javascript-functional-programming-map-filter -and-reduce-846ff9ba492d "https://medium.com/@bojangbusiness/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d")

[学习 Javascript 中的 map、filter 和 reduce

_您在函数式编程_medium.com 中创业的完美工具集](https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4 "https://medium.com/@joomiguelcunha /learn-map-filter-and-reduce-in-javascript-ea59009593c4")

[JavaScript 的 Map、Reduce 和 Filter * Dan Martensen

_作为工程师,我们几乎每天都在构建和操作包含数字、字符串、布尔值和对象的数组。我们使用它们..._danmartensen.svbtle.com](https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter "https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter ")

[如何在 JavaScript 中使用 Map、Filter 和 Reduce

_函数式编程近来在开发界引起了不小的轰动。并且有充分的理由..._code.tutsplus.com](https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209 "https://code .tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209")

[JavaScript — 学习链式映射、过滤和归约

_了解如何在 JavaScript_codeburst.io 中链接映射、过滤和缩减](https://codeburst.io/javascript-learn-to-chain-map-filter-and-reduce-acd2d0562cd4 "https://codeburst.io/ javascript-learn-to-chain-map-filter-and-reduce-acd2d0562cd4")

[理解 Javascript 中的 map、filter 和 reduce

_在处理 Javascript 项目时,您不可避免地会遇到必须进行一些数据操作的情况......_hackernoon.com](https://hackernoon.com/understanding-map-filter-and-reduce-in-javascript-5df1c7eee464 "https: //hackernoon.com/understanding-map-filter-and-reduce-in-javascript-5df1c7eee464")

[JS 中的函数式编程:map、filter、reduce (Pt. 5)

_注意:这是学习函数式编程技术的“Javascript和函数式编程”系列的一部分..._hackernoon.com](https://hackernoon.com/functional-programming-in-js-map-filter-reduce-pt-5 -308a205fdd5f“https://hackernoon.com/functional-programming-in-js-map-filter-reduce-pt-5-308a205fdd5f”)

[JavaScript:地图、过滤器、减少

_JavaScript 的内置 map、filter 和 reduce 数组方法对于现代 JavaScript 开发人员来说是无价的。首先..._wsvincent.com](https://wsvincent.com/functional-javascript-map-filter-reduce/ "https://wsvincent.com/functional-javascript-map-filter-reduce/")

[JavaScript 箭头函数:ES6 中的简洁语法

在本文中,您将了解有关 JavaScript 箭头函数语法的所有信息——包括您需要的一些陷阱......](https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax -javascript/“https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/”)www.sitepoint.com

[JavaScript:初学者的箭头函数

_上周我为初学者发布了这篇关于关键字this的帖子。其中未涵盖的主题之一..._codeburst.io](https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc "https://codeburst.io/javascript-arrow-functions -初学者-926947fc0cdc")

[什么时候(以及为什么)你应该使用 ES6 箭头函数 — 什么时候不应该

_箭头函数(也称为“胖箭头函数”)无疑是 ES6 中比较流行的特性之一。他们..._medium.freecodecamp.org](https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26 "https:// /medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26")

[JavaScript — 学习和理解箭头函数

_JavaScript_codeburst.io 中箭头函数的初学者指南](https://codeburst.io/javascript-learn-understand-arrow-functions-fe2083533946 "https://codeburst.io/javascript-learn-understand-arrow-functions- fe2083533946")

[(JavaScript)u003d> 箭头函数

_这篇文章旨在总结 JavaScript 和箭头函数新手需要知道的一些事情。我愿意..._medium.com](https://medium.com/podiihq/javascript-arrow-functions-27d4c3334b83 "https://medium.com/podiihq/javascript-arrow-functions-27d4c3334b83")

[Javascript.reduce()

JS_andepaulj.medium.com 的多功能工具](https://andepaulj.medium.com/javascript-reduce-79aab078da23 "https://andepaulj.medium.com/javascript-reduce-79aab078da23")

[为什么你应该用 JavaScript 中的 map 和 filter 替换 forEach - Gofore

_TL;DR 当您需要将数组或其中的一部分复制到新数组时,首选映射和过滤而不是 forEach。最好的之一......_gofore.com](https://gofore.com/en/why-you-should-replace-foreach/ "https://gofore.com/en/why-you-should-replace-foreach /")

[简化您的 JavaScript – 使用 .map()、.reduce() 和 .filter()

_如果您还没有听说过 JavaScript 中的 .map()、.reduce() 和 .filter(),您可能想学习使用它!_medium.com](https://medium.com/poka-techblog /simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d "https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d")

[通过节食来解释 JavaScript 的 Reduce 方法

_JavaScript 中的 reduce 方法为您提供了一种简单的方法来获取一组值并将它们组合成一个值,或者..._blog.codeanalogies.com](https://blog.codeanalogies.com/2018/07/24/javascripts- reduce-method-explained-by-going-on-a-diet/“https://blog.codeanalogies.com/2018/07/24/javascripts-reduce-method-explained-by-going-on-a-diet /")

[JavaScript 中 map、filter 和 reduce 的区别

_我看到很多 JS 初学者在使用 map、filter 或 reduce 时遇到困难,不知道..._medium.com 的不同用例](https://medium.com/@amiratak88/difference-between-map- filter-and-reduce-in-javascript-822ff79d5160 "https://medium.com/@amiratak88/difference-between-map-filter-and-reduce-in-javascript-822ff79d5160")

[Map⇄Filter⇄Reduce↻ |黑客中午

_在LinkedIn上分享!由于这个原因,我们引入了这三个高阶函数,即🗺️Map..._hackernoon.com](https://hackernoon.com/map-filter-reduce-ebbed4be4201 "https://hackernoon.com/map-filter -减少-ebbed4be4201")

[使用 .Map() 找到自己的方式

_文章末尾是一个 CodePen,演示了这里介绍的概念。_medium.freecodecamp.org](https://medium.freecodecamp.org/finding-your-way-with-map-aecb8ca038f6 "https://medium .freecodecamp.org/finding-your-way-with-map-aecb8ca038f6")

[如何在 JavaScript 中编写自己的 map、filter 和 reduce 函数

_在 Javascript 中窥探函数式编程和高阶函数。_medium.freecodecamp.org](https://medium.freecodecamp.org/how-to-write-your-own-map-filter-and-reduce-functions- in-javascript-ab1e35679d26 "https://medium.freecodecamp.org/how-to-write-your-own-map-filter-and-reduce-functions-in-javascript-ab1e35679d26")

[如何在 JavaScript 中操作数组

任何编程语言的重要组成部分。大多数时候,我们需要对数组进行多次操作,因此...](https://www.freecodecamp.org/news/manipulating-arrays-in-javascript/ "https://www.freecodecamp.org/news/操作数组在 JavaScript/")www.freecodecamp.org

[.map()、.filter() 和 .reduce()

_最初发布在我的博客上在过去的几周里,我一直在申请工作。可悲的是,我工作的初创公司..._dev.to](https://dev.to/pickleat/map-filter-and-reduce-2efb "https://dev.to/pickleat/map-filter-and-reduce -2efb")

[地图,过滤器和减少 - 动画

_Map、filter 和 reduce 已经存在很长时间了。它们通常被视为函数式编程风格的一部分。_jstutorial.medium.com](https://jstutorial.medium.com/map-filter-and-reduce-animated-7fe391a35a47"https://jstutorial.medium.com/地图过滤器和减少动画 7fe391a35a47")

[Map、Filter、Reduce 和其他数组迭代器你必须知道的成为算法向导

_在本文中,我们将仔细研究一些数组迭代器,例如,,或其他使用..._dev.to的方法](https://dev.to/uptheirons78/map-filter-reduce-and-others-arrays -iterators-you-must-know-to-become-an-algorithms-wizard-4209 “https://dev.to/uptheirons78/map-filter-reduce-and-others-arrays-iterators-you-must-know -成为算法向导 4209")

[**如何使用 JavaScript 的 .map、.filter 和 .reduce **

_如何使用这三个有用的 JavaScript 函数_betterprogramming.pub](https://betterprogramming.pub/how-to-javascripts-map-vs-filter-vs-reduce-80d87a5a0a24 "https://betterprogramming.pub/how-to- javascripts-map-vs-filter-vs-reduce-80d87a5a0a24")

[Javascript 性能测试 - 为每个 vs (map、reduce、filter、find) 测试 vs。

_我们都知道 for 循环比 for each 或 javascript 函数更快,因为在 javascript 函数的引擎盖下..._towardsdatascience.com](https://towardsdatascience.com/javascript-performance-test-for-vs-for-each-vs -map-reduce-filter-find-32c1113f19d7 "https://towardsdatascience.com/javascript-performance-test-for-vs-for-each-vs-map-reduce-filter-find-32c1113f19d7")

[正确使用 .map()、.filter() 和 .reduce() 👩🏽u200d💻

_Map、reduce 和 filter 都是 JavaScript 中的数组方法。每个人都将遍历一个数组并执行... io/using-map-filter-and-reduce-properly-50e07f80c8b2")

[Javascript 和函数式编程 — Pt。 3:纯函数

_Purity_hackernoon.com](https://hackernoon.com/javascript-and-functional-programming-pt-3-pure-functions-d572bb52e21c "https://hackernoon.com/javascript-and-functional-programming-pt-3 -纯功能-d572bb52e21c")

[掌握 JavaScript 面试:什么是纯函数?

_纯函数对于各种用途都是必不可少的,包括函数式编程、可靠的并发性和..._medium.com](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-纯功能-d1c076bec976“https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976”)

[JavaScript:什么是纯函数以及为什么要使用它们?

_第一次听到“纯函数”这个词我很困惑。常规函数有什么问题?为什么... -功能-4d4d5392d49c")

[JavaScript 中的纯函数

_纯函数不依赖也不修改超出其范围的变量的状态。具体来说,这意味着...功能-javascript/")www.nicoespeon.com

[函数式编程:纯函数 - SitePoint

这是关于 Ruby 函数式编程的两部分系列的第二部分。在我们探索不可变值之前......](https://www.sitepoint.com/functional-programming-pure-functions/ "https://www.sitepoint.com/functional-programming-pure-functions/")www .sitepoint.com

[Javascript 中的纯函数

_Javascript 中的纯函数是一种函数,其返回值由调用时传递的参数确定..._appdividend.com](https://appdividend.com/2017/04/10/pure-functions-in-javascript/ "https ://appdividend.com/2017/04/10/pure-functions-in-javascript/")

[让你的 JavaScript 变得纯粹

_一旦您的网站或应用程序通过了少量行,它将不可避免地包含某种错误。这..._alistapart.com](https://alistapart.com/article/making-your-javascript-pure "https://alistapart.com/article/making-your-javascript-pure")

[数组、对象和突变

_这里有一些关于如何在 JavaScript 中处理数组和对象时避免突变的想法,方法是将它们视为..._medium.com](https://medium.com/@fknussel/arrays-objects-and-mutations-6b23348b54aa “https: //medium.com/@fknussel/arrays-objects-and-mutations-6b23348b54aa")

[不变的状态

_Immutability 是现代 JavaScript 中的热门话题。这个话题现在这么火的原因当然是......_medium.com](https://medium.com/dailyjs/the-state-of-immutability-169d2cd11310 "https://medium.com/dailyjs/the -状态不变性-169d2cd11310")

[如何处理纯函数式 JavaScript 中的脏副作用

_如果你开始学习函数式编程,用不了多久你就会遇到纯函数的概念......_jrsinclair.com](https://jrsinclair.com/articles/2018/how-to-deal-with-dirty -side-effects-in-your-pure-functional-javascript/“https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional- javascript/")

[在 JavaScript 中防止副作用

_JavaScript 这些天来非常动态,但我仍然看到很多遗留代码,无论是为了优化向后......_davidwalsh.name](https://davidwalsh.name/preventing-sideeffects-javascript"https://davidwalsh.name/预防副作用-javascript")

[在 JavaScript 和函数组合中使用纯函数

_今天,我想分享一些关于函数式编程中两个基本概念的想法:纯函数和..._scotch.io](https://scotch.io/tutorials/wielding-pure-functions-in-javascript-and-function -组成“https://scotch.io/tutorials/wielding-pure-functions-in-javascript-and-function-composition”)

[JavaScript:纯函数

_Pure 函数是函数式编程、并发性、编写可测试代码和具有确定性的基础......_wsvincent.com](https://wsvincent.com/javascript-pure-functions/ "https://wsvincent.com/javascript-pure-功能/")

[现代 JavaScript 中的函数式编程范例:纯函数

_JavaScript 是目前最流行的编程语言之一。它在浏览器、桌面、移动设备上运行......_hackernoon.com](https://hackernoon.com/functional-programming-paradigms-in-modern-javascript-pure-functions-797d9abbee1 "https://hackernoon.com /functional-programming-paradigms-in-modern-javascript-pure-functions-797d9abbee1")

[理解 Javascript 变异和纯函数

_通过更好地理解 JS_blog.bitsrc.io 中的突变和纯函数来提高您的应用程序性能](https://blog.bitsrc.io/understanding-javascript-mutation-and-pure-functions-7231cc2180d3 "https://blog.bitsrc .io/understanding-javascript-mutation-and-pure-functions-7231cc2180d3")

[**功能性 JavaScript **

_函数式编程是编写 JavaScript 时学习和应用的一门很好的学科。编写无状态、幂等..._bluepnume.medium.com](https://bluepnume.medium.com/functional-ish-javascript-205c05d0ed08 "https://bluepnume.medium.com/functional-ish-javascript-205c05d0ed08")

[活动简介 - 学习 Web 开发 | MDN

_Events 是在您正在编程的系统中发生的动作或事件,系统会告诉您..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks /事件“https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events”)

[冒泡和捕获

_让我们从一个例子开始。此处理程序已分配给,但如果您单击任何嵌套标记(如或)也会运行:不是吗..._javascript.info](https://javascript.info/bubbling-and-capturing "https://javascript.info/冒泡捕获”)

https://www.youtube.com/watch?vu003dJh_Uzqzz_wM

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

https://javascript.info/closure

[我从不理解 JavaScript 闭包

_直到有人这样向我解释......_medium.com](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8 "https://medium.com/dailyjs/i-never-理解-javascript-closures-9663703368e8")

[轻松理解 JavaScript 闭包

_Closures 允许 JavaScript 程序员编写更好的代码。有创意、有表现力、简洁。我们经常使用..._javascriptissexy.com](http://javascriptissexy.com/understand-javascript-closures-with-ease/ "http://javascriptissexy.com/understand-javascript-closures-with-ease/")

[了解 JavaScript 闭包

_当您第一次学习 JavaScript 时,“闭包”之类的术语可能会使该语言显得神秘而难以理解......_codeburst.io](https://codeburst.io/understanding-javascript-closures-da6aab330302"https://codeburst. io/理解-javascript-closures-da6aab330302")

https://codeburst.io/understand-closures-in-javascript-d07852fa51e7

[帮助您理解 JavaScript 闭包的简单指南

_JavaScript 中的闭包是许多人难以理解的概念之一。在以下...(https://medium.freecodecamp.org/javascript-closures-simplified-d0d23fa06ba4)

[理解 JavaScript 闭包:一种实用的方法

_学习一门新语言涉及一系列步骤,而掌握它是耐心、练习、错误的产物......_scotch.io](https://scotch.io/tutorials/understanding-javascript-closures-a-practical-approach" https://scotch.io/tutorials/understanding-javascript-closures-a-practical-approach")

[理解 JavaScript:闭包

_为什么要深入学习 JavaScript?_hackernoon.com](https://hackernoon.com/understanding-javascript-closures-4188edf5ea1b "https://hackernoon.com/understanding-javascript-closures-4188edf5ea1b")

[如何自信地使用 JavaScript 闭包

_使用闭包将是一块(巧克力)cake_hackernoon.com](https://hackernoon.com/how-to-use-javascript-closures-with-confidence-85cd1f841a6b "https://hackernoon.com/how-to -使用-javascript-closures-with-confidence-85cd1f841a6b")

[JavaScript 闭包示例

_在某些时候,在 for 循环中执行函数时,您可能会遇到问题。第一次... )

[JavaScript — 闭包和作用域

_今天看JavaScript,作为一个初学者可能会很害怕。人们谈论要注意所有的小怪癖或..._codeburst.io](https://codeburst.io/javascript-closures-and-scope-3784c75b9290 "https://codeburst.io/javascript-closures-and-scope -3784c75b9290")

[发现 JavaScript 中闭包的强大功能

_Discover Functional JavaScript 被 BookAuthority 评为最佳新的函数式编程书籍之一!一个闭包..._medium.freecodecamp.org](https://medium.freecodecamp.org/discover-the-power-of-closures-in-javascript-5c472a7765d7 "https://medium.freecodecamp.org/discover-the- javascript-5c472a7765d7")

[简化的 JavaScript:闭包入门

_Eric Elliot 在他的 Medium 文章 Master the JavaScript Interview: What is a Closure? 中解释说,当他..._code.likeagirl.io](https://code.likeagirl.io/simplified-javascript-getting-started-with-闭包-f40f65317d00“https://code.likeagirl.io/simplified-javascript-getting-started-with-closures-f40f65317d00”)

[Javascript 闭包 101 - 解释闭包的工作原理

_所以,“关闭”,对吗?这是一个有趣的,往往会引起混乱。在某些情况下,这几乎是给定的......_reallifejs.com](http://reallifejs.com/the-meat/getting-closure/ "http://reallifejs.com/the-meat/getting-closure/")

[JavaScript 中的闭包、柯里化和 IIFE

_这些是 JavaScript 的一些概念,每个人在开始时都会遇到困难。让我们尝试通过..._dev.to](https://dev.to/ritik_dev_js/what-the-hack-is-closure-currying-and-iife-in-javascript-32m9 "https://dev .to/ritik_dev_js/what-the-hack-is-closure-currying-and-iife-in-javascript-32m9")

[理解 JavaScript 中的闭包

_了解闭包如何在 JavaScript 中真正工作:动手指南_blog.bitsrc.io](https://blog.bitsrc.io/a-beginners-guide-to-closures-in-javascript-97d372284dda "https://blog. bitsrc.io/a-beginners-guide-to-closures-in-javascript-97d372284dda")

[JavaScript 闭包基本指南

_闭包是函数创建时范围内所有变量的集合。要使用闭包创建..._medium.freecodecamp.org](https://medium.freecodecamp.org/a-basic-guide-to-closures-in-javascript-9fc8b7e3463e "https://medium.freecodecamp.org/a -basic-guide-to-closures-in-javascript-9fc8b7e3463e")

[闭包:使用记忆

_函数式编程的核心原则之一是,如果给定相同的函数,则函数应返回相同的值..._dev.to](https://dev.to/steelvoltage/closures-using-memoization-3597 "https://dev .to/steelvoltage/closures-using-memoization-3597")

[JavaScript 中的闭包和词法作用域简介

_“在不了解闭包的情况下用 ECMAScript 语言编写就像在不了解类的情况下编写 Java”_betterprogramming.pub](https://betterprogramming.pub/a-brief-introduction-to-closures-and-lexical-scoping-in-javascript- 8a5866496232“https://betterprogramming.pub/a-brief-introduction-to-closures-and-lexical-scoping-in-javascript-8a5866496232”)

[揭开闭包的神秘面纱

_在上一篇文章中,我们实现了函数,但没有关于闭包。让我们解决这个问题。代码后没有闭包..._dev.to](https://dev.to/stereobooster/demystify-closures-5g42 "https://dev.to/stereobooster/demystify-closures-5g42")

[范围 - JavaScript 概念

_这是我尝试通过 33 个 JS 概念中的每一个来解释的系列的一部分。最初写在我的博客上..._dev.to](https://dev.to/boywithsilverwings/scopes-and-closures-javascript-concepts-4dfj "https://dev.to/boywithsilverwings/scopes-and-closures- javascript-concepts-4dfj")

[理解 JavaScript 中的闭包

_当你在另一个函数中声明一个函数时,闭包是通过结合内部..._dev.to](https://dev.to/mattpopovich/understanding-closures-in-javascript-3k0d "https:// dev.to/mattpopovich/understanding-closures-in-javascript-3k0d")

[什么是闭包?・ Dan 的 JavaScript 词汇表

_闭包令人困惑,因为它们是一个“不可见”的概念。当您使用对象、变量或函数时,您..._whatthefuck.is](https://whatthefuck.is/closure "https://whatthefuck.is/closure")

[JavaScript 中的闭包可以...

_当我开始谈论/写一个话题时,我对一个话题有了更多的理解......这让我妻子很害怕,因为她的分数为零......_dev.to](https://dev.to/brandonleboeuf/closure-in-javascript- 49n7“https://dev.to/brandonleboeuf/closure-in-javascript-49n7”)

https://www.youtube.com/watch?vu003d1JsJx1x35c0

[高阶函数:: Eloquent JavaScript

_Tzu-li 和Tzu-ssu 吹嘘他们最新节目的规模。 '二十万行,'Tzu-li 说..._eloquentjavascript.net](https://eloquentjavascript.net/05_higher_order.html "https://eloquentjavascript.net/05_higher_order.html")

[JavaScript 中的高阶函数 - SitePoint

继续研究 JavaScript 中的函数式编程,M. David Green 研究了高阶函数以及如何...](https://www.sitepoint.com/higher-order-functions-javascript/ "https://www.sitepoint .com/higher-order-functions-javascript/")www.sitepoint.com

[高阶函数:使用过滤器、映射和归约以获得更可维护的代码

_高阶函数可以通过使您的代码更具声明性来帮助您加强 JavaScript 游戏。那就是......_medium.freecodecamp.org](https://medium.freecodecamp.org/higher-order-functions-in-javascript-d9101f9cf528 "https://medium.freecodecamp.org/higher-order-functions-in- javascript-d9101f9cf528")

[一等和高阶函数:有效的函数式 JavaScript

_Functions:我们从不谈论的杀手级 JavaScript 功能。_hackernoon.com](https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a "https://hackernoon. com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a")

[JavaScript 中的高阶函数

高阶函数起初可能令人生畏,但它们并不难学。高阶函数是......](https://www.lullabot.com/articles/higher-order-functions-in-javascript "https://www.lullabot.com/articles/higher-order-functions- in-javascript")www.lullabot.com

[高阶函数 - JavaScript 很性感

_在 JavaScript 中,函数是一等对象;也就是说,函数属于 Object 类型,它们可以在..._javascriptissexy.com](http://javascriptissexy.com/tag/higher-order-functions/ "http://javascriptissexy.com/tag/higher -订单功能/“)

[在 JavaScript 中使用高阶函数的乐趣

_JavaScript 通常被称为具有函数式编程能力的语言,因为它是“高阶..._derickbailey.com](https://derickbailey.com/2015/10/21/fun-with-higher-order-functions-in- javascript/“https://derickbailey.com/2015/10/21/fun-with-higher-order-functions-in-javascript/”)

[pedroapfilho/数组方法

_只是提醒一下如何使用数组方法。通过创建..._github.com](https://github.com/pedroapfilho/high-order-functions "https://github.com/pedroapfilho/high-order-functions") 为 pedroapfilho/array-methods 开发做出贡献

[理解 JavaScript 中的高阶函数

_了解什么是高阶函数以及如何在 JavaScript_blog.bitsrc.io 中使用它们](https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad "https://blog. bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad")

[高阶函数 - 一种务实的方法

_俗话说函数是编程的面包和黄油,是构建可重用的基本单元..._dev.to](https://dev.to/nuel_ikwuoma/higher-order-functions-a-pragmatic-approach-51fb “https://dev.to/nuel_ikwuoma/higher-order-functions-a-pragmatic-approach-51fb”)

[JavaScript 中的递归

_我只是要提前解决这个问题,否则人们会非常生气:_medium.freecodecamp.org](https://medium.freecodecamp.org/recursion-in-javascript-1608032c7a1f "https:// /medium.freecodecamp.org/recursion-in-javascript-1608032c7a1f")

[理解 JavaScript 中的递归

_JavaScript 的众多优点之一是递归调用函数的能力。这个功能是..._medium.com](https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03 "https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03 ")

[学习和理解 JavaScript 中的递归

_我将在 10 分钟内向您介绍两个流行的 JS 递归示例,以便您最终了解递归的工作原理......_codeburst.io](https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea" https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea")

[函数式 JavaScript 中的递归 - SitePoint

M。 David Green 通过重构正常的 for 和 while 循环展示了强大但令人眼花缭乱的递归概念......](https://www.sitepoint.com/recursion-functional-javascript/ "https://www.sitepoint.com/recursion -functional-javascript/")www.sitepoint.com

[使用 JS 编程:递归

_了解数据结构、算法和基本编程概念对于成为更好的人至关重要......_hackernoon.com](https://hackernoon.com/programming-with-js-recursion-31371e2bf808 "https://hackernoon.com/programming -with-js-recursion-31371e2bf808")

[JavaScript 中的匿名递归

_是的,有这样的事情,我认为这将是一个有趣的例子来分享。它的特点:闭包..._dev.to](https://dev.to/simov/anonymous-recursion-in-javascript "https://dev.to/simov/anonymous-recursion-in-javascript")

[JS中的递归、迭代和尾调用

如果您从事该业务已有一段时间,您很可能会遇到递归的定义,为此......](http://www.jstips.co/en/javascript/recursion-iteration-and -tail-calls-in-js/“http://www.jstips.co/en/javascript/recursion-iteration-and-tail-calls-in-js/”)www.jstips.co

[介绍递归

_Recursion 可能是一个难以理解的概念,但它的定义相当简单:递归是当... //medium.com/@newmanbradm/intro-to-recursion-984a8bd50f4b")

[Accio 递归!:您最喜欢的新 JavaScript 拼写

_咒语“Accio”允许女巫或巫师向他们召唤一些东西。铸造 Accio 就像访问... .com/accio-recursion-your-new-favorite-javascript-spell-7e10d3125fb3")

[递归解释(带示例)

_“要了解递归,首先必须了解递归” - 未知递归是一种解决问题的方法......_dev.to](https://dev.to/christinamcmahon/recursion-explained-with-examples-4k1m "https:// /dev.to/christinamcmahon/recursion-explained-with-examples-4k1m")

[生成器 - JavaScript | MDN

_这个对象不能直接实例化。相反,可以从生成器函数返回生成器实例..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator "https:// developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator")

[深入了解 ES6:集合 - Mozilla Hacks - Web 开发者博客

_ES6 In Depth 是关于在第 6 版..._hacks.mozilla.org](https://hacks.mozilla.org/2015/06/es6-in-depth-收藏/“https://hacks.mozilla.org/2015/06/es6-in-depth-collections/”)

[ES6 集合:使用 Map、Set、WeakMap、WeakSet - SitePoint

大多数主要的编程语言都有几种类型的数据集合。 Python 有列表、元组和字典...](https://www.sitepoint.com/es6-collections-map-set-weakmap-weakset/ "https://www.sitepoint.com/es6-collections-map -set-weakmap-weakset/")www.sitepoint.com

[JavaScript 地图简介 |数字海洋

_虽然本教程包含我们认为对我们的社区非常有益的内容,但我们尚未测试或编辑..._alligator.io](https://alligator.io/js/maps-introduction/ "https://alligator.io) io/js/maps-introduction/")

[地图和设置

_到目前为止,我们已经了解了以下复杂的数据结构: 对象用于存储键控集合..._javascript.info](https://javascript.info/map-set-weakmap-weakset "https://javascript.info /map-set-weakmap-weakset")

[ES6 中的地图 - 快速指南

_Maps 和 Sets 经常在文章中混为一谈。它们都是具有相似接口的新 ES6 集合类型,但是..._dev.to](https://dev.to/mildrenben/maps-in-es6---a-quick-guide-35pk "https://dev.到/mildrenben/maps-in-es6---a-quick-guide-35pk")

[ES6 — Set vs Array — 什么和什么时候?

_什么是Set,什么是Array?_medium.com](https://medium.com/front-end-weekly/es6-set-vs-array-what-and-when-efc55655e1a "https://medium.com /front-end-weekly/es6-set-vs-array-what-and-when-efc55655e1a")

[ES6 — Map vs Object — 什么和什么时候?

_你可能想知道 — 为什么是 Map vs Object 而不是 Map vs Array,或者 Object vs Set?好吧,您也可以在任何... .com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373")

[ES6:在 JavaScript 中使用集合

在这篇文章中,我们将继续关注 ES6 中引入的特性。在 ES6 中发生的所有很酷的事情中,我们...](http://www.deadcoderising.com/es6-working-with-sets-in-javascript/ "http://www.deadcoderising.com/es6-working -with-sets-in-javascript/")www.deadcoderising.com

[Array vs Set vs Map vs Object — Javascript(ES6/ES7)中的实时用例

_互联网是查找信息的好地方,但有一个很小的问题。你在中间的船上......_codeburst.io](https://codeburst.io/array-vs-set-vs-map-vs-object-real-time-use-cases-in-javascript-es6- 47ee3295329b“https://codeburst.io/array-vs-set-vs-map-vs-object-real-time-use-cases-in-javascript-es6-47ee3295329b”)

[如何使用 Sets 在 JavaScript 中创建唯一值数组

_对于冗长的标题感到抱歉-有时可以通过代码示例更好地解释事情。想象一下你有一个..._dev.to](https://dev.to/claireparker/how-to-create-an-array-of-unique-values-in-javascript-using-sets-5dg6 "https:// dev.to/claireparker/how-to-create-an-array-of-unique-values-in-javascript-using-sets-5dg6")

[关于 ES6 地图你应该知道的事

_JavaScript ES6 引入了一种新的数据结构,称为映射。地图被设计为使用 Object..._hackernoon.com](https://hackernoon.com/what-you-should-know-about-es6-maps-dc66af6b9a1e "https://hackernoon.com/what-you -应该知道-es6-maps-dc66af6b9a1e")

[ES6 深度地图

_一个非常常见的 JavaScript 对象滥用案例是 hash-maps,我们将字符串键映射到任意值。_ponyfoo.com](https://ponyfoo.com/articles/es6-maps-in-depth "https://ponyfoo .com/articles/es6-maps-in-depth")

[什么是 JavaScript 生成器以及如何使用它们

_在本文中,我们将看看 ECMAScript 6 中引入的生成器。我们将看看它是什么..._codeburst.io](https://codeburst.io/what-are-javascript-generators- and-how-to-use-them-c6f2713fd12e "https://codeburst.io/what-are-javascript-generators-and-how-to-use-them-c6f2713fd12e")

[通过示例了解 ES6 JavaScript 中的生成器

_ES6 以生成器(或生成器函数)的形式引入了一种使用函数和迭代器的新方法。 A..._codeburst.io](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5 "https://codeburst.io/understanding-generators-in-es6-javascript-with -示例-6728834016d5")

[ES6 生成器的基础知识

_JavaScript ES6 中最令人兴奋的新特性之一是一种新的函数,称为生成器。名字..._davidwalsh.name](https://davidwalsh.name/es6-generators "https://davidwalsh.name/es6-generators")

[JavaScript 生成器简介

_JavaScript 的基础之一是它是单线程的,这意味着两段代码不能在..._dev.to 上运行](https://dev.to/kallaugher/an-introduction-to-javascript-generators-第1224章

[承诺 - JavaScript | MDN

_Promise 对象表示异步操作的最终完成(或失败)及其结果..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/承诺“https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise”)

[理解 JavaScript 承诺 |数字海洋

_Javascript Promises 可能很难理解。因此,我想把我理解的方式写下来......_scotch.io](https://scotch.io/tutorials/javascript-promises-for-dummies "https://scotch.io/tutorials/javascript-promises-假人")

[**理解 JavaScript 中的 Promise **

_深入了解创建和处理 Promises_hackernoon.com](https://hackernoon.com/understanding-promises-in-javascript-13d99df067c1 "https://hackernoon.com/understanding-promises-in-javascript-13d99df067c1" )

[掌握 JavaScript 面试:什么是 Promise?

_“掌握 JavaScript 面试”是一系列帖子,旨在让候选人为他们所面临的常见问题做好准备......_medium.com](https://medium.com/javascript-scene/master-the-javascript-interview-what-is -a-promise-27fc71e77261“https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261”)

[JavaScript Promise 概述 - SitePoint

本文探讨了 JavaScript 的新 Promises API,展示了如何在 JavaScript 中利用 Promises...](https://www.sitepoint.com/overview-javascript-promises/ "https://www.sitepoint.com/overview- javascript-promises/")www.sitepoint.com

[**如何在 JavaScript 中使用 Promise **

_JavaScript 中的Promises 是一种处理异步调用的方法。在 JavaScript ES6 中引入 Promises 之前,异步调用..._medium.freecodecamp.org](https://medium.freecodecamp.org/promises-in-javascript-explained-277b98850de "https://medium.freecodecamp.org/promises-在-javascript-explained-277b98850de")

[**在 JavaScript 中实现 Promise **

_我最喜欢编程的是啊哈!当你开始完全理解一个概念的那一刻。即使它..._medium.freecodecamp.org](https://medium.freecodecamp.org/how-to-implement-promises-in-javascript-1ce2680a7f51 "https://medium.freecodecamp.org/how-to-implement -promises-in-javascript-1ce2680a7f51")

[JavaScript:用简单的现实生活类比解释承诺

_用外行术语谈承诺_codeburst.io](https://codeburst.io/javascript-promises-explained-with-simple-real-life-analogies-dd6908092138 "https://codeburst.io/javascript-promises-explained-与简单现实生活中的类比 dd6908092138")

[25\。异步编程的承诺

_本章介绍了通过 Promises 进行异步编程和 ECMAScript 6 Promise API in..._exploringjs.com](http://exploringjs.com/es6/ch_promises.html "http://exploringjs.com/es6/ch_promises .html")

[JavaScript 承诺通过在赌场赌博来解释

_我们都喜欢 JavaScript 的异步功能。事实上,我们非常喜欢它们,以至于有时我们会过度放纵......_blog.codeanalogies.com](https://blog.codeanalogies.com/2018/08/26/javascript-promises-explained-by-gambling-at-a -赌场/“https://blog.codeanalogies.com/2018/08/26/javascript-promises-explained-by-gambling-at-a-casino/”)

[ES6 Promises:模式和反模式

_当我几年前第一次开始使用 NodeJS 时,我对现在被亲切地称为“回调..._medium.com”(https://medium.com/datafire-io/es6-promises-patterns-and-反模式-bbb21a5d0918 "https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918")

[ES6 Promises 的简单指南

_树林很可爱,又黑又深。但我有要遵守的承诺,在我睡觉前还有很长的路要走。 — Robert Frost_codeburst.io](https://codeburst.io/a-simple-guide-to-es6-promises-d71bacd2e13a "https://codeburst.io/a-simple-guide-to-es6-promises-d71bacd2e13a ")

[ES6 承诺

_ES6_codeburst.io 中一个非常有用的功能](https://codeburst.io/the-es6-promises-87a979ab27e4 "https://codeburst.io/the-es6-promises-87a979ab27e4")

[ES6 深度承诺

_Promises 是一个非常复杂的范例,所以我们慢慢来。这是我们将在..._ponyfoo.com](https://ponyfoo.com/articles/es6-promises-in-depth "https://ponyfoo.com/articles/es6-promises -深入")

[Javascript Promises:一种深入的方法

_“在这张纸上写下 Promise 的语法”,足以让很多初级甚至是......_codeburst.io](https://codeburst.io/playing-with-javascript-promises-a -comprehensive-approach-25ab752c78c3 "https://codeburst.io/playing-with-javascript-promises-a-comprehensive-approach-25ab752c78c3")

[如何编写 JavaScript Promise

_什么是承诺?_medium.freecodecamp.org](https://medium.freecodecamp.org/how-to-write-a-javascript-promise-4ed8d44292b8 "https://medium.freecodecamp.org/how-to-写-a-javascript-promise-4ed8d44292b8")

[编码作家指南:ES6 Promises 简介

_欢迎回到“编码作家指南”系列!如果你一直在关注这个系列,你就会知道我..._medium.com](https://medium.com/swlh/a-coding-writers-guide-an-introduction-to-es6-promises- 9ff9f9e88f6c“https://medium.com/swlh/a-coding-writers-guide-an-introduction-to-es6-promises-9ff9f9e88f6c”)

[**逆向工程 - 理解 JavaScript 中的 Promise **

_我们将在 JavaScript 中逆向工程 Promises 以及一些 90 年代的怀旧情结。标记为 showdev、教程..._dev.to](https://dev.to/itnext/reverse-engineering-understand-promises-1jfc "https://dev.to/itnext/reverse-engineering-understand-promises-1jfc ")

[将回调转换为承诺

_与回调相比,使用 Promises(或 Async/await)更容易。当您在..._dev.to 工作时尤其如此](https://dev.to/zellwk/converting-callbacks-to-promises-nhn "https://dev.to/zellwk/converting-callbacks-to-承诺-nhn")

[JavaScript 承诺:从零到英雄加备忘单

_是时候了,朋友。原生 JavaScript 承诺解释了我希望它们被解释给我的方式 — 加上一个方便的作弊..._medium.com](https://medium.com/dailyjs/javascript-promises-zero-to-hero-plus-cheat-sheet-64d75051cffa “https://medium.com/dailyjs/javascript-promises-zero-to-hero-plus-cheat-sheet-64d75051cffa”)

[Promises - JavaScript 概念

_这是我尝试通过 33 个 JS 概念中的每一个来解释的系列的一部分。这部分对应 Promises..._dev.to](https://dev.to/boywithsilverwings/promises-javascript-concepts-293c "https://dev.to/boywithsilverwings/promises-javascript-concepts-293c")

[Javascript 承诺 101

_了解 Promise 在 javascript 中的工作原理将成倍地提高您的开发技能。在这里我将分享:我保证..._dev.to](https://dev.to/iggredible/javascript-promise-101-3idl "https://dev.to/iggredible/javascript-promise-101-3idl")

[简化 JavaScript 承诺

_我喜欢承诺。不是来自人,而是来自 JavaScript。推文引用我喜欢承诺。不是来自人,而是来自..._dev.to](https://dev.to/sunnysingh/simplify-javascript-promises-4djb "https://dev.to/sunnysingh/simplify-javascript-promises-4djb")

[承诺的内幕

_关于 Promises 如何在 JavaScript_medium.com 中工作的快速简明指南](https://medium.com/madhash/the-low-down-on-promises-af4a96bbb95f "https://medium.com/madhash/the-low -down-on-promises-af4a96bbb95f")

[⭐️🎀 JavaScript 可视化:Promises & Async/Await

_曾经必须处理的 JS 代码只是......没有按照您预期的方式运行?也许看起来函数得到了......异步等待 5gke")

[JavaScript 中的承诺

_Callbacks 是在某事发生或某事完成后运行的函数。如果您必须进行异步..._dev.to](https://dev.to/peterklingelhofer/promises-in-javascript-3h5k "https://dev.to/peterklingelhofer/promises-in-javascript-3h5k")

[ES6 Promise 的最佳实践

_ES6 的承诺很棒!然而......他们仍然很痛苦。在这篇文章中,我分享了我的最佳实践..._dev.to](https://dev.to/somedood/best-practices-for-es6-promises-36da "https://dev.to/somedood/best- es6-promises-36da 实践")

[异步/等待

_有一种特殊的语法可以以更舒适的方式处理 Promise,称为“async/await”。令人惊讶..._javascript.info](https://javascript.info/async-await "https://javascript.info/async-await")

[异步编程:: Eloquent JavaScript

_谁能静待泥泞?谁能静待行动?老子、道德经..._eloquentjavascript.net](https://eloquentjavascript.net/11_async.html "https://eloquentjavascript.net/11_async.html")

[24\。异步编程(背景)

_本章解释了 JavaScript 中异步编程的基础。它为..._exploringjs.com](http://exploringjs.com/es6/ch_async.html "http://exploringjs.com/es6/ch_async.html")提供背景知识

[理解 JavaScript 中的异步等待

_关于何时以及如何使用 async 和 await_hackernoon.com 的经验法则和示例](https://hackernoon.com/understanding-async-await-in-javascript-1d81bb079b2c "https://hackernoon.com/understanding-async-等待-in-javascript-1d81bb079b2c")

[探索 JavaScript 中的 Async/Await 函数 |数字海洋

_Promises 为我们提供了一种更简单的方法来以顺序方式处理代码中的异步。考虑到我们的大脑..._alligator.io](https://alligator.io/js/async-functions/ "https://alligator.io/js/async-functions/")

[使用 Async 的异步 Javascript - Await

_Async/await 是一种在 Javascript 中编写异步代码的相对较新的方法。在我们使用回调和承诺之前..._scotch.io](https://scotch.io/tutorials/asynchronous-javascript-using-async-await "https://scotch.io/tutorials/asynchronous-javascript-using-async-等待")

[**带有 Async 和 Await 的现代异步 JavaScript **

_JavaScript 在很短的时间内从回调演变为 Promise (ES2015),并且自 ES2017 异步 JavaScript..._flaviocopes.com](https://flaviocopes.com/javascript-async-await/ "https://flaviocopes.com/javascript -异步等待/")

[异步 JavaScript:从回调地狱到异步和等待

编写成功的 Web 应用程序的关键之一是能够在每个页面上进行数十次 AJAX 调用。这是一个...](https://www.toptal.com/javascript/asynchronous-javascript-async-await-tutorial "https://www.toptal.com/javascript/asynchronous-javascript-async-await-tutorial ")www.toptal.com

[Javascript — ES8引入async/await个函数

_要了解人们为何对 ES8 异步/等待功能如此兴奋,您必须熟悉..._medium.com](https://medium.com/@_bengarrison/javascript-es8-introducing-async-await -functions-7a471ec7de8a “https://medium.com/@_bengarrison/javascript-es8-introducing-async-await-functions-7a471ec7de8a”)

[如何逃离异步/等待地狱

_async/await 将我们从回调地狱中解放出来,但人们开始滥用它 — 导致 async/await 地狱的诞生。_medium.freecodecamp.org](https://medium.freecodecamp.org/avoiding-the-async-await -hell-c77a0fb71c4c “https://medium.freecodecamp.org/avoiding-the-async-await-hell-c77a0fb71c4c”)

[理解 JavaScript 的异步等待

_假设我们有如下代码。在这里,我将 HTTP 请求包装在 Promise 中。承诺履行..._ponyfoo.com](https://ponyfoo.com/articles/understanding-javascript-async-await "https://ponyfoo.com/articles/understanding-javascript-async-await")

[JavaScript Async/Await:串行、并行和复杂流程 - TechBrij

_如果您有 ASP.NET MVC 方面的经验,那么您可能熟悉 C# 中的 async/await 关键字。同样的事情是..._techbrij.com](https://techbrij.com/javascript-async-await-parallel-sequence "https://techbrij.com/javascript-async-await-parallel-sequence")

[从 JavaScript Promises 到 Async/Await:为什么要麻烦?

_在本教程中,我们将介绍为什么我们需要 async/await,因为我们可以使用 JavaScript Promises 实现相同的匹配,到..._blog.pusher.com](https://blog.pusher.com/promises-async-await/" https://blog.pusher.com/promises-async-await/")

[现代 JS 中的流控制:对异步/等待的 Promise 的回调 - SitePoint

JavaScript 通常声称是异步的。这意味着什么?它如何影响发展?怎么样......](https://www.sitepoint.com/flow-control-callbacks-promises-async-await/“https://www.sitepoint.com/flow-control-callbacks-promises-async-等待/")www.sitepoint.com

[JavaScript:Promises 以及为什么 Async/Await 会胜出 - DZone 性能

_调用 validatePassword() 函数:下面的代码片段显示了验证密码的完整端到端检查..._dzone.com](https://dzone.com/articles/javascript-promises-and-why-asyncawait-wins- the-ba "https://dzone.com/articles/javascript-promises-and-why-asyncawait-wins-the-ba")

[如何使用 Async 和 Await 改进您的异步 JavaScript 代码

_如果你有机会观察现代 JavaScript 代码,你很有可能已经看到 async 和 await..._medium.freecodecamp.org](https://medium.freecodecamp.org/improve-your-asynchronous- javascript-code-with-async-and-await-c02fc3813eda "https://medium.freecodecamp.org/improve-your-asynchronous-javascript-code-with-async-and-await-c02fc3813eda")

[使用 Async Await 轻松获取数据

_异步请求是其他干净代码中许多常见且令人沮丧的错误的根源。因为大多数..._medium.com](https://medium.com/@micksheridan.24/making-fetches-easy-with-async-await-8a1246efa1f6 "https://medium.com/@micksheridan.24/making -fetches-easy-with-async-await-8a1246efa1f6")

[JavaScript Async/Await 优于普通 Promise 的 7 个原因(教程)

_Async/await 是在 NodeJS 7.6 中引入的,目前在所有现代浏览器中都受支持。我相信它一直是......_dev.to](https://dev.to/gafi/7-reasons-to-always-use-async-await-over-plain-promises-tutorial-4ej9“https:// dev.to/gafi/7-reasons-to-always-use-async-await-over-plain-promises-tutorial-4ej9")

[JavaScript 中的异步操作

_JavaScript 来自异步操作的危险遗留问题。它从回调开始,让 Ajax 调用..._dev.to](https://dev.to/jscrambler/asynchronous-operations-in-javascript-2p6b "https://dev.to/jscrambler/asynchronous-operations-in -javascript-2p6b")

[异步/等待:一个轻微的设计缺陷。

_我对 async/await 的经验是,它对于简单的情况非常棒,并且可以满足期望。如果您的用例是......_dev.to](https://dev.to/joeyhub/async-await-a-slight-design-flaw-2h2j "https://dev.to/joeyhub/async-await-a -轻微设计缺陷 2h2j")

[JavaScript:承诺或异步等待

_关于何时使用 which_betterprogramming.pub 的一组规则](https://betterprogramming.pub/should-i-use-promises-or-async-await-126ab5c98789 "https://betterprogramming.pub/should-i-use -promises-or-async-await-126ab5c98789")

[异步/等待:从零到英雄

_我完全不知道什么是 async / await 并且学习它很难:有 27 分钟的文本要阅读..._dev.to](https://dev.to/zhiyuanamos/async-await-from-zero-to -hero-a22 "https://dev.to/zhiyuanamos/async-await-from-zero-to-hero-a22")

[JavaScript 中的数据结构

_For Frontend Software Engineers_medium.com](https://medium.com/siliconwat/data-structures-in-javascript-1b9aed0ea17c "https://medium.com/siliconwat/data-structures-in-javascript-1b9aed0ea17c")

[JavaScript 中的算法和数据结构

_用 JavaScript 实现的算法和数据结构,带有解释和链接到进一步阅读和 YouTube..._itnext.io](https://itnext.io/algorithms-and-data-structures-in-javascript-a71548f902cb "https://itnext. io/algorithms-and-data-structures-in-javascript-a71548f902cb")

[数据结构:对象和数组

_在 JavaScript 中见过方括号和大括号中的一些数据吗?它们分别是数组和对象。 //..._scotch.io](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays "https://scotch.io/courses/ 10 个需要知道的 JavaScript 概念/数据结构对象和数组”)

[JavaScript 中的数据结构

_#data-structures 系列是关于在 JavaScript 中重新实现数据结构的文章集合。如果你不是......_blog.benoitvallon.com](http://blog.benoitvallon.com/data-structures-in-javascript/data-structures-in-javascript/ "http://blog.benoitvallon.com/data -javascript 中的结构/数据结构中的 javascript/")

[在 Javascript 中使用数据结构 — Stack

_Javascript 每天都在发展。随着 React、Angular、Vue、NodeJS 等框架和平台的快速发展......_blog.cloudboost.io](https://blog.cloudboost.io/playing-with-data-structures-in-javascript-stack-a55ebe50f29d" https://blog.cloudboost.io/playing-with-data-structures-in-javascript-stack-a55ebe50f29d")

[JavaScript 队列小指南

_队列是一种简单的数据结构,允许从一端插入元素,称为后端(也称为..._hackernoon.com](https://hackernoon.com/the-little-guide-of-queue-in-javascript -4f67e79260d9“https://hackernoon.com/the-little-guide-of-queue-in-javascript-4f67e79260d9”)

[barretlee/算法

_Detail & Discusion (讨论和细节) All algorithms writing with JavaScript in book ' Algorithms Fourth Edition'. Run..._github.com](https://github.com/barretlee/algorithms "https://github.com/barretlee/algorithms")

[humanwhocodes/computer-science-in-javascript

_用 JavaScript 编写的经典计算机科学范式、算法和方法的集合。 ..._github.com](https://github.com/nzakas/computer-science-in-javascript "https://github.com/nzakas/computer-science-in-javascript")

[jamiebuilds/itsy-bitsy-data-structures

_欢迎来到 Itsy Bitsy 数据结构!这里是许多常见数据结构的超级简化示例..._github.com](https://github.com/jamiebuilds/itsy-bitsy-data-structures "https://github.com/jamiebuilds/itsy-bitsy -数据结构")

[关于 DEV - DEV 社区

_DEV 是一个软件开发人员社区,他们聚在一起互相帮助。软件行业依赖...

[数据结构:理解图

_什么是图表?图用于表示关系和层次结构,由节点和边组成。_javascript.plainenglish.io](https://javascript.plainenglish.io/data-structures-understanding-graphs-82509d35e6b5"https://javascript.plainenglish .io/data-structures-understanding-graphs-82509d35e6b5")

[数据结构两种方式:链表(Pt 1)

_我主要使用 JavaScript,但我工作的地方是在后端使用 Java。总是着迷于......_dev.to](https://dev.to/freddieduffield/data-structures-two-ways-linked-list-2n61 "https://dev.to/freddieduffield/data-structures-two-方式链接列表 2n61")

[数据结构两种方式:链表(Pt2)

_如果你是新来的——你好!如果您想从头开始,或者直接跳到..._dev.to](https://dev.to/freddieduffield/data-structures-two-ways-linked-list-pt2-2i60 “https://dev.to/freddieduffield/data-structures-two-ways-linked-list-pt2-2i60”)

[用 JavaScript 解释的图形数据结构

_在这篇文章中,我们将探索像图这样的非线性数据结构。此外,我们将介绍中心概念..._dev.to](https://dev.to/amejiarosario/graph-data-structures-for-beginners-5edn "https://dev.to/amejiarosario/graph-data -面向初学者的结构-5edn")

[Javascript 中的大 O 表示法

_为您的技术工作面试做好准备_medium.com](https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b "https://medium.com/cesars-tech-insights/big -o-notation-javascript-25c79f50b19b")

[时间复杂度/大 O 表示法

_缩放算法而不是 Applications_medium.com](https://medium.com/javascript-scene/time-complexity-big-o-notation-1a4310c3ee4b "https://medium.com/javascript-scene/time-complexity-big -o-notation-1a4310c3ee4b")

[JavaScript 中的大 O

_像我之前的许多新开发人员一样,Big O 在我第一次听到它的时候就直截了当。这是一个话题..._medium.com](https://medium.com/@gmedina229/big-o-in-javascript-36ff67766051 "https://medium.com/@gmedina229/big-o-in-javascript- 36ff67766051")

http://www.bradoncode.com/blog/2012/04/big-o-algorithm-examples-in-javascript.html

[JavaScript 中的时间复杂度分析

算法是解决问题的独立的逐步指令集。这些步骤需要时间...](https://www.jenniferbland.com/time-complexity-analysis-in-javascript/ "https://www.jenniferbland.com/time-complexity-analysis-in- javascript/")www.jenniferbland.com

[简单英语的算法:时间复杂度和 Big-O 表示法

_每个优秀的开发人员都有时间考虑。他们想给他们的用户更多,所以他们可以做所有这些事情......_medium.freecodecamp.org](https://medium.freecodecamp.org/time-is-complex-but-priceless-f0abd15063c "https:// /medium.freecodecamp.org/time-is-complex-but-priceless-f0abd15063c")

[大O符号简介

_Big O notation 是一个很大的话题,它的普遍重要性源于它描述了..._dev.to 的效率](https://dev.to/lofiandcode/an-introduction-to-big-o-notation- 210o“https://dev.to/lofiandcode/an-introduction-to-big-o-notation-210o”)

[Crizstian/data-structure-and-algorithms-with-ES6

_Num 类型练习说明 10.- 图形数据结构 2 图形由一组顶点和一组边组成。 A..._github.com](https://github.com/Crizstian/data-structure-and-algorithms-with-ES6 "https://github.com/Crizstian/data-structure-and-algorithms-with-ES6 ")

[trekhleb/javascript-算法

_此存储库包含许多流行算法和数据结构的基于 JavaScript 的示例。每个算法和..._github.com](https://github.com/trekhleb/javascript-algorithms "https://github.com/trekhleb/javascript-algorithms")

[JS:算法

更多问题 CSS 面试问题,HTML 面试问题,如果你更舒服或自称是......](http://www.thatjsdude.com/interview/js1.html "http://www.thatjsdude.com/interview /js1.html")www.thatjsdude.com

[JavaScript 中的算法

_40 问题、解决方案和说明(https://medium.com/siliconwat/algorithms-in-javascript-b0bed68f4038)

[JavaScript 对象、方括号和算法

_JavaScript 最强大的方面之一是能够动态引用对象的属性。在这个..._medium.freecodecamp.org](https://medium.freecodecamp.org/javascript-objects-square-brackets-and-algorithms-e9a2916dc158 "https://medium.freecodecamp.org/javascript-objects-square-括号和算法-e9a2916dc158")

[felipernb/algorithms.js

_用 JavaScript 实现的经典算法和数据结构,你知道... FOR SCIENCE._github.com](https://github.com/felipernb/algorithms.js "https://github.com/felipernb/algorithms.js" )

[杨顺/拉个噢

_📕 TypeScript 中的数据结构和算法库 - yangshun/lago_github.com](https://github.com/yangshun/lago "https://github.com/yangshun/lago")

[idosela/javascript中的算法

_用 JavaScript 编写的计算机科学算法和数据结构的集合。运行排序性能测试..._github.com](https://github.com/idosela/algorithms-in-javascript "https://github.com/idosela/algorithms-in-javascript")

[JavaScript 中的算法和数据结构

_你好读者!我最近在 GitHub 上启动了 JavaScript 算法和数据结构存储库,其中包含一个集合..._dev.to](https://dev.to/trekhleb/algorithms-and-data-structures-in-javascript-49i3 "https:// dev.to/trekhleb/algorithms-and-data-structures-in-javascript-49i3")

[JavaScript 中的继承 - 学习 Web 开发 | MDN

_本文涵盖了我们认为您现在应该了解的核心 OOJS 理论和语法的其余部分。在这个..._developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance "https://developer.mozilla.org/en-US/docs/学习/JavaScript/对象/继承”)

[类继承

_类继承是一个类扩展另一个类的一种方式。所以我们可以在..._javascript.info](https://javascript.info/class-inheritance "https://javascript.info/class-inheritance")之上创建新功能

[JavaScript 中的继承

_详细了解 JavaScript_medium.com 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f "https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f")

https://www.sitepoint.com/simple-inheritance-javascript/

[JavaScript — 继承、委托模式和对象链接

_了解 JavaScript 中的继承(原型继承)、行为/对象委托模式和对象链接..._codeburst.io](https://codeburst.io/javascript-inheritance-25fe61ab9f85 "https://codeburst.io/javascript-inheritance- 25fe61ab9f85")

[面向对象的 JavaScript:带示例的多态性

_再说一遍,这不是 JavaScript 的高级主题,但它依赖于面向对象的 JavaScript 和多态是一个......_blog.knoldus.com](https://blog.knoldus.com/object-oriented-javascript-polymorphism-with-examples/ “https://blog.knoldus.com/object-oriented-javascript-polymorphism-with-examples/”)

[Proteus 之类的程序 — Javascript 多态性初学者指南

medium.com](https://medium.com/yld-blog/program-like-proteus-a-beginners-guide-to-polymorphism-in-javascript-867bea7c8be2 "https://medium.com/yld-blog /program-like-proteus-a-beginners-guide-to-polymorphism-in-javascript-867bea7c8be2")

[面向对象的 JavaScript:深入了解 ES6 类 - SitePoint

我们经常需要在我们的程序中表达一个想法或概念——可能是汽车引擎、计算机文件、路由器或......](https://www.sitepoint.com/object-orientated-javascript-deep-dive -es6-classes/“https://www.sitepoint.com/object-oriented-javascript-deep-dive-es6-classes/”)www.sitepoint.com

[学习 JavaScript 设计模式

_一本关于 JavaScript 设计模式的开源书_addyosmani.com](https://addyosmani.com/resources/essentialjsdesignpatterns/book/ "https://addyosmani.com/resources/essentialjsdesignpatterns/book/")

[JavaScript 设计模式 |数字海洋

_有很多时候应用程序的一个部分发生变化,其他部分需要更新。在 AngularJS 中,如果..._scotch.io](https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know "https://scotch.io/bar-talk/4 -javascript-设计模式-你应该知道")

[JavaScript 设计模式

_最有用的设计模式的终极指南_betterprogramming.pub](https://betterprogramming.pub/javascript-design-patterns-25f0faaaa15 "https://betterprogramming.pub/javascript-design-patterns-25f0faaaa15")

[JavaScript 设计模式

_Constructor Pattern_medium.com](https://medium.com/front-end-weekly/javascript-design-patterns-ed9d4c144c81 "https://medium.com/front-end-weekly/javascript-design-patterns-ed9d4c144c81" )

[Javascript 设计模式:它们是什么以及如何使用它们

_开发人员在 JavaScript 中经常遇到可以通过使用完善的设计模式来解决的编码问题..._seesparkbox.com](https://seesparkbox.com/foundry/javascript_design_patterns "https://seesparkbox.com/foundry/javascript_design_patterns")

[理解 JavaScript 中的设计模式

_了解 JavaScript 中的各种设计模式_blog.bitsrc.io](https://blog.bitsrc.io/understanding-design-patterns-in-javascript-13345223f2dd "https://blog.bitsrc.io/understanding-design-patterns -in-javascript-13345223f2dd")

[fbeline/设计模式-JS

_在这里,您将找到使用原型和 ES6 类在 JavaScript 中实现的 23 (GoF) 设计模式。你可以..._github.com](https://github.com/fbeline/Design-Patterns-JS "https://github.com/fbeline/Design-Patterns-JS")

[JavaScript 中模块模式的力量

_使用模块 pattern_betterprogramming.pub 修饰您的应用程序](https://betterprogramming.pub/the-power-of-the-module-pattern-in-javascript-3c73f7cd10e8 "https://betterprogramming.pub/the-power-of -the-module-pattern-in-javascript-3c73f7cd10e8")

[使用 JavaScript 的开发人员设计模式 - 第一部分

_大多数使用 JavaScript 的开发人员都在努力编写可读、可维护和可重用的代码,因为编写..._dev.to](https://dev.to/omensah/design-patterns-for-developers-using-javascript----part -one--b3e "https://dev.to/omensah/design-patterns-for-developers-using-javascript----part-one--b3e")

[使用 JavaScript 的开发人员设计模式 - 第二部分

_在上一篇文章中,我们了解了设计模式、它的定义、历史以及与软件的结合......_dev.to](https://dev.to/omensah/design-patterns-for-developers-using-javascript ---第二部分--3p39“https://dev.to/omensah/design-patterns-for-developers-using-javascript---第二部分--3p39”)

[现代 JavaScript 开发中的设计模式

_软件项目设计中有效沟通的思考_levelup.gitconnected.com](https://levelup.gitconnected.com/design-patterns-in-modern-javascript-development-ec84d8be06ca "https://levelup.gitconnected.com/现代设计模式-javascript-开发-ec84d8be06ca")

[理解设计模式:使用 Dev.to 和 Medium 社交网络的迭代器!

_有23种经典设计模式,在原著《设计模式:可重用的元素..._dev.to》中有描述(https://dev.to/carlillo/understanding-design-patterns-iterator-using-dev-to -and-medium-social-networks-3bdd "https://dev.to/carlillo/understanding-design-patterns-iterator-using-dev-to-and-medium-social-networks-3bdd")

[JavaScript 设计模式 - 工厂模式

_欢迎来到我的新开发系列,我将尽力使用 JavaScript 解释设计模式!在软件中..._dev.to](https://dev.to/kristijanfistrek/javascript-design-patterns-factory-pattern-562p "https://dev.to/kristijanfistrek/javascript-design-patterns-factory-pattern- 562p")

[JavaScript 设计模式 — 模块模式

_JavaScript_javascript.plainenglish.io 中最常见的模式之一](https://javascript.plainenglish.io/javascript-design-pattern-module-pattern-555737eccecd "https://javascript.plainenglish.io/javascript-design-模式模块模式555737eccecd")

[设计模式:空对象

_使用此模式避免条件复杂性_betterprogramming.pub](https://betterprogramming.pub/design-patterns-null-object-5ee839e37892 "https://betterprogramming.pub/design-patterns-null-object-5ee839e37892")

[策略模式

GitHub 链接:](https://dev.to/francescoxx/strategy-pattern-5oh "https://dev.to/francescoxx/strategy-pattern-5oh")_https://github.com/FrancescoXX /Design-Patterns-Strategy-Javascript策略模式,也称为..._dev.to

[适配器模式

Github 链接:](https://dev.to/francescoxx/adapter-pattern-5bjk "https://dev.to/francescoxx/adapter-pattern-5bjk")_https://github.com/FrancescoXX /Design-Pattern-Adapter-Javascript适配器模式用于允许..._dev.to

[JavaScript 中复合模式的力量

_Find me on medium 在这篇文章中,我们将讨论 JavaScript 中的复合设计模式。在...标记为..._dev.to](https://dev.to/jsmanifest/the-power-of-composite-pattern-in-javascript-2732 "https://dev.to/jsmanifest/the- javascript-2732 中复合模式的幂")

[捍卫防御性编程

_注意:在本文中,我引用了一个我编写的名为 allow 的验证库。它现在在一个 NPM 包中,可以..._dev.to](https://dev.to/bytebodger/in-defense-of-defensive-programming-k45 "https://dev.to/bytebodger/in-defense- of-defensive-programming-k45")

[JavaScript 设计模式 |优达学城免费课程

在杂乱无章的世界中免费课程组织代码开始免费课程关于本课程本课程涵盖的方法...](https://www.udacity.com/course/javascript-design-patterns--ud989“https://www. udacity.com/course/javascript-design-patterns--ud989")www.udacity.com

[getify/Functional-Light-JS

_第 2 章探讨了 JS 函数的核心本质,并为使函数成为 FP 函数奠定了基础......_github.com](https://github.com/getify/Functional-Light-JS/blob/master/manuscript/ ch3.md“https://github.com/getify/Functional-Light-JS/blob/master/manuscript/ch3.md”)

[在 JavaScript 中使用函数组合 |编码员

先决条件:我在这篇文章中使用了柯里化,所以如果你不知道,我鼓励你阅读我之前的文章...](https://www.codementor.io/michelre/use-function-composition-in -javascript-gkmxos5mj“https://www.codementor.io/michelre/use-function-composition-in-javascript-gkmxos5mj”)www.codementor.io

[JavaScript ES6 中的柯里化

_Currying 可以让你对 JavaScript 有更深入的了解。让我们看看如何使用箭头函数来完成它!_blog.benestudio.co](https://blog.benestudio.co/currying-in-javascript-es6-540d2ad09400 "https://blog.benestudio.co/currying-在-javascript-es6-540d2ad09400")

[编写中间件——JavaScript中的组合和Currying Elegance

_Javascript 是一种优雅而优美的语言,它允许开发人员灵活地在..._medium.com 之间移动](https://medium.com/@pragyan88/writing-middleware-composition-and-currying-elegance-in- javascript-8b15c98a541b "https://medium.com/@pragyan88/writing-middleware-composition-and-currying-elegance-in-javascript-8b15c98a541b")

[函数式 JavaScript:日常使用的函数组合。

_函数组合必须是函数式编程中我最喜欢的部分。希望能给大家提供一个好的真实的..._medium.com](https://medium.com/hackernoon/javascript-functional-composition-for-every-day-use-22421ef65a10" https://medium.com/hackernoon /javascript-functional-composition-for-every-day-use-22421ef65a10")

[我今天学到了什么 💡 2017 年 7 月 2 日

_功能组成:compose() 和 pipe()_medium.com](https://medium.com/@acparas/what-i-learned-today-july-2-2017-ab9a46dbf85f "https://medium.com/ @acparas/what-i-learned-today-july-2-2017-ab9a46dbf85f")

[为什么潮人要编写一切:JavaScript 中的函数式编写

_Lodash 和 Underscore 无处不在,但仍然有一个超级高效的方法,实际上只有那些..._busypeoples.github.io](http://busypeoples.github.io/post/functional-composing-javascript/ "http://busypeoples .github.io/post/functional-composing-javascript/")

[函数式 JavaScript 简介:第 3 部分

_这是介绍 JavaScript 中“函数式”编程的四部分系列的第三部分。在上一篇文章中我们看到... -introduction-to-functional-javascript-functions/")

[Curry And Compose(为什么你应该在你的代码中使用类似 ramda 的东西)

_谈到函数式编程,主要基石是可组合性,创建新函数的能力......_jsleao.wordpress.com](https://jsleao.wordpress.com/2015/02/22/curry-and-compose-why -you-should-be-using-something-like-ramda-in-your-code/“https://jsleao.wordpress.com/2015/02/22/curry-and-compose-why-you-should-在你的代码中使用类似 ramda 的东西/")

[在 JavaScript 中使用 Pipe 的函数组合

_2016 年 12 月 13 日这篇文章使用 ES6 语法。同样的事情可以用 ES5 完成,但需要更多......_vanslaars.io](https://vanslaars.io/post/create-pipe-function/ "https://vanslaars.io/post/create-pipe -函数/")

[带有 Ramda 的实用函数式 Javascript - Telerik 博客

_文章共同作者:Andrew D'Amelio 和 Yuri Takhteyev 在 rangle.io,我们一直是函数式编程的粉丝......_developer.telerik.com](https://developer.telerik.com/featured/practical-functional- javascript-ramda/“https://developer.telerik.com/featured/practical-functional-javascript-ramda/”)

[偏应用、柯里化和函数组合的美。

_Story Time_hackernoon.com](https://hackernoon.com/the-beauty-in-partial-application-currying-and-function-composition-d885bdf0d574 "https://hackernoon.com/the-beauty-in-partial-应用程序柯里化和功能组成-d885bdf0d574")

[咖喱或部分应用?

和...之间的不同

部分应用和Curry_medium.com](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8 "https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8")

[JavaScript 中的部分应用

_除非你使用过另一种函数式编程语言,如 ML 或 Haskell,否则部分应用等概念......_benalman.com](http://benalman.com/news/2012/09/partial-application-in-javascript/ "http ://benalman.com/news/2012/09/partial-application-in-javascript/")

[函数的部分应用

_提供比预期更少的参数的函数称为函数的部分应用。_hackernoon.com](https://hackernoon.com/partial-application-of-functions-dbe7d9b80760 "https://hackernoon.com/partial-application-功能-dbe7d9b80760")

[Javascript-Currying VS 部分应用程序

_很多人在柯里化和部分应用之间感到困惑,我们中的许多人不知道什么,在哪里以及......_towardsdatascience.com](https://towardsdatascience.com/javascript-currying-vs-partial-application-4db5b2442be8“https ://towardsdatascience.com/javascript-currying-vs-partial-application-4db5b2442be8")

[ECMAScript 2015 中的部分应用

_这部分材料最初出现在Currying 和Partial Application 的区别是什么?这里是..._raganwald.com](http://raganwald.com/2015/04/01/partial-application.html "http://raganwald.com/2015/04/01/partial-application.html")

[Javascript 中的函数组合

_Functional composition 是指你采用两个或多个函数,并将其中一个函数变成一个函数。当你...

[所以你想成为一名函数式程序员(第 1 部分)

_迈出理解函数式编程概念的第一步是最重要的,有时也是最重要的......_cscalfani.medium.com](https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer -part-1-1f15e387e536 “https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer-part-1-1f15e387e536”)

[所以你想成为一名函数式程序员(第 2 部分)

_迈出理解函数式编程概念的第一步是最重要的,有时也是最重要的......_cscalfani.medium.com](https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer -part-2-7005682cec4a “https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer-part-2-7005682cec4a”)

[所以你想成为一名函数式程序员(第 3 部分)

_迈出理解函数式编程概念的第一步是最重要的,有时也是最重要的......_cscalfani.medium.com](https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer -part-3-1b0fd14eb1a7“https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer-part-3-1b0fd14eb1a7”)

[所以你想成为一名函数式程序员(第 4 部分)

_迈出理解函数式编程概念的第一步是最重要的,有时也是最重要的......_cscalfani.medium.com](https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer -part-4-18fbe3ea9e49“https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer-part-4-18fbe3ea9e49”)

[所以你想成为一名函数式程序员(第 5 部分)

_迈出理解函数式编程概念的第一步是最重要的,有时也是最重要的......_cscalfani.medium.com](https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer -part-5-c70adc9cf56a “https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer-part-5-c70adc9cf56a”)

[函数式编程基本原理简介

_在长时间学习和使用面向对象编程之后,我退后一步思考系统......_medium.freecodecamp.org](https://medium.freecodecamp.org/an-introduction-to-the-basic-功能编程原理-a2c2a15c84“https://medium.freecodecamp.org/an-introduction-to-the-basic-principles-of-functional-programming-a2c2a15c84”)

[Javascript 函数式编程的概念

_经过长时间学习和使用面向对象编程,我退后一步思考系统......_medium.com](https://medium.com/the-renaissance-developer/concepts-of-functional-programming- in-javascript-6bc84220d2aa "https://medium.com/the-renaissance-developer/concepts-of-functional-programming-in-javascript-6bc84220d2aa")

[JavaScript 函数式编程风格简介

_近年来,传统编程和函数式编程之间发生了结构性转变......_medium.freecodecamp.org](https://medium.freecodecamp.org/an-introduction-to-functional-programming-style-in-javascript- 71fcc050f064“https://medium.freecodecamp.org/an-introduction-to-functional-programming-style-in-javascript-71fcc050f064”)

[编写更多功能 JavaScript 的实用指南

_函数式编程很棒。随着 React 的引入,越来越多的 JavaScript 前端代码正在..._medium.freecodecamp.org](https://medium.freecodecamp.org/a-practical-guide-to-writing-more-functional-javascript- db49409f71 "https://medium.freecodecamp.org/a-practical-guide-to-writing-more-functional-javascript-db49409f71")

[JavaScript中函数式管道的简单解释

_有时我被问到为什么我们在 RxJS 中不再有“点链”,或者为什么 RxJS 切换到使用管道。那里..._dev.to](https://dev.to/benlesh/a-simple-explanation-of-functional-pipe-in-javascript-2hbj "https://dev.to/benlesh/a-simple-explanation -of-functional-pipe-in-javascript-2hbj")

[ryanmcdermott/clean-code-javascript

_软件工程原理,来自 Robert C. Martin 的书,适用于 JavaScript。这不是一个风格指南。这是..._github.com](https://github.com/ryanmcdermott/clean-code-javascript "https://github.com/ryanmcdermott/clean-code-javascript")

[JavaScript 清洁编码最佳实践 | @RisingStack

_编写干净的代码是你必须知道和做的,才能称自己为专业的开发人员。没有..._blog.risingstack.com](https://blog.risingstack.com/javascript-clean-coding-best-practices-node-js-at-scale/ "https://blog.risingstack.com/ javascript-clean-coding-best-practices-node-js-at-scale/")

[JavaScript中的函数参数 — 简洁代码

_在我作为 Web 开发人员的时间里,我必须处理很多 JavaScript 代码。我喜欢 JavaScript,毫无疑问。但是..._kevin-peters.medium.com](https://kevin-peters.medium.com/function-parameters-in-javascript-clean-code-4caac109159b "https://kevin-peters.medium.com/function -参数-in-javascript-clean-code-4caac109159b")

[保持代码干净

_我坐下来,和我的团队成员一起讨论解决方案。 “我们必须赢得这场比赛”我说,把自己埋得很深......_codeburst.io](https://codeburst.io/keeping-your-code-clean-d30bcffd1a10 "https://codeburst.io/keeping-your-code-清洁-d30bcffd1a10")

[使用现代 JavaScript 语法的最佳实践 - SitePoint

这篇文章出现在我们的书中,现代 JavaScript 正在迅速发展,以满足不断变化的新需求......](https://www.sitepoint.com/modern-javascript-best-practices/ "https://www.sitepoint .com/modern-javascript-best-practices/")www.sitepoint.com

[cross-js/cross-js

_采用 CrossJS 风格意味着你的 javascript 可以在任何环境中工作,而无需依赖任何内核..._github.com](https://github.com/cross-js/cross-js "https://github.com/cross-js /cross-js")

[编写干净的代码

_我们都同意编写干净的代码很重要。它使团队工作更容易,即使我们是一个人......_dev.to](https://dev.to/ganderzz/on-writing-clean-code-57cm "https://dev.到/ganderzz/on-writing-clean-code-57cm")

[编写干净的代码和编程实践:给初学者的可行建议

_"风格的目的是让代码便于自己和他人阅读,良好的风格对优秀至关重要......_dev.to](https://dev.to/nityeshaga/writing-clean-code-and- the-practice-of-programming-actionable-advice-for-beginners-5f0k “https://dev.to/nityeshaga/writing-clean-code-and-the-practice-of-programming-actionable-advice-for-初学者-5f0k")

[干净代码、脏代码、人工代码

_上周,丹·阿布拉莫夫(Dan Abramov)发表了一篇非常个人化且令人谦卑的博客文章,题为再见,清洁代码。我看到一条关于..._dev.to 的推文](https://dev.to/d_ir/clean-code-dirty-code-human-code-6nm "https://dev.to/d_ir/clean-code-dirty -code-human-code-6nm")

[编写更好的 JavaScript 的实用方法

_改进JS的可靠方法。标记为 javascript、webdev、初学者、react._dev.to](https://dev.to/taillogs/practical-ways-to-write-better-javascript-26d4 "https://dev.to/taillogs/practical -写得更好的方法-javascript-26d4")

≡

通过Bryan Guner上2021 年 7 月 3 日。

规范链接

2021年8月24日从中出口。

我最有用的 Gist 条目的集合

这个列表没有特别的顺序!

我最有用的 Gist 条目的集合

此列表没有特定的顺序!

[网络开发中心

_Memoization、Tabulation 和 Sorting Algorithms by Example 为什么查看运行时不是一个可靠的方法..._bgoonz-blog.netlify.app](https://bgoonz-blog.netlify.app/" netlify.app/")

Ubuntu 设置:

Markdown 备注模板:

Jquery 备忘单:

有用的 Bash 命令:

Python 备忘单:

Html 备忘单:

Git 备忘单:

将 React 应用程序部署到 Heroku:

Bash 别名:

JS 备忘单:

CSS 备忘单:

如果您发现本指南对您有帮助,请随时查看我托管类似内容的 github/gists:

bgoonz 的要点 · GitHub

[bgoonz — 概述

_Web 开发人员,电气工程师 JavaScript | CSS |引导程序 |蟒蛇 |反应 | Node.js |快递 |续集..._github.com](https://github.com/bgoonz "https://github.com/bgoonz")

或查看我的个人资源网站:

https://bgoonz-blog.netlify.app/

通过Bryan Guner上2021 年 3 月 6 日。

规范链接

2021年8月24日从中出口。

全面深入 React

深入了解 React 的世界。

深度反应:综合指南

深入了解 React 的世界。

[ Ferenc Almasi 在 Unsplash 上的照片 ](https://res.cloudinary.com/practicaldev/image/fetch/s--nMter0e5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// cdn-images-1.medium.com/max/800/0%2ALnugLVhKbiGfSSHr)

照片由Ferenc Almasi拍摄于Unsplash

[ALLOFMYOTHERARTICLES

要记住的随机事物

使用()隐式返回组件。
index.js的作用是_render_你的应用程序。
对root的引用来自公共 HTML 文件正文中的 div。
组件的状态只是一个普通的 JS 对象。
类组件需要render()方法才能返回 JSX。
功能组件直接返回 JSX。
Class在 React 中是className。
解析整数时,仅链Number.parseInt("123")
如果要在片段内创建条件,请使用三元运算符。

{ x u003du003du003d y ?椅子:t 椅子;}

React.Fragment的目的是允许您在不添加额外 dom 元素的情况下创建子组。

前端历史

React 让你更容易制作前端元素。前端时间线
过去几年使用的一些值得注意的前端库:
2005:Script.aculo.us
2005:道场
2006:小唯
2010:淘汰赛
2011:AngularJS
2012:榆树
2013:React(被认为是标准前端库)
React 管理网页中 DOM 节点的创建和更新。
它所做的只是将内容动态呈现到您的 DOM 中。
它没有做什么:
阿贾克斯
服务
本地存储
提供CSS框架
React 没有意见
只包含一些供开发人员遵循的规则,并且可以正常工作。
JSX:Javascript 扩展是一种为帮助编写 React 应用程序而发明的语言(看起来像是 JS 和 HTML 的混合体)
这里概述了渲染 vanilla JS 以创建元素和 JSX 之间的区别:

获取(“https://example.com/api/people”)

.then((响应) u003d> response.json())

.then((人) u003d> {

常量 html u003d "

"; for (let person of data.people) { html +u003d<li>${person.lastName}, ${person.firstName}</li>; } html +u003d "

"; document.querySelector("#people-list").innerHTML u003d html; });

功能人员列表(道具){

返回 (

$ {props.people.map((person) u003d> (* {person.lastName}, {person.firstName}

))}

); } const peopleListElement u003d document.querySelector("#people-list"); fetch("https://example.com/api/people") .then((response) u003d> response.json()) .then((people) u003d> { const props u003d { people }; ReactDOM .render(, peopleListElement); });

这可能看起来像很多代码,但是当您最终构建许多组件时,将这些函数/类中的每一个放入它们自己的文件中以组织您的代码会变得很好。在 React 中使用工具
React DevTools:浏览器中的新工具,用于查看 React 在浏览器中的工作方式
create-react-app:可扩展的命令行工具,帮助生成标准的 React 应用程序。
Webpack:介于处理所涉及的额外构建步骤的工具之间。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--nEwqJ2MX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ALHVHf7SPZ1t0UVAj)- HMR:(热模块更换)当您对源代码进行更改时,这些更改会实时交付。

React 开发人员创建了一个名为Flux Architecture的东西来调节他们的网页如何使用和修改从后端 API 接收的数据。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--mQYA0hFs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AwR-lbD4zf45-IHoQ)- 选择 React

基本上,React 是非常重要的学习和掌握。

React 概念和功能

与 Vanilla JavaScript 相比,使用 React 有很多好处。

Modularity
为了避免许多事件侦听器和模板字符串的混乱,React 为您提供了很多模块化的好处。
Easy to start
使用 Basic React 不需要特殊工具。
你可以在 React 中直接使用createElement方法开始工作。
Declarative Programming
React 本质上是声明性的,利用其内置的 createElement 方法或称为 JSX 的高级语言。
Reusability
创建可以反复使用的元素。单流数据
React 应用程序是作为父组件和子组件的组合构建的。
父组件可以有一个或多个子组件,所有子组件都有父组件。
数据永远不会从子代传递给父代。
Virtual DOM:React 提供了一个虚拟 DOM,它充当真实 DOM 和开发人员之间的代理,以帮助调试、维护和提供一般用途。
由于这种用法,React 对网页的处理更加智能;使其成为最快的前端库之一。

ES6 复习

每个文件导出一项

使用 ES6 中的export default语句导出项目。 ES6

导出默认类钱包 {

// ...

}

// sayHello 不会被导出

功能说你好(){

console.log("你好!");

}

CommonJS(等效)

class Wallet {
  // ...
}
// sayHello will not be exported
function sayHello() {
  console.log("Hello!");
}
module.exports = Wallet;

进入全屏模式退出全屏模式

每个文件导出多个项目

仅使用export关键字(无默认值)导出每个文件的多个项目。 ES6(最好像这样单独导出它们,而不是将它们全部捆绑到一个对象中)

出口类钱包{

// ...

}

导出函数sayHello() {

console.log("你好!");

}

出口 const sayHi u003d () u003d> {

console.log("嗨!");

};

类钱包{

// ...

}

功能说你好(){

console.log("你好!");

}

常量 sayHi u003d () u003d> {

console.log("嗨!");

};

出口{钱包,sayHello,sayHi};

CommonJS(等效)

class Wallet {
  // ...
}
function sayHello() {
  console.log("Hello!");
}
const sayHi = () =&gt; {
  console.log("Hi!");
};
module.exports = {
  Wallet,
  sayHello,
  sayHi,
};

进入全屏模式退出全屏模式

使用 ES6 与 CommonJS 导入

[](https://res.cloudinary.com/practicaldev/image/fetch/s--b8s7_l2B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2A7EZESKf0XPbncXAY)- ES6 模块中的导入语句必须始终位于文件的顶部,因为所有导入都必须在文件的其余代码运行之前发生。 ES6

import { Wallet } from "./wallet";
import * as fs from "fs";
const wallet = new Wallet();

进入全屏模式退出全屏模式

CommonJS

let { Wallet } = require("./wallet");
const wallet = new Wallet();
let fs = require("fs");

进入全屏模式退出全屏模式

未命名的默认导入

您可以在导入时将未命名的项目命名为 export default 任何名称。

// 导出

导出默认类钱包 {

// ...

}

// 导入

从“wallet.js”导入资金;

常量钱包 u003d 新钱();

请记住,如果您使用export而不是export default,那么您的导入已经命名并且无法重命名。

// 导出

出口类钱包{

// ...

}

// 导入

从“wallet.js”导入{钱包};

常量钱包 u003d 新钱包();

别名导入

用作星号以导入整个模块的内容。
请记住,以后必须使用as关键字来引用它。

// 出口

导出函数sayHello() {

console.log("你好!");

}

出口 const sayHi u003d () u003d> {

console.log("嗨!");

};

//进口

从“greetings.js”导入 * 作为问候语;

问候.sayHello(); // 你好!

问候.sayHi(); // 你好!

您还可以命名来自不同文件的同名函数或项目。

从“./wallet1”导入{ Wallet as W1};

从“./wallet2”导入{ Wallet as W2};

常量 w1 u003d 新 W1();

常量 w2 u003d 新 W2();

ES6 模块的浏览器支持

ES6 模块只能在将 JS 文件指定为模块时使用。 ``
您可以通过将模块添加到脚本标签中来获得对 ES6 模块的浏览器支持。

备注

JSX 深入

请记住,JSX 只是内置React.createElement(component, props, ...children)的语法糖
React 库必须始终在您的 JSX 代码范围内。
对 JSX 类型使用点表示法
用户定义的组件必须大写vs
不能使用通用表达式作为 React 元素类型。 (Incorrect)

功能故事(道具){

// 错误的! JSX 类型不能是表达式。

返回 ;

};

(Corrected)

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return ;
}

进入全屏模式退出全屏模式

JSX 中的道具

在 JSX 中指定 props 的几种方法。
Javascript Expressions as Props
String Literals
Props Default to “True”
Spread Attributes

函数 App1() { 返回 ; } function App2() { const props u003d { firstName: "Ben", lastName: "Hector" };返回 ; }

JSX 中的孩子

props.children:开始和结束标签之间的内容。 JavaScript 表达式作为子项

功能项目(道具){

{props.message}

; } function TodoList() { const todos u003d ["完成文档", "提交公关", "nag dan to review"];返回 (

{todos.map((消息) u003d> (

  ))}
</ul>

进入全屏模式退出全屏模式

);

}

作为孩子的功能

props.children与任何其他道具一样工作,这意味着它可以传递任何类型的数据。

// 调用子回调 numTimes 来产生一个重复的组件

功能重复(道具){

让项目 u003d [];

for (让 i u003d 0; i < props.numTimes; i++) {

items.push(props.children(i));

}

退换货品};

}

函数 ListOfTenThings() {

返回 (

{(index) u003d> 这是列表中的项目 {index}}

进入全屏模式退出全屏模式

);

}

忽略布尔值、空值和未定义值

false、null、undefined和true都是有效子代。
他们不会渲染。
您可以使用这些来有条件地渲染项目。

{showHeader && }

在此示例中,组件仅在showHeader评估为 True 时才会呈现。

// 在变通之前

{props.messages.length &&

}

// 解决后

{props.messages.length > 0 &&

}

请注意,某些虚假值(例如零)仍将由 React 呈现,您可以通过确保类似上述 eval 的情况来解决此问题。成布尔值。
在您希望呈现布尔值时,只需先将其转换为字符串即可。

我的 JavaScript 变量是 {String(myVariable)}。

对账

差异算法

Diffing:当组件的状态发生变化时,React 会创建一个新的虚拟 DOM 树。
不同类型的元素
每次根元素有不同的类型时,React 都会拆除旧树并从头开始构建新树。
个相同类型的DOM元素
在比较两个相同类型的 DOM 元素时,React 保持相同的底层 DOM 节点,只更新更改属性。
相同类型的组件元素
组件更新时,实例将保持不变,以便跨渲染保持状态。
React 只会更新道具,以匹配新元素。
对儿童递归
React 将迭代两个子列表并在有差异时生成一个突变。
这就是我们使用keys的原因。
使 React 更容易将原始树中的孩子与后续树中的孩子进行匹配。
权衡取舍
重要的是要记住协调算法是一个_实现细节_。
仅重新渲染以应用遵循前几节中所述规则的差异。

使用 PropTypes 进行类型检查

随着应用程序的增长,您可以使用 React 的typechecking来捕获错误。
propTypes是运行类型检查的特殊属性。
导出一系列内置验证器,以确保您收到的数据有效。
propTypes 仅在开发模式下检查。

从“prop-types”导入 PropTypes;

类问候扩展 React.Component {

使成为() {

你好,{this.props.name}

; } } Greeting.propTypes u003d { name: PropTypes.string, };

需要独生子女

使用PropTypes.element指定只能将单个子项作为子项传递给组件。

从“prop-types”导入 PropTypes;

类 MyComponent 扩展 React.Component {

使成为() {

// 这必须恰好是一个元素,否则会发出警告。

const children u003d this.props.children;

返回{孩子};

}

MyComponent.propTypes u003d {

孩子:PropTypes.element.isRequired,

};

默认道具值

使用defaultProps为 props 分配默认值。

类问候扩展 React.Component {

使成为() {

你好,{this.props.name}

; } } // 指定 props 的默认值: Greeting.defaultProps u003d { name: "Stranger", }; // 渲染 "Hello, Stranger": ReactDOM.render(, document.getElementById("example"));

类问候扩展 React.Component {

静态 defaultProps u003d {

名称:'陌生人'

}

使成为() {

返回 (

你好,{this.props.name}

)

}

备注

React路由器介绍

React Router是为不同页面渲染不同组件的答案。
一个前端库,允许您使用浏览器位置控制要显示的组件。
Client-side Routing开始使用路由
安装 React 路由器:
npm install — 保存 react-router-dom@5.1.2
从包中导入Browser Router。
从“react-router-dom”导入 { BrowserRouter };
BrowserRouter是封装路由层次结构的路由器的主要组件。
将其包裹在组件周围。
创建一个React Context,将路由信息向下传递到其所有后代组件。
您也可以使用HashRouter,它会在端点之前生成一个散列。创建前端路由
React Router 可帮助您的应用根据 URL 呈现特定组件。
最常见的组件是 ``
包裹在另一个组件周围,导致 comp.仅在匹配某个 URL 时才呈现。
Props:路径、组件、精确和 [render]
浏览器路由器只能有一个子组件。
浏览器路由器将所有路由包装在父 div 元素中。

常量根 u003d () u003d> {

常量用户 u003d {

1:{名称:“安德鲁”},

2:{名称:“雷蒙德”},

};

返回 (

<h1>嗨,我是 Root!</h1>

<h1>你好!</h1>} />
} />

进入全屏模式退出全屏模式

);

};

组件
表示要渲染的组件。
路径
表示渲染特定组件的路径。
准确
告诉路由不进行模式匹配,并且只将某个路由专门呈现给它的关联组件。
渲染
接收要调用的函数的可选属性。
导致 React 的额外工作。
首选用于简单功能组件的内联渲染。
component和render的区别在于组件返回的新 JSX 需要重新挂载,而 render 返回的 JSX 只会挂载一次。
// 这种内联渲染可以工作,但速度过慢。 <Route pathu003d"/hello" componentu003d{() u003d> <h1>Hello!</h1>} /> // 这是内联渲染的首选方式。 <Route pathu003d”/hello” renderu003d{() u003d> <h1>Hello!</h1>} />
如果您需要将特定道具传递给组件,这也很有用。
// `users`作为道具传递: const users u003d { 1: { name: “Andrew” }, 2: { name: “Raymond” }, }; <Route pathu003d”/users” renderu003d{() u003d> <Users usersu003d{users} />} />;

路由路径参数

您的组件的道具可以保存有关 URL 参数的信息。
将从:开始的段匹配到下一个/、?、#。

}

{...props}展开路由器的道具。
props.match.params用于访问匹配道具的参数。
match对象上的有用键:
isExact:布尔值,告诉您 URL 是否与路径完全匹配。
url:当前网址
path:匹配的路由路径(无通配符)
params:匹配单个通配符段。

Link有两个属性:to和onClick。
to:指向绝对路径的路由位置。
onClick:点击处理程序。
NavLink与Link一样工作,但有一些额外的功能。
当它链接到的路径与当前路径匹配时,添加额外的样式。
顾名思义,它用于导航栏。
需要三个道具:
activeClassName:允许您设置样式的 CSS 类名称。 (默认设置为“活动”)
activeStyle:当它是to属性时内联应用的样式对象。匹配当前 URL。
exactprop 是一个布尔值,默认为 false;您可以将其设置为 true 以应用精确 URL 匹配的要求。
精确也可以用作标志而不是 reg。适当的价值。
添加这个的好处是你不会触发其他匹配。在路线之间切换
``:组件允许你只渲染一个路由,即使有几个匹配当前的 URL。
您可以嵌套任意数量的路由,但只会呈现当前 URL 的第一个匹配项。
如果我们希望在没有任何路由匹配的情况下呈现默认组件,则非常有用。
DefaultComponent只有在没有其他 URL 匹配时才会呈现。
``:帮助重定向用户。
只需要一个道具:to。

(this.props.currentUser ? : )}

历史

History允许您以编程方式更新 URL。
包含两个有用的方法:
push:将新 URL 添加到历史堆栈的末尾。
replace:替换历史堆栈上的当前 URL,因此后退按钮不会带您到它。

// 推送一个新的 URL(并添加到历史堆栈的末尾):

const handleClick u003d () u003d> this.props.history.push("/some/url");

// 替换当前 URL(不会在历史堆栈中跟踪):

const redirect u003d () u003d> this.props.history.replace("/some/other/url");

嵌套路由

为什么要嵌套路由?

创建隧道到主要组件的路由,而不是在主页上呈现它自己的东西。什么是嵌套路由?

const Profile u003d (props) u003d> {

// 自定义调用数据库以通过用户 ID 获取用户。

常量用户 u003d fetchUser(props.match.params.userId);

常量 { 名称,id } u003d 用户;

返回 (

<h1>欢迎来到 {name} 的个人资料!</h1>
{name}的帖子
{name}的照片

进入全屏模式退出全屏模式

);

};

替代。使用props.match的版本

// Destructure `match` prop
const Profile = ({ match: { url, path, params }) =&gt; {
  // Custom call to database to fetch a user by a user ID.
  const user = fetchUser(params.userId);
  const { name, id } = user;
  return (

      <h1>Welcome to the profile of {name}!</h1>
      {name}'s Posts
      {name}'s Photos


    }
  );
};

进入全屏模式退出全屏模式

正如您在上面看到的,在我们应用这些灵活的值之前,我们的最终 URL 甚至都没有定义。

反应构建

Build:将代码转换为可以在目标平台上实际执行或运行的东西的过程。
关于 React,构建应该做的最低限度是将 JSX 转换为浏览器可以理解的东西。审查常用术语
Linting:使用工具分析代码以捕获常见错误、错误、不一致等的过程...
Transpilation:将源代码(如 JS)从一个版本转换为另一个版本的过程。
Minification:删除代码中所有不必要字符的过程。
Bundling:将多个代码文件合并到一个文件中的过程。
Tree Shaking:在捆绑之前从应用程序中删除未使用或死代码的过程。配置还是代码?
Configuration允许开发人员通过声明 JSON、XML 或 YAML 来创建构建任务,而无需显式编写流程中的每个步骤。
Coding或Scripting只需要代码。 Babel 和 webpack(是的,这是故意的小写 'w')
Babel:代码转换器,允许您使用所有最新功能和语法,而无需担心浏览器支持什么。
webpack:允许开发人员使用 JS 模块,而无需用户使用原生支持 ES 模块的浏览器。
Create React App 在后台使用 webpack 和 Babel 来构建应用程序。 Create React App 构建过程
运行npm start时会发生什么:

.env 变量被加载。
检查支持的浏览器列表。
配置的 HTTP 端口检查可用性。
应用编译器配置和创建。

5.webpack-dev-starter启动

6.webpack-dev-starter编译app。

7.index.html加载到浏览器

文件观察器开始观察变化。弹出

Create React App 中有一个名为eject的脚本,允许您“弹出”您的应用程序并公开所有隐藏的内容。准备为生产部署 React 应用程序
定义环境变量

REACT_APP_FOO:一些价值

REACT_APP_BAR:另一个值

console.log(process.env.REACT_APP_FOO);

可以像这样在 index.html 中引用:%REACT_APP_BAR%

配置支持的浏览器

{
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

进入全屏模式退出全屏模式

如果您指定较旧的浏览器,它将影响您的代码的转译方式。创建生产版本
运行npm run build以创建生产版本。
在生产模式下捆绑 React 并优化构建以获得最佳性能。

备注

React 简介

只是一个很好的库,可以将数据转换为 DOM。
Tree Diffing:通过比较当前的虚拟 DOM 和新的虚拟 DOM 来快速比较和修补数据 - 仅更新更改的部分。
It's just a tree with some fancy diffing

创建元素

从 JavaScript 到 DOM

React.createElement函数的形式如下:

React.createElement(type, [props], [...children]);

Type:要创建的元素类型,即 HTML 元素的字符串或对作为 React 组件的函数或类的引用。
Props:包含用于呈现元素的数据的对象。
Children:元素的子元素,任意数量。创建元素
我们的渲染目标:

*宠物

*业主

有五个标签要创建:
一个ul
两个li
两个a
我们还希望这些标签的某些属性出现在 DOM 中:
每个li都有一个class(或 React 中的className)
两个aele 都有href属性
还要记住标签之间发生的父子关系。
ul是两个li的父级
每个li都有一个a元素作为子元素
每个a都有一个text content孩子

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ZH8LBCT9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2A8ls0PmtREELbf5Wm)React.createElement(

"ul",

无效的,

反应.createElement(

“礼”,

{类名:“选择”},

React.createElement("a", { href: "/pets" }, "Pets")

反应.createElement(

“礼”,

无效的,

React.createElement("a", { href: "/owners" }, "Owners")

)

);

转换为虚拟 DOM

设置好React.createElement后,使用React.render将 cE 返回的值和一个 DOM 节点插入到真实 DOM 的转换中。

// 将元素树放入变量中

const navList u003d React.createElement(

"ul",

无效的,

反应.createElement(

“礼”,

{类名:“选择”},

React.createElement("a", { href: "/pets" }, "Pets")

反应.createElement(

“礼”,

无效的,

React.createElement("a", { href: "/owners" }, "Owners")

)

);

// 获取一个 DOM 节点,以便 React 渲染到

const mainElement u003d document.querySelector("main");

// 给 React 元素树和目标

ReactDOM.render(navList, mainElement);

JS 代码 u003d> 虚拟 DOM u003d> 真实 DOM 更新
如果您第二次或多次调用 React.render,它只会检查现有的虚拟 DOM,并且知道要更改哪些较小的区域。在组件中思考
组件是可重复使用的前端部件。
组件应符合单一职责原则。

创建元素

React.createElement Demo

可以用import 'package-link'导入非本地依赖

const App u003d () u003d> React.createElement("h1", null, "Hello, Programmers!");

const target u003d document.querySelector("main");

const app u003d React.createElement(App, null);

// 给 React 元素树和目标

ReactDOM.render(app, target);

请记住,从其他文件导入模块时,您必须在导入语句中指明文件类型。 HTML 原文

线索$268530

2009:我做了一个梦

<>

800 美元

进入全屏模式退出全屏模式

反应版本

const Clue = () =&gt;
  React.createElement(
    "section",
    { className: "clue" },
    React.createElement("h1", { className: "clue__title" }, "Title"),
    React.createElement("div", { className: "clue__question" }, "?"),
    React.createElement("div", { className: "clue__category" }, "Category"),
    React.createElement("div", { className: "clue__amount" }, "$800")
  );

进入全屏模式退出全屏模式

因为class是 JS 中的保留关键字,所以在 React 中我们可以使用className为元素分配一个类。
记住进入 createElement 的数据:元素类型、要传递给元素的数据,然后是子元素。
props:属性;
要处理某些最初未定义的值,我们可以使用defaultProps。

线索.defaultProps u003d {

类别: {},

};

您可以在 devTools 网络选项卡中更改互联网速度,以检查可能未定义以与 defaultProps 挂钩的值。
如果我们获取多条数据,我们可以使用map渲染很多东西。
您需要为每个线索分配一个唯一键。
我们需要单独跟踪它们,以便在出现问题时 React 可以轻松地参考特定的。clue => { key:clue.id, ...clue }

const App u003d (props) u003d>

反应.createElement(

"h1",

无效的,

props.clues.map((线索) u003d>

React.createElement(线索,{键:线索.id,...线索})

)

);

导出默认应用程序;

注意:JSX 优于 React.createElement;

Hello Programmer 练习笔记

当您从网站导入模块时,它们必须激活 COR。
这些导入语句,导入global variables。
当我们想将代码移入生产环境时,我们需要将导入更改为生产缩小版本。

导入“https://unpkg.com/react@16/umd/react.production.min.js”;

导入“https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js”;

虽然我们永远不会真正使用 React.createElement u003d> 创建完整的应用程序,但它是在引擎盖下运行的引擎!

导入“https://unpkg.com/react@16/umd/react.development.js”;

导入“https://unpkg.com/react-dom@16/umd/react-dom.development.js”;

常量链接 u003d () u003d>

反应.createElement(

"ul",

{ id: "导航链接" },

反应.createElement(

“礼”,

{ className: "被选中" },

React.createElement("a", { href: "http://appacademy.io" }, "App Academy")

反应.createElement(

“礼”,

无效的,

React.createElement("a", { href: "https://aaonline.io" }, "a/A 打开")

)

);

// 设置 React Element: Type, Imported Data, Child (Child 在这个场景中是 Text)

// HelloWorld 是一个基于函数的组件

const HelloWorld u003d () u003d> React.createElement("h1", null, "Hello, Programmers");

常量 AllTogether u003d () u003d>

反应.createElement(

“分区”,

无效的,

React.createElement(HelloWorld, null),

React.createElement(链接,空)

);

// 定位元素以追加新元素

const target u003d document.querySelector("main");

// 将您的“应用程序”分配给您创建的元素

// 我们正在从 HelloWorld 函数创建一个元素。

const app u003d React.createElement(AllTogether, null);

// 从 Virtual Dom 渲染到实际 Dom

ReactDOM.render(app, target);

JSX 简介

JSX:Javascript 扩展,一种由 React 开发人员创建的新语言,可以更轻松地与 React API 交互。如何使用 JSX
我们将使用babel将现代 JS 版本转换为旧版本 JS。反应创建元素

const ExampleComponent u003d (props) u003d>

反应.createElement(

反应片段,

无效的,

React.createElement("h1", null, "Hello!"),

React.createElement("img", { src: "https://via.placeholder.com/150" }),

React.createElement("a", { href: props.searchUrl }, props.searchText)

);

JSX 版本

const ExampleComponent = (props) =&gt; (

    <h1>Hello!</h1>
    <img src="https://via.placeholder.com/150">
    <a href="%7Bprops.searchUrl%7D">{props.searchText}</a>

);

进入全屏模式退出全屏模式

请记住,React 中的自关闭标签必须有一个forward slash才能关闭它。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--LgBRWf0z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ANNxuFMF-sOL8Wvdl)- 属性和数据

<img src="https://via.placeholder.com/150">;
// becomes..
React.createElement("img", { src: "https://via.placeholder.com/150" });
// if we want to pass in data vs just a string literal
<a href="%7Bprops.searchUrl%7D">{props.searchText}</a>;
// so it becomes..
React.createElement("a", { href: props.searchUrl }, props.searchText);
// if you want the text search uppercase..
<a href="%7Bprops.searchUrl%7D">{props.searchText.toUpperCase()}</a>;

进入全屏模式退出全屏模式

JSX 中的注释具有以下语法:

这是 JSX

{/* 这是 JSX 中的注释 */}

Property Names:
checked:复选框或radio等输入组件的属性,用来设置组件是否被勾选。
className:用于指定 CSS 类。
dangerouslySetInnerHTML:React 相当于 innerHTML,因为它存在跨站点脚本攻击的风险。
htmlFor:因为for是受保护的关键字,所以 React 元素使用它来代替。
onChange:每当更改表单字段时触发事件。
style:接受带有驼峰式属性的 JS 对象,而不是 CSS 字符串。
value:受 Input、Select 和 TextArea 组件支持;使用它来设置组件的值。
注意:React 使用驼峰式!!! JSX 分号陷阱

函数应用程序(){

返回 (

<h1>你好!</h1>
欢迎来到 JSX。

进入全屏模式退出全屏模式

);

}

创建等效元素

is equivalent to
function App() {
  return (
    React.createElement(
      'div',
      null,
      React.createElement('h1', null, 'Hello!'),
      React.createElement('div', null, 'Welcome to JSX.'),
    )
  );
}

进入全屏模式退出全屏模式

我们将想要返回的内容用括号括起来,这样 JS 就不会在每一行后自动添加分号并错误地运行代码。
请记住,如果您决定在函数中使用 return 关键字来“返回一些 JSX”,那么请确保将 JSX 包装在括号中。

npx create-react-app my-app

用于启动 React 应用程序的单行代码。
React 有一个很棒的工具链,你可以在编辑应用程序时实时看到更改。
React 错误将直接呈现到浏览器窗口上。
一个缺点是它会安装大量膨胀文件。
React 创建 Element 和 JSX 等效示例

反应.createElement(

“一个”,

{

类名:“活动”,

href: "https://appacademy.io",

“应用学院”

);

// JSX 版本

[

应用学院

](https://appacademy.io);

反应.createElement(

业主详情,

{

所有者:props.data.owner,

数字:props.index + 1,

道具名称

);

// JSX 版本

{props.name}

;

更复杂的 JSX 示例

const BookPanel = (props) =&gt; {

    <h1>{props.title}</h1>
    <img src="%7Bprops.coverUrl%7D">
    {props.description}
  ;
};

进入全屏模式退出全屏模式

备注

使用自定义 CRA 模板

使用自定义模板npx create-react-app my-app --template @appacademy/simple

请记住,使用create-react-app会自动为您初始化一个 git 存储库!
App Academy 自定义模板,用于创建 React 应用。
如果使用默认的反应创建项目,您可以删除以下文件:
favicon.ico
机器人.txt
logo192.png
logo512.png
清单.json
也可以将html文件简化为:

反应应用

进入全屏模式退出全屏模式

简化 src 文件夹

删除:App.css App.test.js logo.svg serviceWorker.js setupTests.js
更新以下文件:

// ./src/App.js

从“反应”导入反应;

函数应用程序(){

你好世界!

; } 导出默认应用程序; ``;

// ./src/index.js

从“反应”导入反应;

从“react-dom”导入 ReactDOM;

导入“./index.css”;

从“./App”导入应用程序;

ReactDOM.render(

document.getElementById("root")

);

React 类组件

类组件

您可以使用 ES2015 类编写 React 组件:函数组件

// ./src/Message.js

从“反应”导入反应;

const Message u003d (props) u003d> {

返回 {props.text};

};

导出默认消息;

ES2015 版本

// ./src/Message.js
import React from "react";
class Message extends React.Component {
  render() {
    return {this.props.text};
  }
}
export default Message;

进入全屏模式退出全屏模式

我们可以使用this.props访问class component中的道具
请记住,类组件的使用与函数组件一样。

// ./src/index.js

从“反应”导入反应;

从“react-dom”导入 ReactDOM;

从“./Message”导入消息;

ReactDOM.render(

document.getElementById("root")

);

设置和访问道具

class Message extends React.Component {
  constructor(props) {
    super(props);
    // TODO Initialize state, etc.
  }
  render() {
    return {this.props.text};
  }
}

进入全屏模式退出全屏模式

如果我们在类组件中定义构造方法,我们必须定义super方法并传递props。
旁注:在 React 使用 ES2015 类之前,它使用React.createclass函数,如果您需要使用这种过时的方法,请确保安装一个名为create-react-class有状态组件的模块
选择使用类组件而不是函数组件的主要原因之一是向组件添加和管理本地或内部状态。
第二个主要原因是能够使用类组件的生命周期方法。什么是状态?
Props 是组件的消费者或调用者提供的数据。
不应由组件更改。
状态是组件的internal数据。
旨在更新或变异。何时使用状态
仅在绝对必要时使用状态
如果数据永远不会改变,或者如果整个应用程序都需要它,请改用 props。
状态更常用于创建从 API 检索数据或呈现表单的组件。
一般经验法则:如果组件不需要使用状态或生命周期方法,则应优先使用function component。
功能:无状态 ||类:有状态的初始化状态
使用类构造方法初始化this.state对象。 // 应用程序入口点

// ./src/index.js

从“反应”导入反应

从 'react-dom' 导入 ReactDOM;

从 './RandomQuote' 导入 RandomQuote;

ReactDOM.render(

document.getElementById('root');

)

// 类组件:RandomQuote

import React from "react";
class RandomQuote extends React.Component {
  constructor() {
    super();
    const quotes = [
      "May the Force be with you.",
      "There's no place like home.",
      "I'm the king of the world!",
      "My mama always said life was like a box of chocolates.",
      "I'll be back.",
    ];
    this.state = {
      quotes,
      currentQuoteIndex: this.getRandomInt(quotes.length);
    }
  }
  getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }
  render() {
    return (

        <h2>Random Quote</h2>
        <p>{this.state.quotes[this.state.currentQuoteIndex]}</p>

    )
  }
}
export default RandomQuote;

进入全屏模式退出全屏模式

更新状态

假设我们想用新的报价更新我们的状态。
我们可以在 React 中设置事件侦听器,就像我们之前所做的那样。
<button typeu003d”button” onClicku003d{this.changeQuote}> 更改报价</button>
onClick是事件监听器。
{this.changeQuote}是事件处理方法。
我们的类组件文件现在应该看起来像这样,添加了新内容:

从“反应”导入反应;

类 RandomQuote 扩展 React.Component {

构造函数(){

极好的();

常量引号 u003d [

“愿原力与你同在。”,

“金窝银窝不如自己家里的狗窝。”,

“我是世界之王!”,

“我妈妈总是说生活就像一盒巧克力。”,

“我会回来的。”,

];

这个.state u003d {

引号,

currentQuoteIndex: this.getRandomInt(quotes.length);

}

更改报价 u003d () u003d> {

const newIndex u003d this.getRandomInt(this.state.quotes.length);

// 设置 currentQuoteIndex 状态属性的“新状态”

// 到新生成的随机索引 #.

这个.setState({

当前报价索引:新索引;

})

}

getRandomInt(max) {

返回 Math.floor(Math.random() * Math.floor(max));

}

使成为() {

返回 (

<h2>随机引用</h2>
<p>{this.state.quotes[this.state.currentQuoteIndex]}</p>

更改报价

)

进入全屏模式退出全屏模式

}

导出默认随机报价;

不要直接修改状态

重要的是never直接修改你的状态!
总是使用this.setState方法来更新状态。
这是因为当您仅使用 this.state 重新分配时,不会发生重新渲染 u003d> 使我们的组件不同步。从以前的状态正确更新状态
在我们当前的示例中,我们设置changeQuote的方式使我们偶尔会连续两次生成相同的索引。
一种解决方案是设计一个循环,但请记住,状态更新在 React 中是异步处理的(您当前的值不能保证是最新的)
一种安全的方法是将匿名方法传递给this.setState(而不是对象字面量)

更改报价 u003d () u003d> {

const newIndex u003d this.getRandomInt(this.state.quotes.length);

这个.setState({

当前报价索引:新索引;

})

}

通过匿名方法

changeQuote = () =&gt; {
  this.setState((state, props) =&gt; {
    const { quotes, currentQuoteIndex } = state;
    let newIndex = -1;
    do {
      newIndex = this.getRandomInt(quote.length);
    } while (newIndex === currentQuoteIndex);
    return {
      currentQuoteIndex: newIndex,
    };
  });
};

进入全屏模式退出全屏模式

为 props 提供默认值

在我们当前的示例中,我们在构造函数中传入了一个包含预定义引号的静态数组。
现在的设置方式使我们的报价列表在初始化后保持不变。
我们可以通过将静态数组替换为传递给super的props参数来使引号更加动态。
构造函数(道具){ 超级(道具); }
我们现在可以将引号数组移动到我们的应用程序入口点并将其作为道具传递。 // 应用程序入口点

// ./src/index.js

从“反应”导入反应

从 'react-dom' 导入 ReactDOM;

从 './RandomQuote' 导入 RandomQuote;

// 在此处重新分配我们的数组,并将其作为道具传入 Render。

常量引号 u003d [

“愿原力与你同在。”,

“金窝银窝不如自己家里的狗窝。”,

“我是世界之王!”,

“我妈妈总是说生活就像一盒巧克力。”,

“我会回来的。”,

"这样我可以定义更多的引号",

];

ReactDOM.render(

document.getElementById('root');

)

关于此解决方法需要注意的一点是,组件的调用者_必须_设置引号属性,否则组件将抛出错误 u003d> 所以使用defaultProps!

// 在 RandomQuote.js 的底部...

RandomQuote.defaultProps u003d {

引号: [

“愿原力与你同在。”,

“金窝银窝不如自己家里的狗窝。”,

“我是世界之王!”,

“我妈妈总是说生活就像一盒巧克力。”,

“我会回来的。”,

"这样我可以定义更多的引号",

};

一个良好的安全网,以防消费者/调用者没有为引号数组提供值。
我们现在甚至可以将它从我们的 index.js 中删除,并且不会抛出错误。

处理事件

要将事件侦听器添加到元素,只需定义一个方法来处理事件并将该方法与您正在侦听的元素事件相关联。例子

从“反应”导入反应;

类 AlertButton 扩展 React.Component {

显示警报 u003d () u003d> {

window.alert("按钮点击了!");

};

使成为() {

返回 (

提交

);

进入全屏模式退出全屏模式

}

请注意,在 onClick 中引用处理程序方法时,我们并没有调用 show Alert,只是传递了一个引用。防止默认行为
浏览器中的 HTML 元素通常有很多默认行为。
即单击<a>元素会导航到由 ``属性表示的资源。
这是一个使用e.preventDefault()可以派上用场的示例。

从“反应”导入反应;

类 NoDefaultSubmitForm 扩展 React.Component {

提交表单 u003d (e) u003d> {

e.preventDefault();

window.alert("正在处理表单提交...");

};

使成为() {

返回 (

提交
;
)}

进入全屏模式退出全屏模式

}

表单中包含的按钮将在完成this.submitForm方法之前最终刷新页面。
我们可以在实际方法中粘贴一个e.preventDefault()来解决这个问题。
e:引用Synthetic Event对象类型的参数。在事件处理程序中使用this

// ./src/AlertButton.js

从“反应”导入反应;

类 AlertButton 扩展 React.Component {

显示警报 u003d () u003d> {

window.alert("按钮被点击了!");

控制台.log(this);

};

使成为() {

返回 (

点击我

);

进入全屏模式退出全屏模式

}

导出默认警报按钮;

当我们控制台日志this时,我们会看到 AlertButton 对象。
如果我们使用常规类方法编写 showAlert 方法,例如:

显示警报(){

控制台.log(this);

}

我们会得到undefinedu003d> 记住胖箭头绑定到当前上下文!查看类方法和this关键字
让我们刷新一下绑定。

班级男朋友{

构造函数(){

蒂斯。舔u003d“Riruru”;

}

显示名称() {

控制台.log(this.name);

}

const Ming u003d new Boyfriend();

闵克。间谍舔();

const displayAgain u003d Ming.displayName;

再次显示(); // u003d> 导致类型错误:无法读取未定义的属性“名称”。

我们第一次使用我们的displayMethod调用,是直接在男朋友类的实例上调用的,这就是为什么会打印出Momato Riruru。
第二次调用时,方法的引用存储为变量,并在该变量而不是实例上调用方法;导致类型错误(它已经失去了它的上下文)
请记住,我们可以使用bind方法重新绑定上下文!
我们可以重构让第二个调用像这样工作:
const displayAgain u003d Ming.displayName.bind(Ming);再次显示(); // u003d> 现在将打印出 Momato Riruru。
要继续使用函数声明与胖箭头,我们可以在类组件的构造函数中分配上下文。

从“反应”导入反应;

类 AlertButton 扩展 React.Component {

构造函数(){

极好的();

this.showAlert u003d this.showAlert.bind(this); // 绑定上下文

}

显示警报(){

控制台.log(this);

}

使成为() {

返回 (

提交

);

进入全屏模式退出全屏模式

}

导出默认警报按钮;

Experimental Syntax:已提议添加到 ECMAScript 但尚未正式添加到语言规范的语法。
最好选择一种方法并始终如一地使用它,或者:

类属性和箭头函数
Bind Method 和 This KeywordSyntheticEvent对象

合成事件对象:跨浏览器环绕浏览器的本机事件。
包括使用 stopPropagation() 和 preventDefault();
合成事件对象的属性:Attributesboolean bubblesboolean cancelableDOMEventTarget currentTargetboolean defaultPreventednumber eventPhaseboolean isTrustedDOMEvent nativeEventvoid preventDefault()boolean isDefaultPrevented()void stopPropagation()boolean isPropagationStopped()void persist()DOMEventTarget targetnumber timeStampstring type
nativeEvent:在合成事件对象中定义的属性,可让您访问底层本机浏览器事件(很少使用!)

React 中的表单

_练习在一个单独的文件中完成_随机笔记

onChange:检测输入元素的值何时发生变化。
将onChange分配给我们的输入字段使我们的组件的状态在用户输入期间实时更新。
不要忘记在表单提交中添加preventDefault以处理浏览器刷新页面的默认行为!
submittedOn: new Date(),可以添加到表单中,很可能会保留到数据库中。
受控组件
我们在表单字段上使用onChange事件处理程序来保持我们组件的状态为"one source of truth"
向每个输入添加onChange事件处理程序可能会使您的代码大量膨胀。
尝试将其分配给它自己的方法以在任何地方应用。
textarea在 react 中的处理方式不同:它接受一个 value 属性来处理内部文本。

// ./src/ContactUs.js

从“反应”导入反应;

类 ContactUs 扩展 React.Component {

构造函数(){

极好的();

这个.state u003d {

姓名: ””,

电子邮件: ””,

电话: ””,

电话类型:“”,

注释: ””,

验证错误:[],

};

}

onChange u003d (e) u003d> {

常量 { 名称,值 } u003d e.target;

this.setState({ [name]: value });

};

// 用于验证输入的 Vanilla JS 函数

验证(姓名,电子邮件){

常量验证错误 u003d [];

如果(!名称){

validationErrors.push("请提供姓名");

}

如果(!电子邮件){

validationErrors.push("请提供邮箱");

}

返回验证错误;

}

onSubmit u003d (e) u003d> {

// 防止默认的表单行为

// 所以页面不会重新加载。

e.preventDefault();

// 从 state 中检索联系我们的信息。

const { 姓名、电子邮件、电话、电话类型、评论 } u003d this.state;

// 获取验证错误 - 从 this.state 继续解构值。

const validationErrors u003d this.validate(name, email);

// 如果我们有错误...

if (validationErrors.length > 0) {

this.setState({ 验证错误 });

} 别的 {

// 正常进行

// 为联系我们信息创建一个新对象。

常量contactUsInformation u003d {

姓名,

电子邮件,

电话,

电话类型,

注释,

提交日期:新日期(),

};

console.log(contactUsInformation);

// 重置表单状态。

这个.setState({

姓名: ””,

电子邮件: ””,

电话: ””,

电话类型:“”,

注释: ””,

验证错误:[],

});

}

};

使成为() {

const { 姓名、电子邮件、电话、phoneType、评论、validationErrors } u003d

这个.state;

返回 (

<h2>联系我们</h2>
{validationErrors.length > 0 && (

发现以下错误:
<ul>
{validationErrors.map((错误) u003d> (
<li>{错误}</li>
))}
</ul>

)}

姓名:

电子邮件:

电话:

选择电话类型...
{this.props.phoneTypes.map((phoneType) u003d> (
{电话类型}
))}

注释:

提交

);

进入全屏模式退出全屏模式

}

ContactUs.defaultProps u003d {

电话类型:[“家庭”、“工作”、“手机”]、

};

导出默认的 ContactUs;

我们可以使用像validate这样的验证库来使我们的验证功能更加复杂。

从“validator/es/lib/isEmail”导入 isEmail;

验证(姓名,电子邮件){

常量验证错误 u003d [];

如果(!名称){

validationErrors.push("请提供姓名");

}

如果(!电子邮件){

validationErrors.push("请提供邮箱");

} else if (!isEmail(email)) {

validationErrors.push("请提供有效的邮箱");

}

返回验证错误;

}

关于客户端与服务器端验证的注意事项

服务器端验证不是可选的。
精通技术的用户可以操纵客户端验证。
有时,“最佳方法”是跳过在客户端实现验证,完全依赖服务器端验证。

组件生命周期

[](https://res.cloudinary.com/practicaldev/image/fetch/s--akOXJt4o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2Ac24XQBvqBBg0Eztz)- 组件生命周期只是描述组件生命周期中关键时刻的一种方式。

1.加载(安装)

2.更新

3.卸载(Unmounting)一个React组件的生命周期

每个Class Component都有几个lifecycle methods,您可以添加它们以在特定时间运行代码。
componentDidMount:在您的组件添加到组件树后调用的方法。
componentDidUpdate:在组件更新后调用的方法。
componentWillUnmount:在您的组件从组件树中删除之前调用的方法。
Mounting

1.constructor方法被调用

2.render方法被调用

React 更新DOM

4.componentDidMount被调用

Updating
当组件收到新的props

1.render方法被调用

React 更新DOM

3.componentDidUpdate被调用

调用setState时

1.render方法被调用

React 更新DOM

3.componentDidUpdate被调用

Unmounting
从组件树中删除类组件之前的时刻:
componentDidMount将被调用。避免遗留的生命周期方法
偶尔会遇到一些不推荐使用的生命周期方法:
不安全_componentWillMount
不安全_componentWillReceiveProps
不安全_componentWillUpdate
只要知道它们很快就会从 React 的 API 中删除,和平。使用类组件生命周期方法 Exercise 在 sep 中完成。目录
什锦笔记:
componentDidMount生命周期方法的常见用途是从 API 获取数据。

—

备注

反应上下文

您可以使用React Context通过组件树传递数据,而无需手动线程化 props。
方便的共享和更新方式global data. 创建上下文

// PupContext.js

从“反应”导入 { createContext };

常量 PupContext u003d createContext();

导出默认 PupContext;

我们使用React.createContext来创建上下文。
请记住,如果您使用参数调用此方法,这些参数将被设置为默认上下文。向 App 组件添加 Provider
为了将上下文传递给子组件,我们需要将它们包装在提供程序组件中。
提供者组件接受一个值属性,该属性指向需要传递给子级的信息。

设置消费者

  {(value) =&gt; }

进入全屏模式退出全屏模式

请记住,Context.Consumer需要一个子函数。
函数有一个从Context.Provider传入的值 prop

备注

Redux 解释

用于管理 Web 应用程序前端状态的 JS 框架。
使我们能够在 Web 应用程序中以有组织的方式存储信息,并从应用程序的任何位置快速检索该信息。
Redux
客户端数据管理
控制“前端状态”
不是您的数据库
非组件状态
仅用于管理数据

[](https://res.cloudinary.com/practicaldev/image/fetch/s--vmZqVlvA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AN7KFfhOZZ7UrY8s4)- 没有 React 的应用程序如何管理其数据的可视化。

发生了很多道具线程。
数据存储在 sep 中。 location —global data. Redux 剖析
Store
持有前端状态
为前端状态提供 API
Action
个 POJO
前端状态的大纲更改
Reducers
功能
更改前端状态 Redux 是从哪里来的?
Redux 的三个核心理念:

1.A Single Source of Truth:状态存储在 POJO 中

2.State is Read Only:状态是不可变的,通过调度操作进行修改。

3.Changes are Made with Pure Functions:接收动作并返回更新状态的减速器是旧状态和动作的纯函数。什么时候适合使用 Redux?

当做一个全局状态要求更简单的项目时,选择 React 的 Context API 而不是 Redux 可能会更好。
Redux 为中间件提供了更大的灵活性和支持以及更丰富的开发人员工具。词汇
State
Redux 是状态管理器
状态是该程序在特定时间点存储的所有信息。
Redux 的主要工作是存储状态并将其直接提供给您的整个应用程序。
Store
Redux 在单个存储中存储状态。
Redux 存储是一个带有几个方法的单个 JS 对象(不是一个类!)
方法包括:getState、dispatch(action)、subscribe(listener)
Actions
Redux 存储通过调度操作更新
Action 只是一个 POJO,它包含一个强制性的type属性。
包含更新商店的信息。
我们调度操作以响应用户操作或 AJAX 请求。
Pure Functions
Redux Reducer 是纯函数 _
当函数的行为仅取决于它的参数且没有副作用时,它们是纯函数。
简单地接受一个参数并输出一个值。
Reducer
Redux 使用 reducers 处理操作
每次调度操作时调用的函数。
接收action和current state
要求是纯函数,因此它们的行为是可预测的。
Middleware
使用中间件自定义对调度操作的响应
中间件是 Redus 的一个可选组件,它允许对分派的操作进行自定义响应。
最常见的用途是将异步请求分派到服务器。
Time Traveling Dev Tools
Redux 可以时间旅行哇
时间旅行是指 Redux 能够恢复到以前的状态,因为 reducer 都是纯函数。
Thunks
在 Redux 中采取异步操作的方便格式
CS 中的一般概念是指一个函数,其主要目的是调用另一个函数。
最常用于发出异步 API 请求。

通量和还原

什么是通量?

前端应用架构。
构建应用程序的模式。
单向数据流 — 提供更高的可预测性。
Actions:开始数据的数据流,包含类型的简单对象; type 指示要执行的更改的类型。
Dispatcher:将操作分配给商店的机制。
Store:应用的整个状态,负责更新你的应用的状态。
View:负责呈现用户界面的代码单元。用于在发生操作和更改时重新呈现应用程序。

[](https://res.cloudinary.com/practicaldev/image/fetch/s---lNLd-vW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images -1.medium.com/max/800/0%2AywV6dO4a4QcGJxK5)- Redux

[](https://res.cloudinary.com/practicaldev/image/fetch/s--nsJxcNhn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ANd73GjTY1PVQtjtQ)- 有助于实现 Flux 的库。

Redux 三原则
Single Source of Truth
State is Read-Only
Only Pure Functions Change State

店铺

只是一个包含在 API 中的应用程序状态的对象。
Three methods:
getState():返回商店的当前状态。
dispatch(action):将一个动作传递给 store 的 reducer,告诉它要更新什么信息。
subscribe(callback):注册一个回调,以便在商店更新时触发。更新商店

store.dispatch(动作);

// 添加橙色动作

常量 addOrange u003d {

类型:“添加_FRUIT”,

水果:“橙色”,

};

// 橙色动作的减速器

const fruitReducer u003d (state u003d [], action) u003d> {

开关(动作类型){

案例“添加_FRUIT”:

返回 [...state, action.fruit];

默认:

返回状态;

}

};

// 运行调度

console.log(store.getState()); // []

store.dispatch(addOrange);

console.log(store.getState()); // [ '橙' ]

订阅商店

每当 store 处理 dispatch() 时,它都会触发其所有订阅者。
Subscribers:可以通过 subscribe() 添加到商店的回调。

常量显示 u003d () u003d> {

console.log(store.getState());

};

const unsubscribeDisplay u003d store.subscribe(display);

store.dispatch(addOrange); // [ '橙色', '橙色' ]

// 在 store.dispatch() 之后将不再调用 display

取消订阅显示();

store.dispatch(addOrange); // 没有输出

回顾一个简单的例子

// app.js
const { createStore } = require("redux");
// Define the store's reducer.
const fruitReducer = (state = [], action) =&gt; {
  switch (action.type) {
    case "ADD_FRUIT":
      return [...state, action.fruit];
    default:
      return state;
  }
};
// Create the store.
const store = createStore(fruitReducer);
// Define an 'ADD_FRUIT' action for adding an orange to the store.
const addOrange = {
  type: "ADD_FRUIT",
  fruit: "orange",
};
// Log to the console the store's state before and after
// dispatching the 'ADD_FRUIT' action.
console.log(store.getState()); // []
store.dispatch(addOrange);
console.log(store.getState()); // [ 'orange' ]
// Define and register a callback to listen for store updates
// and console log the store's state.
const display = () =&gt; {
  console.log(store.getState());
};
const unsubscribeDisplay = store.subscribe(display);
// Dispatch the 'ADD_FRUIT' action. This time the `display` callback
// will be called by the store when its state is updated.
store.dispatch(addOrange); // [ 'orange', 'orange' ]
// Unsubscribe the `display` callback to stop listening for store updates.
unsubscribeDisplay();
// Dispatch the 'ADD_FRUIT' action one more time
// to confirm that the `display` method won't be called
// when the store state is updated.
store.dispatch(addOrange); // no output

进入全屏模式退出全屏模式

减速机

Reducer 函数接收当前的state和action,根据action.type适当更新状态并返回以下状态。
您可以使用 switch/case 语句捆绑不同的操作类型和随后的逻辑。

const fruitReducer u003d (state u003d [], action) u003d> {

开关(动作类型){

案例“添加_FRUIT”:

返回 [...state, action.fruit];

案例“添加_FRUITS”:

返回 [...state, ...action.fruits];

案例“卖_水果”:

常量索引 u003d state.indexOf(action.fruit);

如果(索引!u003du003d -1){

// 删除 action.fruit 的第一个实例

返回 [...state.slice(0, index), ...state.slice(index + 1)];

}

返回状态; // 如果 action.fruit 不在状态,返回之前的状态

案例“卖出_OUT”:

返回 [];

默认:

返回状态;

}

};

回顾 Array#slice 的工作原理

const fruits = ["apple", "apple", "orange", "banana", "watermelon"];
// The index of the 'orange' element is 2.
const index = fruits.indexOf("orange");
// `...fruits.slice(0, index)` returns the array ['apple', 'apple']
// `...fruits.slice(index + 1)` returns the array ['banana', 'watermelon']
// The spread syntax combines the two array slices into the array
// ['apple', 'apple', 'banana', 'watermelon']
const newFruits = [...fruits.slice(0, index), ...fruits.slice(index + 1)];

进入全屏模式退出全屏模式

可用于在不改变原始数组的情况下删除元素的方法。避免状态突变
如果状态发生变化,您的减速器必须始终返回一个新对象。好的

const goodReducer u003d (state u003d { count: 0 }, action) u003d> {

开关(动作类型){

案例“INCREMENT_COUNTER”:

const nextState u003d Object.assign({}, state);

nextState.count++;

返回下一个状态;

默认:

返回状态;

}

};

坏的

const badReducer = (state = { count: 0 }, action) =&gt; {
  switch (action.type) {
    case "INCREMENT_COUNTER":
      state.count++;
      return state;
    default:
      return state;
  }
};

进入全屏模式退出全屏模式

行动

操作是触发商店状态更改的唯一方法。使用动作创建者

常量 addOrange u003d {

类型:“添加_FRUIT”,

水果:“橙色”,

};

store.dispatch(addOrange);

console.log(store.getState()); // [ '橙' ]

水果是payload key,橙子是state data
Action Creators:通过推断操作对象的创建而创建的函数。

常量 addFruit u003d (水果) u003d> ({

类型:“添加_FRUIT”,

水果,

});

对隐式返回值使用括号。
我们现在可以添加我们想要的任何水果。

store.dispatch(addFruit("apple"));

store.dispatch(addFruit("草莓"));

store.dispatch(addFruit("荔枝"));

console.log(store.getState()); // [ '橙子', '苹果', '草莓', '荔枝' ]

防止动作类型字符串文字中的拼写错误

const ADD_FRUIT = "ADD_FRUIT";
const ADD_FRUITS = "ADD_FRUITS";
const SELL_FRUIT = "SELL_FRUIT";
const SELL_OUT = "SELL_OUT";
const addFruit = (fruit) =&gt; ({
  type: ADD_FRUIT,
  fruit,
});
const addFruits = (fruits) =&gt; ({
  type: ADD_FRUITS,
  fruits,
});
const sellFruit = (fruit) =&gt; ({
  type: SELL_FRUIT,
  fruit,
});
const sellOut = () =&gt; ({
  type: SELL_OUT,
});

进入全屏模式退出全屏模式

使用常量变量有助于减少 reducer 的 case 子句中的简单拼写错误。

调试箭头函数

学习如何使用带有箭头函数的调试器语句来有效地调试 Redux 循环非常重要。了解隐式返回值的局限性

常量 addFruit u003d (水果) u003d> {

返回 {

类型:“添加_FRUIT”,

水果,

};

常量 addFruit u003d (水果) u003d> {

调试器;

返回 {

类型:“添加_FRUIT”,

水果,

};

必须使用显式返回语句箭头函数才能使用调试器。

React路由器介绍

既然您知道如何在 React 应用程序中渲染组件,那么您如何处理为不同的网站页面渲染不同的组件呢?反应路由器就是答案!

想想你是如何在 Express 中创建服务器端路由的。采用以下 URL 和服务器端路由。请注意/users/:userId路径如何与http://localhost:3000/users/2URL 对应以呈现特定的 HTML 页面。

// http://localhost:3000/users/2
app.get('/users/:userId', (req, res) =&gt; {
  res.render('userProfile.pug');
});

进入全屏模式退出全屏模式

在默认的 React 设置中,您将失去以与 Express 相同的方式创建路由的能力。这就是 React Router 旨在解决的问题!

React Router是一个前端路由库,允许您使用浏览器位置控制要显示的组件。用户还可以复制和粘贴 URL 并将其通过电子邮件发送给朋友或从他们自己的网站链接到它。

完成本文后,您应该能够使用react-router-dom库中的以下内容:

`为您的应用程序提供对react-router-dom`库的访问权限;和
``将特定的 URL 路径连接到要渲染的特定组件;和
`包装几个Route`元素,即使有几个匹配当前URL也只渲染一个;和
React Router 的match属性来访问路由路径参数。

开始使用路由

由于您正在编写单页应用程序,因此您不希望每次更改浏览器位置时都刷新页面。相反,您想使用 JavaScript 更新浏览器位置和应用程序的响应。这称为客户端路由。您正在使用 React,因此您将使用 React Router 来执行此操作。

创建一个简单的反应项目模板:

npx create-react-app my-app --template @appacademy/simple

进入全屏模式退出全屏模式

然后安装反应路由器:

npm install --save react-router-dom@^5.1.2

进入全屏模式退出全屏模式

现在从入口文件中的react-router-dom导入BrowserRouter:

import { BrowserRouter } from 'react-router-dom`;

进入全屏模式退出全屏模式

浏览器路由器

BrowserRouter是包装路由层次结构的路由器的主要组件。它创建了一个 React 上下文,将路由信息向下传递到它的所有后代组件。例如,如果您想像这样给出and all its children components access to React Router, you would wrap:

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const Root = () =&gt; {
  return (



  );
};

ReactDOM.render(


  ,
  document.getElementById('root'),
);

进入全屏模式退出全屏模式

现在您可以将某些组件的渲染路由到某些 URL(即https://www.website.com/profile)。

哈希路由器

或者,您可以从react-router-dom导入和使用HashRouter。使用 `的应用程序的链接看起来像 103058 https://www.website.com/#/profile`](https://www.website.com/#/profile%60)(域和路径之间有#)。

您将专注于使用 ``。

创建前端路由

React Router 可帮助您的 React 应用程序根据 URL 呈现特定组件。你最常使用的 React Router 组件是 ``。

component is used to wrap another component, causing that component to only be rendered if a certain URL is matched. The behavior of the组件由以下 props 控制:path、component、exact和render(可选)。

创建一个返回<h1>This is the users index!</h1>的简单Users组件。现在让我们重构您的index.js文件,以便您可以在组件内创建路由:

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';
import Users from './Users';

const Root = () =&gt; {
  return (


        {/* TODO: Routes */}


  );
};

ReactDOM.render(


  ,
  document.getElementById('root'),
);

进入全屏模式退出全屏模式

请注意,BrowserRouter只能有一个子组件,因此上面的代码片段将父级中的所有路由包装为 ``元素。现在让我们创建一些路线!

组件

从component道具开始。这个 prop 引用要渲染的组件。让我们渲染您的App组件:

const Root = () =&gt; {
  return (





  );
};

进入全屏模式退出全屏模式

现在您需要将路径连接到组件!

路径

只有当路径匹配时,才会渲染被包装的组件。当路径与 URL 的某些初始部分匹配时,该路径与 URL 匹配。例如,路径/将匹配以下两个 URL:/和/users。(因为/users以/开头,它匹配路径/)

花点时间导航到http://localhost:3000/users,看看App组件和Users组件是如何呈现的。

准确

如果设置了这个exact标志,那么只有在与 URL 完全匹配时,路径才会匹配。然后浏览到/users路径将不再匹配/,并且只会呈现Users组件(而不是App组件和Users组件)。

渲染

这是一个可选的 prop,它接收要调用的函数。当路径匹配时将调用该函数。函数的返回值被渲染。你也可以在component属性中定义一个功能组件,但这会导致 React 额外的、不必要的工作。render属性更适合于简单功能组件的内联渲染。

使用component和render之间的区别在于component会在每次路由渲染时返回要重新安装的新 JSX,而render只是返回将安装一次并重新渲染的 JSX。对于任何给定的路线,您应该只使用component道具或render道具。如果两者都提供,则仅使用component属性。

// This inline rendering will work, but is unnecessarily slow.
 <h1>Hello!</h1>} /&gt;

// This is the preferred way for inline rendering.
 <h1>Hello!</h1>} /&gt;

进入全屏模式退出全屏模式

当您需要将道具传递到渲染组件时,在 `中使用render而不是component会很有帮助。例如,假设您需要将users对象作为道具传递给您的Users组件。然后你可以通过像这样返回Users`组件来传递从Root到Users的道具:

// `users` to be passed as a prop:
const users = {
  1: { name: 'Andrew' },
  2: { name: 'Raymond' }
};

 } /&gt;

进入全屏模式退出全屏模式

提醒一下,BrowserRouter只能有一个子组件。这就是为什么您将所有路由都包装在父级 ``元素中的原因。

const Root = () =&gt; {
  const users = {
    1: { name: 'Andrew' },
    2: { name: 'Raymond' }
  };

  return (


        <h1>Hi, I'm Root!</h1>

         <h1>Hello!</h1>} /&gt;
         } /&gt;


  );
};

进入全屏模式退出全屏模式

使用这个Root组件,无论路径如何,您都将始终渲染<h1>Hi, I'm Root!</h1>。由于第一个,如果路径与`/`完全匹配,您将仅渲染`App`组件。由于第二个,如果路径匹配/users,您将仅渲染Users组件。

路由路径参数

组件的 props 还可以保存有关 URL 参数的信息。路由器将匹配从:到下一个/、?或#的路由段。然后,这些匹配的值通过它们的 props 传递给组件。这些段是构成您的路线参数的_wildcard_值。

例如,采取以下路线:

 } /&gt;

进入全屏模式退出全屏模式

路由器会将完整的/users/:userId/photos路径分解为两部分:/users、:userId。

Profile组件的 props 可以通过带有路由器参数信息的props访问http://localhost:3000/users/:userId/photosURL 的:userId部分。您将访问match道具的参数 (props.match.params)。如果您使用Route组件的render道具,如果您希望它知道“匹配”参数,请确保将道具传播回组件。

// Route's `render` prop allows you to pass the `users`
// prop and spread the router `props`.
render={(props) =&gt; }

进入全屏模式退出全屏模式

然后params对象将具有userId的属性,该属性将保存:userIdwildcard 值的值。让我们在用户配置文件组件中呈现userId参数。花点时间使用以下代码创建一个Profile.js文件:

// ./src/Profile.js
import React from "react";

const Profile = (props) =&gt; (

    The user's id is {props.match.params.userId}.

);

export default Profile;

进入全屏模式退出全屏模式

请注意它如何使用match属性从 URL 访问:userId参数。您可以使用此通配符进行 AJAX 调用以从数据库中获取用户信息并在Profile组件中呈现返回数据。回想一下,您的Profile组件是在路径/users/:userId处呈现的。因此,您可以使用match.params中的userId参数来获取特定用户:

// ./src/Profile.js
import React from "react";

const Profile = ({ users, match: { params } }) =&gt; {

  // In a real-world scenario, you'd make a call to an API to fetch the user,
  // instead of passing down and keying into a `users` prop.
  const user = users[params.userId];

  return (

      The user's id is {params.userId} and the user's name is {user.name}.

  );
};

export default Profile;

进入全屏模式退出全屏模式

匹配

现在你已经看到你的 React Router 的match道具在起作用,让我们来看看更多关于路由道具! React Router 将信息作为 route props 传递给组件,所有可以访问 React Router 的组件都可以访问。它提供的三个道具是location、match和history。您已经了解了props.match.params,但现在让我们回顾一下match道具的其他属性!

这是一个包含有关当前 URL 如何匹配路由路径的重要信息的对象。以下是match对象上一些更有用的键:

isExact:一个布尔值,告诉您 URL 是否与路径完全匹配
url:当前网址
path:匹配的路由路径(未填写通配符)
params:单个通配符段的匹配项,嵌套在其名称下

当您使用 React Router 时,浏览器location和history是您应用程序状态的一部分。您可以在浏览器位置存储有关应显示哪个组件、您当前正在查看的用户配置文件或任何其他状态的信息。然后,您可以从您的应用程序中传递路由器道具的任何位置访问该信息。

现在您已经了解了参数和路由道具,让我们重新审视您的Root组件,为您的/users路由添加一个exact标志,这样它就不会与您的/users/:userId路由一起渲染。您的组件应如下所示:

const Root = () =&gt; {
  const users = {
    1: { name: 'Andrew' },
    2: { name: 'Raymond' }
  };

  return (

      <h1>Hi, I'm Root!</h1>


         <h1>Hello!</h1>} /&gt;

        {/* Render the `Users` page if no ID is included. */}
         } /&gt;

        {/* Otherwise, render the profile page for that userId. */}
         } /&gt;


  );
};

进入全屏模式退出全屏模式

你学到了什么

在本文中,您学习了如何:

使用 React Router 库中的组件;和
创建路由来渲染特定组件;和
管理渲染路线的顺序;和
使用exact标志确保特定路径渲染特定组件;和
使用 React Routermatch属性访问路由器参数。

React 路由器导航

既然您知道如何使用 React Router 创建前端路由,那么您需要实现一种让用户导航路由的方法!这就是使用 React Router 的Link、NavLink、Redirect和history属性可以帮助你做的事情。

在本文中,您将使用在 React Router Intro 阅读中构建的演示项目。完成本文后,您应该能够使用react-router-dom库中的以下组件:

or在应用程序中创建具有绝对路径的链接(如“/users/1”);和,
``将用户重定向到另一个路径(即用户未登录时的登录页面);和
React Router 的history属性以编程方式更新浏览器的 URL。

添加导航链接

React Router 的is one way to simplify navigation around your app. It issues an on-click navigation event to a route defined in your app's router. Using使用正确设置的href属性呈现锚标记。

链接

要使用它,请将react-router-dom包中的导入更新为包含Link:

import { BrowserRouter, Route, Link } from 'react-router-dom';

进入全屏模式退出全屏模式

注意 `可以带两个 props:to和onClick`。

to属性是指向绝对路径(即/users)的路径位置描述。在路由上方的index.js文件中添加以下Link组件:

App
Users
Andrew's Profile

进入全屏模式退出全屏模式

onClick属性就像任何其他 JSX 点击处理程序一样。您可以编写一个接收event并处理它的函数。在路由之前添加以下Link并在Root组件中添加以下点击处理函数:

// Link with onClick prop
App with click handler

// Click handler function
const handleClick = () =&gt; {
  console.log('Thanks for clicking!')
};

进入全屏模式退出全屏模式

现在,测试您的路线和链接!如果您检查页面,您会看到您的链接现在呈现为<a>个元素。请注意,单击App with click handler链接会在控制台中记录一条消息,同时指示浏览器呈现App组件。

导航链接

works just like a,但有一点额外的功能。当它链接到的路径与当前路径匹配时,它能够添加额外的样式。这使它成为导航栏的理想选择,因此得名。这种样式可以由三个额外的属性控制:activeClassName、activeStyle和exact。要开始使用NavLink,请从react-router-dom包更新您的导入:

import { BrowserRouter, Route, NavLink } from 'react-router-dom';

进入全屏模式退出全屏模式

NavLink组件的activeClassName属性允许您设置 CSS 类名称,以便在其路由处于活动状态时设置NavLink的样式。默认情况下,activeClassName已设置为active。这意味着您只需在 CSS 文件中添加一个.active类即可为链接添加活动样式。如果to道具路径与当前 URL 匹配,则NavLink将处于活动状态。

让我们将您的“用户”、“你好”和“安德鲁的个人资料”链接更改为不同的颜色,并在活动时具有更大的字体大小。

App
Users
Hello
Andrew's Profile
App with click handler

进入全屏模式退出全屏模式

例如,当浏览器导航到/路径或/users路径时,呈现的 HTML<a>标记如下所示:

</a><a href="/">App</a>


<a href="/">App</a>


<a href="/users">Users</a>


<a href="/users">Users</a>

进入全屏模式退出全屏模式

将NavLink导入到index.js文件中,并花一点时间将所有Link元素更新为NavLink元素。将activeClassName属性设置为active类。将以下.active类添加到您的index.css文件中:

.active {
  font-weight: bold;
}

.red {
  color: red;
  font-size: 30px;
}

.blue {
  color: blue;
  font-size: 30px;
}

.green {
  color: green;
  font-size: 30px;
}

进入全屏模式退出全屏模式

测试您的样式链接!请注意App和App with click handler链接始终是粗体的。这是因为您的所有链接都包含/路径,这意味着当浏览到/users和/users/1时,指向/的链接将处于活动状态,因为users和users/1都以/开头。

activeStyle属性是一个样式对象,当其to属性与当前 URL 匹配时,它将内联应用于NavLink。将以下activeStyle添加到您的App链接并注释掉 CSS 文件中的.active类。

App

进入全屏模式退出全屏模式

在/路径下呈现以下 html:

<a href="/">App</a>

进入全屏模式退出全屏模式

请注意您的App with click handler不再加粗。这是因为正在应用的默认active类没有为该类设置任何 CSS 样式。在您的 CSS 文件中取消注释您的.active类,以使此 NavLink 恢复为粗体。

exact属性是一个布尔值,默认为false。如果设置为true,则仅当当前 URL 与to属性完全匹配时,才会应用activeStyle和activeClassName属性。使用exact道具组更新您的App和App with click handler链接。就像在您的路线中一样,您可以使用exact标志而不是exact={true}。

App
App with click handler

进入全屏模式退出全屏模式

现在,您的App和App with click handler链接只有在您精确导航到/路径时才会加粗。

路由切换

当/users和/users/1路径与/路径匹配时,您遇到了样式问题。路由也可能有这个问题。这就是为什么您需要控制路由之间的切换。

React Router 的component allows you to only render one即使有几个与当前 URL 匹配。您可以在开始和结束Switch标记之间嵌套任意数量的Route,但只会呈现与当前 URL 匹配的第一个。

如果您想要一个仅在我们的其他路由都不匹配时才呈现的默认组件,这将特别有用。查看下面的示例。如果没有 Switch,DefaultComponent将始终呈现。由于DefaultComponent路由中没有设置路径,所以它只会使用默认路径/。现在DefaultComponent只会在前面的路由都不匹配时渲染。

从react-router-dom导入Switch并在您的路线周围添加 `标签,以处理您的路线之间的排序和切换!首先将以下路由添加到路由底部以呈现该 a404: Page not found`消息:

 <h1>404: Page not found</h1>} /&gt;

进入全屏模式退出全屏模式

这就是您的Root组件此时的样子:

const Root = () =&gt; {
  const users = [
    { name: 'andrew' },
    { name: 'raymond' }
  ];

  const handleClick = () =&gt; {
    console.log('Thanks for clicking!')
  };

  return (

      <h1>Hi, I'm Root!</h1>


        App
        Users
        Hello
        Andrew's Profile
        App with click handler


           } /&gt;
           } /&gt;
           <h1>Hello!</h1>} /&gt;

           <h1>404: Page not found</h1>} /&gt;



  );
};

进入全屏模式退出全屏模式

现在您可以控制渲染组件的优先级了!尝试导航到http://localhost:3000/asdf或您尚未定义的任何其他路线。每当浏览器尝试访问未定义的路由时,都会呈现最后一个 ``的<h1>404: Page not found</h1>JSX。

重定向用户

但是,如果您想在用户未登录时将其重定向到登录页面怎么办? React Router 的 ``组件可帮助您重定向用户!

该组件只需要一个 prop:to。当它渲染时,它会将当前 URL 替换为其toprop 的值。通常,您有条件地呈现以将用户重定向到您不希望他们访问的某些页面。下面的示例检查是否存在已定义的`currentUser`属性。如果是这样,则将渲染Home组件。否则,它将用户重定向到/login路径。

 (this.props.currentUser ?  : )}
/&gt;

进入全屏模式退出全屏模式

注意:你将学习如何使用更灵活的身份验证模式 — 不要直接模仿这个例子。

历史

您知道如何使用 `组件重定向用户,但是如果您需要以编程方式重定向用户怎么办?你已经了解了 React Router 的matchprops,但现在让我们来看看另一个 <a hrefu003d"https://reacttraining.com/react-router/web/api/Route/route-props">route props </a>:history`!

// Pushing a new URL (and adding to the end of history stack):
const handleClick = () =&gt; this.props.history.push('/some/url');

// Replacing the current URL (won't be tracked in history stack):
const redirect = () =&gt; this.props.history.replace('/some/other/url');

进入全屏模式退出全屏模式

此道具允许您以编程方式更新 URL。例如,假设您想在用户单击按钮时推送一个新 URL。它有两个有用的方法:

push- 这会将新 URL 添加到历史堆栈的末尾。这意味着单击后退按钮会将浏览器带到上一个 URL。注意,连续多次推送同一个 URL 是没有效果的; URL 仍然只会在堆栈中显示一次。在开发模式下,连续两次推送相同的 URL 将生成控制台警告。此警告在生产模式下被禁用。
replace- 这将替换历史堆栈上的当前 URL,因此后退按钮不会将您带到它。例如:

你学到了什么

在本文中,您学习了如何:

为您的路线路径创建导航链接;和
通过使用``组件重定向用户;和
使用 React Router 的history属性以编程方式更新浏览器的 URL。

React Router 嵌套路由

现在您知道如何使用 React Router 创建前端路由和添加导航。初始化 Express 项目时,您声明静态路由。静态路由是在应用程序初始化时声明的路由。在应用程序的初始化中使用 React Router 时,您可以声明动态路由。 React Router 引入了动态路由,您的路由是在应用程序渲染时创建的。这允许您在组件内创建嵌套路由!

在本文中,让我们深入了解嵌套路由!完成文章后,您应该:

描述什么是嵌套路由;和
能够使用 React Router 创建和导航嵌套路由;和
知道如何使用 React Routermatchprop 来生成链接和路由。

为什么要嵌套路由?

让我们从您可能需要嵌套路由的原因开始。正如您所记得的,您正在使用 React 创建一个单页应用程序。这意味着您将把应用程序组织成不同的组件和子组件。

例如,想象创建一个简单的前端应用程序,它包含三个主要页面:主页欢迎页面(路径为/)、用户索引页面(路径为/users)和用户配置文件页面(路径为/users/:userId)。现在想象一下,如果每个用户都有单独的posts和photos页面的链接。

您可以在用户配置文件组件中创建这些路由和链接,而不是在定义主要路由的位置创建路由和链接。

什么是嵌套路由?

现在让我们深入了解用户配置文件组件以了解什么是嵌套路由!想象一下,您在应用程序的入口文件中有一条到每个用户配置文件的路由,如下所示:

这意味着在导航到http://localhost:3000/users/1时,您将呈现以下Profile组件,并且props.match.params中的userId参数将具有"1"的值。

const Profile = (props) =&gt; {
  // Custom call to database to fetch a user by a user ID.
  const user = fetchUser(props.match.params.userId);
  const { name, id } = user;

  return (

      <h1>Welcome to the profile of {name}!</h1>

      {/* Links to a specific user's posts and photos */}
      {name}'s Posts
      {name}'s Photos

      {/* Routes to a specific user's posts and photos */}



  );
};

进入全屏模式退出全屏模式

由于在渲染Profile组件之前不会创建此路由,因此您正在动态创建嵌套的/users/:userId/posts和/users/:userId/photos路由。请记住,您的match道具还有其他有用的属性。您可以在个人资料链接中使用match.url而不是/users/${id}。您还可以在个人资料路线中使用match.path而不是/users/:userId。请记住,您可以从match道具中解构url、path和params!

// Destructure `match` prop
const Profile = ({ match: { url, path, params }) =&gt; {

  // Custom call to database to fetch a user by a user ID.
  const user = fetchUser(params.userId);
  const { name, id } = user;

  return (

      <h1>Welcome to the profile of {name}!</h1>

      {/* Replaced `/users/${id}` URL with `props.match.url` */}
      {name}'s Posts
      {name}'s Photos

      {/* Replaced `/users/:userId` path with `props.match.path` */}


    }
  );
};

进入全屏模式退出全屏模式

在明天的项目中,您将构建彩虹般的路线并定义嵌套路线。将来,您可能会选择实现嵌套路由,以使您的应用程序的路由在相关组件中井井有条。

你学到了什么

在本文中,您了解到:

什么是嵌套路由;和
关于使用 React Router 创建和导航嵌套路由;和
如何使用 React Router 道具生成嵌套链接和路由。

反应构建

“构建”是将代码转换为可以在目标平台上实际执行或运行的东西的过程。 “前端构建”是为浏览器准备前端或客户端应用程序的过程。

对于 React 应用程序,这意味着(至少)将 JSX 转换为浏览器可以真正理解的东西。使用 Create React App 时,构建过程会自动配置为执行此操作以及执行更多操作。

完成本文后,您应该能够:

描述什么是前端构建以及为什么需要它们;
高层次描述运行npm start时 Create React App 中发生的情况;和
准备将 React 应用程序部署到生产环境中。

了解前端构建

对前端构建的需求早于 React。多年来,开发人员发现扩展他们可以使用的 JavaScript 和 CSS 的最低公分母版本很有帮助。

有时,开发人员使用TypeScript或Sass之类的东西扩展 JavaScript 和 CSS。使用这些非标准语言和语法要求您使用构建过程将代码转换为可以在浏览器中实际运行的标准 JavaScript 和 CSS。

基于浏览器的应用程序还需要进行大量优化才能为最终用户提供最好的或至少可接受的体验。前端构建过程可以配置为 lint 代码、运行单元测试、优化图像、缩小和捆绑代码等等 — 所有这些都可以在按下按钮时自动完成(即在终端上运行命令)。

JavaScript 版本和前端构建的增长

开发人员通常是不耐烦的。当向 JavaScript 添加新功能时,我们不希望等待浏览器广泛支持这些功能,然后才开始在代码中使用它们。而且我们_真的_不喜欢我们必须支持旧版本的浏览器。

近年来,JavaScript 每年更新一次,浏览器供应商在更新浏览器方面做得不错,以支持语言中添加的新功能。不过几年前,JavaScript 的 5 和 6 版本之间存在着臭名昭著的延迟。在 ES6(或最终重命名为 ES2015)正式完成之前花了_年_,在浏览器支持其所有功能之前甚至更长时间。

在 ES2015 被浏览器广泛支持之前的一段时间内,开发人员使用前端构建将 ES2015 功能和语法转换或转换为浏览器更广泛支持的旧版本语言(通常是 ES5)。从 ES2015/ES6 到 ES5 的转换是开发人员将前端构建添加到其客户端项目的主要驱动力之一。

复习常用术语

在学习前端或 React 构建时,您会遇到很多您可能熟悉或不熟悉的术语。以下是您可能会遇到的一些术语:

Linting 是使用工具分析代码以捕获常见编程错误、错误、风格不一致和可疑编码模式的过程。ESLint是一种流行的 JavaScript linting 工具。

转译是将源代码(如 JavaScript)从一个版本转换为另一个版本的过程。 Usually this means converting newer versions of JavaScript, ES2019 or ES2021, to a version that's more widely supported by browsers, like ES2015, or even ES5 or ES3 (if you need支持您父母或祖父母使用的浏览器)。

缩小是删除代码中所有不必要的字符(例如空格字符、换行符、注释)以生成整体更小的文件的过程。缩小工具通常还会重命名代码中的标识符(即参数和变量名称),以寻求越来越小的文件大小。还可以生成源映射以允许调试工具在缩小代码和原始源代码之间进行交叉引用。

捆绑是将多个代码文件组合成一个文件的过程。创建一个捆绑包(或几个捆绑包)可以减少客户端需要向服务器发出的请求数量。

摇树是在捆绑之前从应用程序中删除未使用(或死)代码的过程。 Tree Shaking 外部依赖项有时会对捆绑文件的整体大小产生巨大的积极影响。

配置或代码?

这些年来前端构建工具来来去去。有时很快,这导致了被称为JavaScript 疲劳的现象。

基于配置的工具允许您通过声明(通常使用 JSON、XML 或 YAML)您想要完成的任务来创建构建任务,而无需明确编写流程中的每个步骤。相比之下,基于编码或脚本的工具允许您编写代码来创建构建任务。基于配置的工具_can_有时感觉更易于使用,同时放弃了一些控制(至少最初是这样),而基于编码的工具_can_感觉更熟悉和可预测(因为您是在程序上描述任务)。不过,每一个概括都是错误的(包括这个),所以有很多例外。

Grunt是一个基于 JSON 配置的任务运行器,可用于编排构成前端构建的各种任务。 Grunt 很快被Gulp取代,它允许开发人员编写 JavaScript 来定义前端构建任务。在 Gulp 之后,前端工具环境变得更加混乱。一些开发人员更喜欢使用npm scripts来定义构建任务的简单性,而另一些开发人员更喜欢基于配置的捆绑程序的强大功能,例如webpack。

Babel 和 webpack(是的,这是故意使用小写的“w”)

随着前端或客户端应用程序的复杂性增加,开发人员发现自己想要利用更高级的 JavaScript 功能和更新的语法,如类、箭头函数、解构、异步/等待等。使用代码转译器,如Babel, 允许您使用所有最新和最强大的功能和语法,而不必担心哪些浏览器支持什么。

模块加载器和捆绑器,如webpack,也允许开发人员使用 JavaScript 模块,而无需用户使用原生支持 ES 模块的浏览器。此外,模块捆绑(连同缩小和摇树)有助于减少将应用程序的资产交付给客户端所需的带宽。

[Create React App][cra] 在幕后使用 webpack(连同 Babel)来构建你的 React 应用程序。即使你不使用 Create React App,webpack 和 Babel 仍然是构建 React 应用程序的非常流行的选择。

在 Create React App 构建过程中揭开面纱(有点)

使用npm start运行由 Create React App 创建的应用程序感觉很神奇。终端中发生了一些事情,您的应用程序将在您的默认浏览器中打开。更好的是,当您对应用程序进行更改时,您的更改将(通常)自动出现在浏览器中!

Create React App 构建过程

概括地说,运行npm start时会发生以下情况:

环境变量已加载(稍后会详细介绍);
检查支持的浏览器列表(稍后也会详细介绍);
检查配置的 HTTP 端口以确保其可用;
应用编译器配置并创建;
webpack-dev-server启动;
webpack-dev-server编译你的应用程序;
index.html文件加载到浏览器中;和
启动文件观察器来观察您的文件,等待更改。

顶出

Create React App 提供了一个脚本,您可以运行该脚本以从 Create React App 工具中“弹出”您的应用程序。当您弹出应用程序时,所有隐藏的东西都会暴露出来,以便您可以查看和自定义它。

> 很少需要自定义 Create React App。另外,不要弹出一个实际项目,因为它是单程旅行!一旦 Create React App 项目被弹出,就没有回头路了(尽管如果您使用源代码控制,您总是可以通过恢复到较早的提交来撤消弹出过程)。

要从 Create React App 中弹出您的应用程序,请运行命令npm run eject。系统会提示您是否要继续;键入“y”继续弹出过程。弹出过程完成后,您可以查看以前对您隐藏的文件。

在package.json文件中,您将看到以下 npm 脚本:

{
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }
}

进入全屏模式退出全屏模式

您可以打开./scripts/start.js文件以查看运行npm start时执行的代码。

如果您对 webpack 配置感到好奇,可以打开并查看./config/webpack.config.js。

准备部署用于生产的 React 应用程序

在将应用程序部署到生产环境之前,您需要确保已将代码中的静态值替换为环境变量,并考虑您需要支持哪些浏览器。

定义环境变量

Create React App 支持在.env文件中定义环境变量。要定义环境变量,请将.env文件添加到您的项目并定义一个或多个以前缀REACT_APP_开头的变量:

REACT_APP_FOO: some value
REACT_APP_BAR: another value

进入全屏模式退出全屏模式

环境变量可以在这样的代码中使用:

console.log(process.env.REACT_APP_FOO);

进入全屏模式退出全屏模式

您还可以像这样在index.html中引用环境变量:

%REACT_APP_BAR%

进入全屏模式退出全屏模式

> _Important:环境变量在构建过程中嵌入到您的 HTML、CSS 和 JavaScript 包中。因此,非常重要_不要在您的环境变量中存储任何秘密,例如 API 密钥,因为任何人都可以通过检查您的文件在浏览器中查看您的捆绑代码。

配置支持的浏览器

在您项目的package.json文件中,您可以看到目标浏览器的列表:

{
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

进入全屏模式退出全屏模式

调整这些目标会影响代码的转译方式。指定较旧的浏览器版本将导致您的代码被转换为较旧版本的 JavaScript,以便与指定的浏览器版本兼容。production列表指定创建生产构建时要定位的浏览器,development列表指定使用npm start运行应用程序时要定位的浏览器。

browserl.ist网站可以查看你配置的browserslist支持的浏览器。

创建生产版本

要创建生产构建,请运行命令npm run build。生产构建过程在生产模式下捆绑 React 并优化构建以获得最佳性能。命令完成后,您将在build文件夹中找到您的生产就绪文件。

现在您的应用程序已准备好部署!

> 有关如何将 Create React App 项目部署到生产环境的更多信息,请参阅官方文档中的this page_。

你学到了什么

在本文中,您学习了如何:

描述什么是前端构建以及为什么需要它们;
高层次描述运行npm start时 Create React App 中发生的情况;和
准备将 React 应用程序部署到生产环境中。

React 路由器文档

现在您已经了解了 React Router,请随意浏览官方文档以了解更多信息!当您成为一名成熟的软件工程师时,请记住文档是您的朋友。您现在可以简要概述一下,因为文档最初可能包含大量信息。你对 React 了解得越多,你就越应该重温官方文档并学习!

设置 React 路由器

React 路由器快速入门
哈希路由器
浏览器路由器

路线和链接

路线
链接
导航链接

切换和重定向

开关
重定向

反应路由器参数(ownProps)

props.history
props.location
props.match

彩虹路线项目

今天你将获得我们使用 React Router 的第一次体验。目标是创建一个显示彩虹颜色的基本应用程序。然而,这条彩虹有一些特别之处 —— 一些颜色嵌套在其他颜色中。

阶段 0:设置

首先创建一个新的 React 项目:

npx create-react-app rainbow-routes --template @appacademy/simple

进入全屏模式退出全屏模式

现在,您将删除src的所有内容以及public目录中的所有内容,以从头开始构建应用程序架构!删除目录中的所有文件后,在public文件夹中创建一个新的index.html文件。使用html:5emmet 快捷方式生成 HTML 模板。将您的页面命名为“Rainbow Routes”,并在 DOM 的 `元素中创建一个id的id的div。使用以下代码在您的src`目录中创建一个index.css文件。现在让我们创建您的入口文件!

h4 {
  color: darkblue;
  cursor: pointer;
}

h4:hover {
  text-decoration: underline;
}

#rainbow {
  position: absolute;
  top: 0;
  left: 300px;
}

h3 {
  position: absolute;
  top: 1px;
}

.red {
  background-color: red;
  width: 100px;
  height: 100px;
}

.orange {
  background-color: orange;
  width: 100px;
  height: 50px;
}

.yellow {
  background-color: yellow;
  width: 100px;
  height: 50px;
}

.green {
  background-color: green;
  width: 100px;
  height: 100px;
}

.blue {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.indigo {
  background-color: mediumslateblue;
  width: 100px;
  height: 50px;
}

.violet {
  background-color: darkviolet;
  width: 100px;
  height: 100px;
}

a {
  display: block;
  margin-bottom: 10px;
}

进入全屏模式退出全屏模式

在src目录下创建index.js入口文件。在文件的顶部,确保从react包中导入React,从react-dom包中导入ReactDOM。确保还导入您刚刚创建的index.css文件!这将负责为您的 _rainbow 路线设置样式。

现在您可以使用ReactDOM.render()方法来渲染 `组件,而不是使用 anidofroot的 DOM 元素。最后,使用 aDOMContentLoaded`事件侦听器包装您的渲染函数,如下所示:

document.addEventListener('DOMContentLoaded', () =&gt; {
  ReactDOM.render(
    ,
    document.getElementById('root'),
  );
});

进入全屏模式退出全屏模式

让我们在您的入口文件中创建您的Root组件!您的Root组件将负责将您的BrowserRouter应用于应用程序。将BrowserRouter应用到Root组件允许在 `标记内渲染的所有子组件使用和访问react-router-dom`包中的Route、Link和NavLink组件。

const Root = () =&gt; (
  // TODO: Apply BrowserRouter
  // TODO: Render rainbow
);

进入全屏模式退出全屏模式

安装react-router-dom包:

npm install react-router-dom@^5.0.0

进入全屏模式退出全屏模式

现在从react-router-dom包中导入BrowserRouter,如下所示:

import { BrowserRouter } from 'react-router-dom';

进入全屏模式退出全屏模式

您将要渲染很多组件,所以让我们通过在其中创建components目录来保持src目录的组织性。在新的./src/components目录中,使用以下代码为Rainbow组件创建一个Rainbow.js文件:

// ./src/components/Rainbow.js
import React from 'react';
import { Route, Link, NavLink } from 'react-router-dom';

const Rainbow = () =&gt; (

    <h1>Rainbow Router!</h1>
    {/* Your links should go here */}


      {/* Your routes should go here */}


);

export default Rainbow;

进入全屏模式退出全屏模式

您的Rainbow组件将充当应用程序的主页或默认路径 (/)。将Rainbow组件导入您的入口文件,并让您的Root组件呈现wrapped within标签,如下所示:

const Root = () =&gt; (



);

进入全屏模式退出全屏模式

在您的Rainbow组件中,您将渲染and组件以将不同的导航路径添加到不同的组件。让我们创建您将渲染的所有组件!

在./src/components目录中为以下组件创建文件:

Red
Blue
Green
Indigo
Orange
Violet
Yellow

您的Red和Blue组件将如下所示:

import React from 'react';
import { Route, Link, NavLink } from 'react-router-dom';

const Color = () =&gt; (

    <h2>Color</h2>
    {/* Links here */}

    {/* Routes here */}

);

export default Color;

进入全屏模式退出全屏模式

您的Green、Indigo、Orange、Violet和Yellow组件将如下所示:

import React from 'react';

const Color = () =&gt; (

    <h3>Color</h3>

);

export default Color;

进入全屏模式退出全屏模式

现在启动您的服务器并验证您是否可以看到“彩虹路由器!”来自您的Rainbow组件的标头。目前没有功能。让我们解决这个问题!

第一阶段:路线

提醒一下,将Rainbow组件包装在 `tags 中会使路由器可用于所有后代 React Router 组件。现在打开Rainbow.js`文件。您将从这里渲染一些颜色组件。最终,您希望您的路线看起来像这样。

URLComponents/Rainbow/redRainbow -> Red/red/orangeRainbow -> Red -> Orange/red/yellowRainbow -> Red -> Yellow/greenRainbow -> Green/blueRainbow -> Blue/blue/indigoRainbow -> Blue -> Indigo/violetRainbow -> Violet

这意味着Red、Green、Blue和Violet组件需要在Rainbow组件中渲染,但前提是您在相应的 URL 处。您将使用Route个组件执行此操作。首先将Red、Green、Blue和Violet组件导入Rainbow.js文件。然后在div中添加必要的Route组件,在Rainbow组件中添加id="rainbow"。例如,要使用/red路径渲染Red组件,您将使用以下Route组件:

测试您的代码是否有效!手动输入您刚刚创建的每个 URL,您应该会看到颜色组件弹出。请记住,这些是 React 路由,因此您创建的路径将位于/之后。例如,您的默认彩虹路由将类似于http://localhost:3000/而您的红色路由将类似于http://localhost:3000/red。

您希望将Orange和Yellow组件嵌套在Red组件内,并将Indigo组件嵌套在Blue组件内。请记住导入您的组件以在Route标记中使用它们。您必须将相应的Route标签添加到Red.js和Blue.js文件中。确保使用正确的嵌套路径,例如橙色Route的"/red/orange"。

第 2 阶段:链接

手动导航到我们新创建的路线很烦人,所以让我们添加功能来为我们处理这个过程。 React Router 为此提供了Link和NavLink组件。

将Link添加到Rainbow组件中的路径/red、/green、/blue和/violet。例如,您的红色链接应如下所示

Red

进入全屏模式退出全屏模式

当您位于blue时,您希望能够到达/blue/indigo,然后返回/blue。将相应的Link添加到Blue组件中,如下所示:

Blue only
Add indigo

进入全屏模式退出全屏模式

同样,将Links 添加到/red、/red/orange和/red/yellow到Red组件。测试所有链接。导航现在轻松多了!

第 3 阶段:导航链接

如果我们的链接能告诉我们您在哪条路线上,那就太好了。幸运的是,React Router 有一个特殊的组件用于此目的:NavLink。当 NavLink 的to属性与当前 URL 匹配时,它们会获得一个额外的 CSS 类。默认情况下,此类称为active。

继续将所有Link切换到NavLink。如果您打开应用程序,您还不会看到任何变化。那是因为您没有向active类添加任何特殊样式。继续打开index.css文件。创建一个.active类并添加行font-weight: 700。现在您的活动链接将变为粗体。这不是很好吗!

唯一的问题是,即使路径是/blue/indigo,现在Blue only链接也处于活动状态。这没有多大意义。让我们将exact标志添加到该链接,以便它仅在其to与当前路径完全匹配时才处于活动状态。现在它应该看起来像:

  Blue only

进入全屏模式退出全屏模式

对Red only链接执行相同的操作。现在一切都应该正常了。

第 4 阶段 — 更改 NavLink 的活动类

您已经使用src/index.css中的.active类将NavLink设置为粗体链接文本。但是如果您希望这个类是别的东西怎么办?例如,如果您希望主颜色链接(红色、绿色、蓝色、紫罗兰色)在活动时的样式与子路径链接(仅红色、添加橙色、添加黄色等)不同,该怎么办。

您可以通过添加activeClassName属性将 React Router 设置的类设置为活动的NavLink。

例如,当我们在匹配以下NavLink的to属性的路由时,组件将应用.parent-active类:

  Blue

进入全屏模式退出全屏模式

这样可以更灵活地设置活动NavLink的样式!

使用上面的示例,为src/components/Rainbow.js中的每个NavLink添加一个activeClassName属性。现在,在src/index.css中为该类添加一些 CSS 样式,以区分您的主路由和子路由链接。

将您的工作与解决方案进行比较,并确保行为相同。是时候庆祝了! ✨ 🌈 ✨

您还可以在reacttraining.com了解有关使用 React 路由器的更多信息!

探索 React 构建项目

在这个项目中,您将使用 Create React App 创建一个简单的 React 应用程序。您将尝试使用 Create React App 提供的一些功能并将您的应用程序的生产构建部署到独立的 Express 应用程序。

阶段 0:设置

首先使用create-react-app包创建一个 React 应用程序:

npx create-react-app exploring-react-builds --template @appacademy/simple

进入全屏模式退出全屏模式

> 请记住,使用create-react-app命令将您的项目初始化为 Git 存储库。如果您使用ls -a查看项目中的隐藏文件,您将看到.gitfile.

更新App组件:

用 ``元素包裹<h1>元素;和
将<h1>元素内容更改为“Exploring React Builds”之类的内容。

// ./src/App.js

从“反应”导入反应;

函数应用程序(){

返回 (

<h1>探索 React 构建</h1>

进入全屏模式退出全屏模式

);

}

导出默认应用程序;

阶段 1:使用 CSS 模块

您已经看到了使用import关键字将样式表导入模块的示例,以便将其包含在您的应用程序构建中。这就是用于包含全局index.css样式表的技术:

// ./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(


  ,
  document.getElementById('root')
);

进入全屏模式退出全屏模式

您还可以在 Create React App 项目中利用CSS 模块。 CSS 模块范围样式表类名称,以便它们对于特定的 React 组件是唯一的。这使您可以创建类名,而不必担心它们是否会与另一个组件中使用的类名发生冲突。

在src文件夹中添加一个新的css-modules文件夹。在该文件夹中,添加以下文件:

HeadingA.js
HeadingA.module.css
HeadingB.js
HeadingB.module.css

然后将每个文件的内容更新为以下内容:

// ./src/css-modules/HeadingA.js

import React from 'react';
import styles from './HeadingA.module.css';

function HeadingA() {
  return (
    <h1>Heading A</h1>
  );
}

export default HeadingA;

/* ./src/css-modules/HeadingA.module.css */

.heading {
  color: green;
}

// ./src/css-modules/HeadingB.js

import React from 'react';
import styles from './HeadingB.module.css';

function HeadingB() {
  return (
    <h1>Heading B</h1>
  );
}

export default HeadingB;

/* ./src/css-modules/HeadingB.module.css */

.heading {
  color: red;
}

进入全屏模式退出全屏模式

请注意,如何在每个组件中使用.headingCSS 类名称来设置<h1>元素的颜色。对于HeadingA组件,颜色是green,对于HeadingB组件,颜色是red。使用文件命名约定[name].module.css让我们创建 React App 知道我们希望将这些样式表作为 CSS 模块处理。使用 CSS 模块允许.heading类名称跨组件重用,而不会出现任何问题。

要查看此功能的实际效果,请更新您的App组件以呈现您的两个新组件:

import React from 'react';
import HeadingA from './css-modules/HeadingA';
import HeadingB from './css-modules/HeadingB';

function App() {
  return (

      <h1>Exploring React Builds</h1>



  );
}

export default App;

进入全屏模式退出全屏模式

然后运行您的应用程序 (npm start) 以查看分别以绿色和红色显示的“标题 A”和“标题 B”。如果您使用浏览器的开发人员工具检查“标题 A”,您会看到.heading类名已被修改,使其对HeadingA组件是唯一的:

CSS 模块是如何使用前端构建过程来修改代码以启用浏览器本身不支持的功能的一个示例。

阶段 2:在组件中使用图像

Create React App 配置 webpack 以支持加载图像(以及 CSS、字体和其他文件类型)。这意味着,作为开发人员,您可以将图像文件添加到项目中,将其直接导入模块,然后在 React 组件中呈现。

下载任何网上或的图片点击这里下载下面的图片。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--C2_13i1m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2A233dNJ6vfgAmEVCD)然后在src文件夹中添加一个名为image的新文件夹。在该文件夹中添加一个名为Image.js的新组件文件。还将下载的图像文件添加到image文件夹(因此它是同级文件夹)到Image.js文件)。

将Image.js文件的内容更新为:

// ./src/image/Image.js

import React from 'react';
import cat from './react-builds-cat.png';

console.log(cat); // /static/media/react-builds-cat.45f7f4d2.png

function Image() {
  // Import result is the URL of your image.
  return <img src="%7Bcat%7D" alt="images/images/Cat">;
}

export default Image;

进入全屏模式退出全屏模式

您可以使用import关键字将图像导入组件。这告诉 webpack 在构建中包含图像。请注意,当您将图像导入模块时,您将获得图像在构建中位置的路径。您可以使用此路径在<img>元素上设置src属性。

> 如果您使用自己的图像,请务必将图像 import 语句更新为正确的文件名!

现在更新App组件以导入和渲染Image组件:

// ./src/App.js

import React from 'react';
import HeadingA from './css-modules/HeadingA';
import HeadingB from './css-modules/HeadingB';
import Image from './image/Image';

function App() {
  return (

      <h1>Exploring React Builds</h1>




  );
}

export default App;

进入全屏模式退出全屏模式

如果您运行您的应用程序 (npm start),您将看到您的图像显示在页面上!您还可以打开浏览器的开发人员工具并查看当前页面的“来源”。如果您可以展开左侧的localhost:3000>static>media节点,您可以看到 webpack 复制到您的构建中的图像文件。

样式表中的图像

您也可以在 CSS 文件中引用图像。将名为Image.css的 CSS 文件添加到./src/image文件夹并将其内容更新为:

/* ./src/image/Image.css */

.cat {
  background-image: url(./react-builds-cat.png);
  width: 400px;
  height: 400px;
}

进入全屏模式退出全屏模式

然后将Image组件更新为:

// ./src/image/Image.js

import React from 'react';
import './Image.css';
import cat from './react-builds-cat.png';

console.log(cat); // /static/media/react-builds-cat.45f7f4d2.png

function Image() {
  return (

      {/* Import result is the URL of your image. */}
      <img src="%7Bcat%7D" alt="Cat">


  );
}

export default Image;

进入全屏模式退出全屏模式

现在您将看到该图像在页面上显示了两次!

第 3 阶段:更新支持的浏览器(及其对代码编译的影响)

之前您了解了package.json文件中的browerslist设置,现在调整这些目标会影响您的代码的转译方式:

{
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

进入全屏模式退出全屏模式

production列表指定在创建生产构建时要定位的浏览器,development列表指定在使用npm start运行应用程序时要定位的浏览器。目前,在创建开发构建时,您的目标是主要浏览器的相对较新版本。定位较旧的浏览器版本会导致您的代码被转换为较旧版本的 JavaScript。

为了试验这个配置选项,让我们在项目中添加一个类组件。在src文件夹中添加一个名为class-component的新文件夹。在该文件夹中,添加一个名为ClassComponent.js的文件,其中包含以下代码:

// ./src/class-component/ClassComponent.js

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return (
      <h1>Class Component</h1>
    );
  }
}

export default ClassComponent;

进入全屏模式退出全屏模式

不要忘记更新您的App组件以呈现新组件:

// ./src/App.js

import React from 'react';
import HeadingA from './css-modules/HeadingA';
import HeadingB from './css-modules/HeadingB';
import Image from './image/Image';
import ClassComponent from './class-component/ClassComponent';

function App() {
  return (

      <h1>Exploring React Builds</h1>





  );
}

export default App;

进入全屏模式退出全屏模式

现在使用npm start运行您的应用程序。打开浏览器的开发人员工具并查看当前页面的“源”。展开左侧的localhost:3000>static>js节点,选择main.chunk.js文件。在 macOS 上按CMD+F或在 Windows 上按CTRL+F以在文件中搜索“类组件”。以下是ClassComponent类的转译代码:

class ClassComponent extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
  render() {
    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 7,
        columnNumber: 7
      }
    }, "Class Component");
  }
}

进入全屏模式退出全屏模式

> 你有没有想过为什么需要使用开发者工具来查看 Create React App 生成的包?请记住,当您运行npm start_ 时,Create React App 使用_webpack-dev-server_ 构建您的应用程序。为了尽可能保持高性能,webpack-dev-server生成的包被存储在内存中,而不是写入文件系统。

组件的render方法中的 JSX 已转换为 JavaScript,但ClassComponentES2015 类被单独保留。这是有道理的,因为 JSX 不被任何浏览器原生支持,而 ES2015 类现在已经被浏览器原生支持一段时间了。

但是,如果您需要针对不支持 ES2015 类的浏览器版本怎么办?您可以使用“我可以使用...”网站查看浏览器何时开始支持 ES2105(或 ES6)类。从版本 49 开始,Chrome 原生支持类。但是想象一下,您需要支持 Chrome 回到第 30 版,即不支持类的 Chrome 版本。

将package.json文件中的browserslist.development属性更改为:

{
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "chrome &gt;= 30",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

进入全屏模式退出全屏模式

查询chrome >= 30指定您希望以 Chrome 版本 30 或更高版本为目标。

> The浏览器列表 _website 可用于查看您配置的浏览器支持的浏览器 browserslist.

如果您的应用程序当前正在运行,请停止它。删除./node_modules/.cache文件夹并再次运行npm start。然后在开发者工具中再次查看main.chunk.js包:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8p9kWnkx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ATKBUkpbL5aSm5PTQ)现在您的 ES2015 类组件正在转换为构造函数!以下是转译的代码供参考:

var ClassComponent = /*#__PURE__*/function (_React$Component) {
  Object(_Users_jameschurchill_Documents_GitHub_Modular_Curriculum_content_react_redux_topics_react_builds_projects_exploring_react_builds_solution_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_inherits__WEBPACK_IMPORTED_MODULE_2__["default"])(ClassComponent, _React$Component);

  var _super = Object(_Users_jameschurchill_Documents_GitHub_Modular_Curriculum_content_react_redux_topics_react_builds_projects_exploring_react_builds_solution_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_createSuper__WEBPACK_IMPORTED_MODULE_3__["default"])(ClassComponent);

  function ClassComponent() {
    Object(_Users_jameschurchill_Documents_GitHub_Modular_Curriculum_content_react_redux_topics_react_builds_projects_exploring_react_builds_solution_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_0__["default"])(this, ClassComponent);

    return _super.apply(this, arguments);
  }

  Object(_Users_jameschurchill_Documents_GitHub_Modular_Curriculum_content_react_redux_topics_react_builds_projects_exploring_react_builds_solution_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_1__["default"])(ClassComponent, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("h1", {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 7,
          columnNumber: 7
        }
      }, "Class Component");
    }
  }]);

  return ClassComponent;
}(react__WEBPACK_IMPORTED_MODULE_4___default.a.Component);

进入全屏模式退出全屏模式

幸运的是,您很少需要阅读生成的包中的代码。 webpack 默认配置为生成源映射。源映射是生成文件(如捆绑文件)中的代码到原始源代码的映射。这使您可以在浏览器的开发人员工具中访问您的原始源代码:

您甚至可以在开发人员工具中的源代码中设置断点,以停止执行特定代码行!

阶段4:添加环境变量

之前您了解到 Create React App 支持在.env文件中定义环境变量。这为您提供了一种方便的方法来避免因环境而异的硬编码值。

让我们来试验一下这个特性,这样你就可以看到 Create React App 构建过程是如何将环境变量嵌入到你的 HTML、CSS 和 JavaScript 包中的。

将.env文件添加到 Create React App 项目的根目录。定义一个名为REACT_APP_TITLE的环境变量:

REACT_APP_TITLE=Exploring React Builds

进入全屏模式退出全屏模式

请记住,环境变量需要以REACT_APP_为前缀,以便 Create React App 处理它们。定义环境变量后,您可以在 JSX 中使用表达式和process.env来引用它:

// ./src/App.js

import React from 'react';
import HeadingA from './css-modules/HeadingA';
import HeadingB from './css-modules/HeadingB';
import Image from './image/Image';
import ClassComponent from './class-component/ClassComponent';

function App() {
  return (

      <h1>{process.env.REACT_APP_TITLE}</h1>





  );
}

export default App;

进入全屏模式退出全屏模式

环境变量也可以在常规 JavaScript 代码中引用:

console.log(process.env.REACT_APP_TITLE);

进入全屏模式退出全屏模式

您还可以在./public/index.html文件中引用环境变量,如下所示:

    %REACT_APP_TITLE%

进入全屏模式退出全屏模式

使用npm start再次运行您的应用程序。打开浏览器的开发人员工具并查看当前页面的“源”。展开左侧的localhost:3000节点并选择(index)。请注意,`元素中的文本%REACT_APP_TITLE%已转换为文本字面量Exploring React Builds`:

如果展开左侧的localhost:3000>static>js节点并选择main.chunk.js文件,可以看到App组件的 JSX 是如何转换为 JavaScript 的:

下面仔细看看相关的React.createElement方法调用:

/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10,
      columnNumber: 7
    }
  }, "Exploring React Builds")

进入全屏模式退出全屏模式

同样,请注意环境变量是如何被文本文字替换的。这对您有重要的安全影响需要考虑。因为环境变量在构建过程中嵌入到您的 HTML、CSS 和 JavaScript 包中,所以在您的环境变量中不存储任何秘密(如 API 密钥)是非常重要的。请记住,任何人都可以通过检查您的文件在浏览器中查看您的捆绑代码!

阶段 5:部署生产版本

在这个项目的最后阶段,让我们为 React 应用程序添加路由,创建一个生产构建,并将构建部署到一个 Express 应用程序!

添加路由

要将 React Router 添加到应用程序,首先安装react-router-domnpm 包:

npm install react-router-dom@^5.0.0

进入全屏模式退出全屏模式

然后将App组件更新为以下代码:

// ./src/App.js

import React from 'react';
import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from 'react-router-dom';
import HeadingA from './css-modules/HeadingA';
import HeadingB from './css-modules/HeadingB';
import Image from './image/Image';
import ClassComponent from './class-component/ClassComponent';

function App() {
  return (


        <h1>{process.env.REACT_APP_TITLE}</h1>

          <ul>
            <li>
              Home
            </li>
            <li>
              Image
            </li>
            <li>
              Class Component
            </li>
          </ul>















  );
}

export default App;

进入全屏模式退出全屏模式

请务必运行并测试您的应用程序,以确保定义的路由按预期工作:

/- 应该显示HeadingA和HeadingB组件;
/image- 应该显示Image组件;和
/class-component- 应该显示ClassComponent组件。

创建生产版本

要创建生产版本,请从项目的根目录运行命令npm run build。终端中的输出应如下所示:

&gt; solution@0.1.0 build [absolute path to your project]
&gt; react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  47.83 KB  build/static/js/2.722c16c4.chunk.js
  773 B     build/static/js/runtime-main.b7d1e5ee.js
  745 B     build/static/js/main.12299197.chunk.js
  197 B     build/static/css/main.e9a0d1f8.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

进入全屏模式退出全屏模式

忽略有关使用serve部署应用程序的评论(即npm install -g serve和serve -s build)。在下一步中,您将创建一个简单的 Express 应用程序来为您的 React 应用程序提供服务。

使用 Express 为 React 应用程序提供服务

在 Create React App 项目文件夹之外为您的 Express 应用程序创建一个新文件夹。

> 例如,从项目的根目录,使用cd ..上一级,然后通过运行命令mkdir express-server创建一个名为express-server的新文件夹。这使_express-server文件夹成为您的 Create React App 项目文件夹的兄弟。

浏览到express-server文件夹并将其初始化为使用 npm(即npm init -y)。然后通过运行命令npm install express@^4.0.0安装 Express。

应用一个名为app.js的文件,其内容如下:

// ./app.js

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const port = 9000;

app.listen(port, () =&gt; console.log(`Listening on port ${port}...`));

进入全屏模式退出全屏模式

这个简单的 Express 应用程序将:

尝试将传入请求与位于public文件夹中的静态文件匹配;和
如果未找到匹配的静态文件,则将为所有其他请求提供./public/index.html文件。

现在将名为public的文件夹添加到 Express 项目的根目录。将文件从 Create React App 项目中的build文件夹复制到 Express 应用程序项目中的public文件夹中。然后使用命令node app.js运行您的应用程序。

打开浏览器并浏览到 URLhttp://localhost:9000/。您应该会看到您的 React 应用程序从您的 Express 应用程序提供服务!请务必单击导航链接以验证您配置的所有路线是否按预期工作。

此外,由于您将 Express 配置为为与静态文件不匹配的任何请求提供./public/index.html文件,因此您可以“深度链接”到您的任何 React 应用程序的路由:

http://localhost:9000/image
http://localhost:9000/class-component

更多内容在plainenglish.io

通过Bryan Guner上2021 年 7 月 15 日。

规范链接

2021年8月24日从中导出。

将 CSS 添加到您的 HTML

对于初学者来说......因为 CSS 是一门视觉学科,所以画面很重!

将 CSS 添加到您的 HTML

对于初学者......非常繁重,因为 CSS 是一门视觉学科!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--dw68DA8C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A3hnCIyXstRSHgYO5-z-51g.png)### 将 CSS 放入您的 HTML

要将您的 CSS 表连接到您的 HTML 页面,请像这样使用链接标签。
许多开发人员使用外部预先编写的 CSS 样式表来实现一致的设计。
您可以连接多个样式表。

CSS 选择器

CSS Selector:将样式应用于特定的 DOM 元素,有多种类型:
Type Selectors:按节点名称匹配。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--04fM4cDd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AGOzh0U_yFtsOo9Hq)-Class Selectors:按类名匹配。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--IGq-p_JT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/800/1%2AWMQXdyBA2MeUYoVvY0Kjew.png)-ID Selectors:按 ID 名称匹配。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qee4hjzG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AuyRa6tM8Jlg648Rl)-Universal Selectors:选择页面上的所有 HTML 元素。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--nQRJ4s5r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ALfKazZMelOZrcOsp.jpg)-Attribute Selectors:根据给定属性的存在或值匹配元素。 (即 a[title] 将匹配所有具有 title 属性的 a 元素)

/* Type selector */
div {
  background-color: #000000;
}

/* Class selector */
.active {
  color: #ffffff;
}

/* ID selector */
#list-1 {
  border: 1px solid gray;
}

/* Universal selector */
* {
  padding: 10px;
}

/* Attribute selector */
a[title] {
  font-size: 2em;
}

进入全屏模式退出全屏模式

类选择器

用于选择某个类的所有元素,用.[class name]表示
您可以将多个类分配给一个 DOM 元素,方法是用空格分隔它们。

复合类选择器

[](https://res.cloudinary.com/practicaldev/image/fetch/s--B1Yhbq4i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AiIOiP-ML_k6g0yTxZQyQ4A.png)- 为了避免意外选择具有多个类的元素超出我们想要抓取的范围,我们可以链接点。

要使用复合类选择器,只需在 CSS 中引用它们时将这些类附加在一起。
即 .box.yellow 将仅选择第一个元素。
请记住,如果您确实包含空格,它将使选择器成为_后代选择器_。

h1#标题,

h2.副标题 {

字体样式:斜体;

}

当我们想要定位所有h1个标签,其 id 为heading。

CSS 组合器

CSS Combinators 用于将其他选择器组合成更复杂或有针对性的选择器 — 它们非常强大!
注意不要使用太多,因为它们会使你的 CSS 过于复杂。

`Descendant Selectors`

[](https://res.cloudinary.com/practicaldev/image/fetch/s--bXaaGwHE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AYPkGcUc4gf2WtJYdf6Yvmg.png)- 用空格分隔。

选择父容器的所有后代。

`Direct Child Selectors`

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1o0xSsSX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ASByLFbio2RGGnFHj.jpg)- 用>表示。

与后代不同,因为它只影响元素的直接子代。

CSS:

.menu &gt; .is-active { background-color: #ffe0b2; }

进入全屏模式退出全屏模式

HTML:

  Belka  Strelka     Laika

进入全屏模式退出全屏模式

Belka 将是唯一选择的元素。

`Adjacent Sibling Selectors`

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MTCKitjw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2Am0yPz3xJPeP3br2C.png)- 使用+符号。

用于直接跟随彼此且具有相同父级的元素。

h1 + h2 { 字体样式:斜体; }

//HTML:

大标题

##这个是有样式的,因为它直接与H1相邻

这个没有样式,因为它之前没有 H1

h1 + h2 { 字体样式:斜体; }

大标题

##这个是有样式的,因为它直接与H1相邻

这个没有样式,因为它之前没有 H1

伪类

[ 感谢伪类 — CSS:级联样式表| MDN (mozilla.org) ](https://res.cloudinary.com/practicaldev/image/fetch/s--vVUAeoHY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images -1.medium.com/max/800/1%2AXfxhRpW1_nd02miTi4s_PA.png)

由伪类提供 — CSS:级联样式表 | MDN (mozilla.org)

-Pseudo-Class:指定所选元素的特殊状态,不引用 DOM 中包含的任何元素或属性。

格式为Selector:Pseudo-Class Name或A:B

一:悬停{

font-family: "Roboto Condensed", sans-serif;

颜色:#4fc3f7;

文字装饰:无;

边框底部:2px 实心#4fc3f7;

}

> 一些常用的伪类是:

active:“下推”,当元素被激活时。
checked:适用于单选按钮或复选框输入等内容。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--y52eTSZT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2Awg0YeoQ2mZKHWXaa.gif)-disabled:任何禁用的元素。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Dd9QnK3L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AKmzLwGMr_FsbHF4u.gif)-first-child:一组孩子/兄弟姐妹中的第一个元素。

focus:具有当前焦点的元素。
hover:光标悬停在其上的元素。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--o0XfvHZw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AX7-ym7Relt83npDe.gif)-invalid:来自客户端表单验证的任何处于无效状态的表单元素。

last-child:一组孩子/兄弟姐妹中的最后一个元素。
not(selector):与提供的选择器不匹配的元素。
required:需要的表单元素。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--EkhkSJ1Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ACs9Jf4O0FHQB7Okc.gif)-valid:表单元素处于有效状态。

visited:用户已经访问过href指向的URL的锚标签。

`Pseudo-Selectors`

用于创建伪元素作为应用该属性的元素的子元素。
::after
::before

p::之前{

背景颜色:浅蓝色;

右边框:4px 纯紫色;

内容: ”:-) ”;

右边距:4px;

填充左:4px;

}

这是第一段

这是第二段

这是第三段

将在 p 标签元素前添加一些蓝色笑脸。

CSS 规则

CSS Rule:单个或复合选择器的集合、花括号、零个或多个属性
CSS Rule Specificity:有时 CSS 规则将包含多个元素,并且这些相同元素可能具有重叠的属性规则 - CSS 中有一种算法可以计算哪个规则优先。
The Four Number Calculation:按重要性升序排列。

1.谁的ID最多?如果没有人,继续。

2.谁的课最多?如果没有人,继续。

3.谁的标签最多?如果没有人,继续。

浏览器中的最后一次阅读获胜。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--vWh_PC_T--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AZ0iSQ0bhAiK5gYhk.png)[](https://res.cloudinary.com/practicaldev/image/fetch/s--JzlccCPi--/c_limit%2Cf_auto%2Cfl_progressive% 2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/800/0%2ARpC3i4EQM_HDRyUS.png)

。盒子 {

宽度:50px;

高度:50px;

边框:1px纯黑色;

}

。橙 {

背景颜色:橙色;

}

。黄色 {

背景颜色:黄色;

边框:1px 纯紫色;

}

回到我们所有 CSS 规则都绑定的示例,最后一步 4 胜出,因此我们的元素将有purple border。

CSS:类型、属性和导入

排版

font-family:更改字体。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--sO-0nzSj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/800/0%2A8298p-Vlu15C-pdw.png)- 请记住,并非所有计算机都具有相同的字体。

您可以使用 api 通过 api 导入网络字体
@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');并将其粘贴到 CSS 文件的顶部。
然后在你的字体系列中引用它。
font-size:更改字体大小。
请记住 CSS 使用的两种单位:
Absolute:Pixels,点、英寸、厘米。
Relative:嗯,雷姆。
Em:计算相对于前一个 div 的大小(向下冒泡)
Rem:总是相对于父元素计算。
font-style:用于将字体设置为斜体。
font-weight:用于使字体加粗。
text-align:用于将文本左对齐、居中或右对齐。
text-decoration:用于在文本上方、通过或下方放置线条。线条可以是实线、虚线或波浪形!
text-transform:用于将文本设置为全小写、大写或大写所有单词。

背景图片

您可以使用 background-image 属性为元素设置背景图像。

CSS:颜色、边框和阴影

颜色

您可以通过三种流行的方式在 CSS 中设置颜色:按名称、按十六进制 RGB 值和按其十进制 RGB 值。
rgba() 用于使 rbg 值更透明,a用于指定alpha channel。
Color:用于更改文本颜色的属性。
Background-Color:用于更改元素背景颜色的属性。

边界

边框取三个值:边框的宽度、样式(即实线、点线、虚线)、边框颜色。

阴影

CSS 中有两种阴影:box shadows和text shadows。
框是指 HTML 元素。
文字是指文字。
阴影采用阴影的水平和垂直偏移量、阴影的模糊半径、扩散半径,当然还有颜色等值。

我的博客:

[网络开发中心

_我的资源共享和博客网站......主要集中在网络开发和只是一点音频制作/一般......_bgoonz-blog.netlify.app](https://bgoonz-blog.netlify.app/“https:// bgoonz-blog.netlify.app/")

通过Bryan Guner上2021 年 8 月 22 日。

规范链接

2021年8月24日从中导出。

我所有文章的列表,以链接到以后的帖子

你可能应该跳过这个......说真的,它只是供内部使用!

我所有的中等故事

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zWYvgfb1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AyZ41P3YdMYMiyFPAPrzyGw.gif)

这是他们所有人的另一个备份!

[所有中篇文章

_2021-02-27_A-Quick-Guide-to-Big-O-Notation--Memoization--Tabulation--and-Sorting-Algorithms-by-Example-803ff193c522..._golden-lobe-519.notion.site]( https://golden-lobe-519.notion.site/Medium-7b5b9bd642344d60afe3f03fe6431952 "https://golden-lobe-519.notion.site/Medium-7b5b9bd642344d60afe3f03fe6431952")[]10431

[ExpressJS 编写 API 的方式

_本文将从初学者的角度介绍 express 的基础知识,而不用关心它本身与..._bryanguner.medium.com](https://bryanguner.medium.com/prerequisites-to-writing-express-apis-75e3267b284a " https://bryanguner.medium.com/prerequisites-to-writing-express-apis-75e3267b284a")

[Heroku 部署指南和备忘单编译

_Heroku 让您可以部署、运行和管理用 Ruby、Node.js、Java、Python、Clojure、Scala、Go 和 PHP 编写的应用程序......_bryanguner.medium.com](https://bryanguner.medium.com/heroku-deploy- guides-cheatsheet-compilation-b2897b69ce02 "https://bryanguner.medium.com/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02")

[全面深入了解 React

_深入了解 React 的世界。_javascript.plainenglish.io](https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f "https://javascript.plainenglish.io/react-in-深度 1965dcde8d4f")

[Web 开发资源列表 #4

_更新:_bryanguner.medium.com](https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380 "https://bryanguner.medium.com/take-a-look -at-the-big-picture-b69e0999a380")

[BASH 备忘单

_My Bash 备忘单索引:_bryanguner.medium.com](https://bryanguner.medium.com/bash-d3077114aea7 "https://bryanguner.medium.com/bash-d3077114aea7")

[** Heroku 备忘单**

_使用 heroku-cli_bryanguner.medium.com 的备忘单](https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b "https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b")

[Web 开发人员的技术词汇表

_这将是我进行更新时的运行列表!_bryanguner.medium.com](https://bryanguner.medium.com/web-developers-technical-glossary-2066beae5e96 "https://bryanguner.medium.com/web-开发人员技术词汇表 2066beae5e96")

[PostgreSQL 在 43 个或更少的命令中

_在数据库行话中,PostgreSQL 使用客户端/服务器模型。一个 PostgreSQL 会话由以下协作... in-43-commands-or-less-19fba3e37110")

[为什么 Jamstack 摇滚🤘😎🤙

_JAMstack 网站不使用微服务架构,但他们使用微前端架构。每个..._medium.com](https://medium.com/geekculture/why-jamstack-rocks-666114722f35 "https://medium.com/geekculture/why-jamstack-rocks-666114722f35")

[什么是 Bash 别名以及为什么要使用它们!

_Bash 别名是一种用新命令补充或覆盖 Bash 命令的方法。 Bash 别名使..._bryanguner.medium.com](https://bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb "https: //bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb")

[救生 Bash 脚本第 2 部分

_我并不是说它们与其他 bash 脚本相比有任何特别之处......但是当我认为你永远不可能......_medium.com](https://medium.com/geekculture/life-saving-bash-scripts-part -2-b40c8ee22682“https://medium.com/geekculture/life-saving-bash-scripts-part-2-b40c8ee22682”)

[工作委员会和狩猎

_我无法想象要享受在工作中发布和日常维护的行为需要什么样的受虐狂......_medium.com](https://medium.com/analytics-vidhya/job-boards-and-the- Hunt-8cbfefefbb33 “https://medium.com/analytics-vidhya/job-boards-and-the-hunt-8cbfefefbb33”)

[绝对是您需要了解的有关 JavaScript 工作原理的所有信息。

_说真的......这个列表非常详尽,它涵盖的核心概念比我在工作记忆中的名字还要多......_bryanguner.medium.com](https://bryanguner.medium.com/absolutely-everything-you-could-need- to-know-about-how-javascript-works-633549469528“https://bryanguner.medium.com/absolutely-everything-you-could-need-to-know-about-how-javascript-works-633549469528”)

[基本反应教程

_要记住的随机事物_bryanguner.medium.com](https://bryanguner.medium.com/react-tutorial-from-basics-647ba595e607 "https://bryanguner.medium.com/react-tutorial-from-basics-647ba595e607" )

[React 中可能会在面试中出现的基本概念

_不完整的文章_bryanguner.medium.com](https://bryanguner.medium.com/fundamental-concepts-in-react-that-will-probably-come-up-on-an-interview-5495b6421287 "https://bryanguner. medium.com/fundamental-concepts-in-react-that-probably-come-up-on-an-interview-5495b6421287")

[倒数第二个 Web 开发者备忘单

_我实际上只是将我的相当数量的备忘单按特定顺序组合起来。_medium.com](https://medium.com/geekculture/the-penultimate-web-developers-cheat-sheet-a02a423139a4 "https: //medium.com/geekculture/the-penultimate-web-developers-cheat-sheet-a02a423139a4")

[为我节省时间和挫败感的 Bash 命令

_这是介于我和 insanity 之间的 bash 命令列表。_medium.com](https://medium.com/geekculture/bash-commands-that-save-time-920fb6ab9d0a "https://medium.com/geekculture/ bash-commands-that-save-time-920fb6ab9d0a")

[快速 Web 开发人员网站清单和改进工具列表

_在将应用程序交给客户之前应该使用的一组问题。_bryanguner.medium.com](https://bryanguner.medium.com/quick-web-developers-website-checklist-a-list-of-tools -for-improvement-9a52e11c8ee1 "https://bryanguner.medium.com/quick-web-developers-website-checklist-a-list-of-tools-for-improvement-9a52e11c8ee1")

[面向有抱负的前端开发人员的 10 个基本 React 面试问题

_Comprehensive React Cheatsheet 包含在本文底部!_javascript.plainenglish.io](https://javascript.plainenglish.io/react-md-cbaafb31765d "https://javascript.plainenglish.io/react-md-cbaafb31765d" )

[一长串宝贵的 NodeJS 资源

_Disclaimer:我知道我并没有自己创建这个列表......如果你......我无法回忆或追踪原始列表......_levelup.gitconnected.com](https://levelup.gitconnected.com/long-list -of-invaluable-nodejs-resources-6a793ae1ce6 “https://levelup.gitconnected.com/long-list-of-invaluable-nodejs-resources-6a793ae1ce6”)

[开放式前端面试问题你应该在下一次面试之前回答

_解释事件委托。_bryanguner.medium.com](https://bryanguner.medium.com/open-ended-frontend-interview-questions-you-should-answer-before-your-next-interview-7c9722712521 "https:// /bryanguner.medium.com/open-ended-frontend-interview-questions-you-should-answer-before-your-next-interview-7c9722712521")

[数据结构......引擎盖下

_数据结构参考_bryanguner.medium.com](https://bryanguner.medium.com/data-structures-under-the-hood-660256c2e4e3 "https://bryanguner.medium.com/data-structures-under-the-hood -660256c2e4e3")

[Web 开发面试资源列表

_大多数优秀的程序员做编程不是因为他们期望得到报酬或得到公众的奉承,而是因为它......_medium.com](https://medium.com/geekculture/web-development-interview-resource-list-88fce9876261" https://medium.com/geekculture/web-development-interview-resource-list-88fce9876261")

[Python初学者指南

_我最喜欢的可维护性语言是 Python。它具有简单、干净的语法、对象封装、良好的库......_medium.com](https://medium.com/geekculture/beginners-guide-to-python-e5a59b5bb64d "https://medium.com/geekculture/beginners-指南到 python-e5a59b5bb64d")

[数据结构和算法资源列表第 1 部分

_猜测以下引文的作者:_bryanguner.medium.com](https://bryanguner.medium.com/data-structures-algorithms-resource-list-part-1-8bad647a8ad8 "https://bryanguner.medium.com /data-structures-algorithms-resource-list-part-1-8bad647a8ad8")

[什么是记忆?

_以及为什么这种编程范式不应该让你畏缩。_javascript.plainenglish.io](https://javascript.plainenglish.io/memoization-86685d811182"https://javascript.plainenglish.io/memoization-86685d811182")

[CSS 面试准备测验

_Plus Css Cheat Sheet(共 82 个问题)_bryanguner.medium.com](https://bryanguner.medium.com/css-interview-prep-quiz-6e3e4de7ca53 "https://bryanguner.medium.com/css-interview-准备测验-6e3e4de7ca53")

[图形数据结构面试问题一览

_因为它们几乎是最重要的数据结构。_medium.com](https://medium.com/geekculture/verbal-technical-interview-questions-about-graph-data-structures-fc6b1afbd8be "https:// /medium.com/geekculture/verbal-technical-interview-questions-about-graph-data-structures-fc6b1afbd8be")

[对象方法

_迭代 Objects_medium.com](https://medium.com/geekculture/object-methods-4066ed24b214 "https://medium.com/geekculture/object-methods-4066ed24b214")

[免费教你如何编码的 Github 存储库!

_30-seconds/30-seconds-of-code_levelup.gitconnected.com](https://levelup.gitconnected.com/github-repositories-that-will-teach-you-how-to-code-for-free-ad0ecf59d89e “https://levelup.gitconnected.com/github-repositories-that-will-teach-you-how-to-code-for-free-ad0ecf59d89e”)

[按编程语言分类的资源

_这里是按编程语言排序的编程资源列表。_bryanguner.medium.com](https://bryanguner.medium.com/resources-by-programming-language-399d9f9ef520 "https://bryanguner.medium.com/resources-通过编程语言 399d9f9ef520")

[用简单的术语分解 JavaScript 中的作用域、上下文和闭包。

[这些是我最喜欢的一些东西

_一个web开发学生的解密学校生存指南._medium.com](https://medium.com/codex/these-are-a-few-of-my-favorite-things-82e8b6e61879 "https://medium.com/法典/这些是我最喜欢的东西-82e8b6e61879")

[JavaScript 中的对象

_对象是存储其他数据的数据结构,类似于数组存储元素的方式。_medium.com](https://medium.com/codex/objects-in-javascript-b212486dade6"https://medium.com/法典/对象-in-javascript-b212486dade6")

[您应该了解的基本 Javascript 概念

_普通旧 JS 对象课程概念_bryanguner.medium.com](https://bryanguner.medium.com/fundamental-javascript-concepts-you-should-understand-81c4d839b827 "https://bryanguner.medium.com/fundamental-javascript-概念-你应该理解-81c4d839b827")

[JavaScript 中的可变性和引用 VS 私有类型

_Mutability && Primitive && Reference Examples_bryanguner.medium.com](https://bryanguner.medium.com/mutability-and-reference-vs-privative-types-in-javascript-5294422db4b0 "https://bryanguner.medium.com/可变性和引用-vs-privative-types-in-javascript-5294422db4b0")

[用 For 循环实现的数组回调方法

_如何在 JavaScript_javascript.plainenglish.io 中实现数组回调方法](https://javascript.plainenglish.io/array-callback-methods-implemented-with-for-loops-d08875df6777 "https://javascript.plainenglish.io/数组回调方法实现与for-loops-d08875df6777“)

[React 初学者指南第 2 部分

_当我学习在 React 中构建 Web 应用程序时,我将在本系列中发布有关它的博客,以尝试捕捉..._bryanguner.medium.com](https://bryanguner.medium.com/introductory-react-part-2-cda01615a186 “https://bryanguner.medium.com/introductory-react-part-2-cda01615a186”)

[计算大 O 计算复杂度的快速指南

_Big O:大图,粗略,没有细节_bryanguner.medium.com](https://bryanguner.medium.com/a-very-quick-guide-to-calculating-big-o-computational-complexity-eb1557e85fa3 "https ://bryanguner.medium.com/a-very-quick-guide-to-calculating-big-o-computational-complexity-eb1557e85fa3")

[面向完全初学者的 React 简介

_以下所有代码示例将作为嵌入式要点再次包含在本文底部。_javascript.plainenglish.io](https://javascript.plainenglish.io/introduction-to-react-for-complete-初学者-8021738aa1ad “https://javascript.plainenglish.io/introduction-to-react-for-complete-beginners-8021738aa1ad”)

[调度:setTimeout 和 setInterval

_我们可能决定不是现在执行一个函数,而是稍后执行。这就是所谓的“安排通话”。_javascript.plainenglish.io](https://javascript.plainenglish.io/scheduling-settimeout-and-setinterval-fcb2f40d16f7 "https://javascript.plainenglish.io/scheduling-settimeout-and -setinterval-fcb2f40d16f7")

[LocalStorage VS SessionStorage

_Web 存储对象 localStorage 和 sessionStorage 允许在浏览器中保存键/值对。_bryanguner.medium.com](https://bryanguner.medium.com/css-animations-d196a20099a5 "https://bryanguner.medium.com/ css-动画-d196a20099a5")

[这些是介于我和 Insanity 之间的 Bash Shell 命令

_我不会自称是 bash shell 向导......但我已经设法从 Stack 中搜索了一些非常有用的小脚本......_levelup.gitconnected.com](https://levelup.gitconnected.com/these-are-the-bash- shell-commands-that-stand-between-me-and-insanity-984865ba5d1b “https://levelup.gitconnected.com/these-are-the-bash-shell-commands-that-stand-between-me-and-精神错乱-984865ba5d1b")

[如何使用数组和对象实现原生(ES6)数据结构

_智能数据结构和愚蠢的代码比其他方式更有效-“Eric S. Raymond”_bryanguner.medium.com](https://bryanguner.medium.com/how-to-implement-native-es6-data-structures -using-arrays-objects-ce953b9f6a07 "https://bryanguner.medium.com/how-to-implement-native-es6-data-structures-using-arrays-objects-ce953b9f6a07")

[Javascript 中的对象

_Codepen 带有示例供您在下面练习!_medium.com](https://medium.com/codex/objects-in-javascript-cc578a781e1d "https://medium.com/codex/objects-in-javascript-cc578a781e1d ")

[JavaScript 初学者指南

_第 1 部分_javascript.plainenglish.io](https://javascript.plainenglish.io/absolute-beginners-guide-to-javascript-part-1-e222d166b6e1 "https://javascript.plainenglish.io/absolute-beginners-guide- to-javascript-part-1-e222d166b6e1")

[Web 开发人员资源列表第 4 部分

_Web 开发者工具和资源的全方位列表_medium.com](https://medium.com/star-gazers/web-developer-resource-list-part-4-fd686892b9eb "https://medium.com/star -gazers/web-developer-resource-list-part-4-fd686892b9eb")

[专门用于 JavaScript 开发的 VSCode 扩展

_在 JavaScript development_medium.com 中不可缺少的 VSCode 扩展](https://medium.com/codex/vscode-extensions-specifically-for-javascript-development-ea91305cbd4a "https://medium.com/codex/vscode-extensions-专门用于 javascript 开发 ea91305cbd4a")

[我所有文章的列表,以链接到未来的帖子

_您可能应该跳过这个......说真的,它仅供内部使用!_bryanguner.medium.com](https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to -future-posts-1f6f88ebdf5b “https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b”)

[JavaScript 中的基本数据结构

_一个简单的列表堆栈和队列指南,带有动画 gif、图表和代码示例!_javascript.plainenglish.io](https://javascript.plainenglish.io/lists-stacks-and-queues-in-javascript- 88466fae0fbb "https://javascript.plainenglish.io/lists-stacks-and-queues-in-javascript-88466fae0fbb")

[Web 开发资源第 3 部分

_我只是一个物理囤积者的心理等价物,而不是空的汽水罐和死浣熊,它的清单......_bryanguner.medium.com](https://bryanguner.medium.com/web-development-resources-part-3- f862ceb2b82a “https://bryanguner.medium.com/web-development-resources-part-3-f862ceb2b82a”)

[Web 开发面试第 3 部分💻

_到目前为止,这部分的技术要求最低,但这些问题更现实......_medium.com](https://medium.com/codex/web-development-interview-part-3-826ae81a9107 "https:// /medium.com/codex/web-development-interview-part-3-826ae81a9107")

[2021 年最佳基于云的代码游乐场(第 1 部分)

_多年来出现了大量的前端代码游乐场。它们提供了一种方便的方式来试验...... //bryanguner.medium.com/the-best-cloud-based-code-playgrounds-of-2021-part-1-cdae9448db24")

[前端面试问题第 2 部分

_这些将更多地关注词汇和概念,而不是我上一篇文章中的应用程序驱动方法!_medium.com](https://medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443 "https:// /medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443")

[Web 开发人员资源列表第 2 部分

_因为无论如何我都会强迫性地编译这些东西......_medium.com](https://medium.com/star-gazers/web-developer-resource-list-part-2-9c5cb56ab263 "https://medium.com/star-gazers /web-developer-resource-list-part-2-9c5cb56ab263")

[HTTP 基础知识

_“如果你想造船,不要鼓动男女去拾柴、分工、发号施令......_levelup.gitconnected.com](https://levelup.gitconnected.com/http- basics-8f02a96a834a "https://levelup.gitconnected.com/http-basics-8f02a96a834a")

[JavaScript 框架和库

_My Awesome JavaScript List Part 2_javascript.plainenglish.io](https://javascript.plainenglish.io/javascript-frameworks-libraries-35931e187a35 "https://javascript.plainenglish.io/javascript-frameworks-libraries-35931e187a35")

[我的 JavaScript 资源“很棒”列表

_每个人都在 GitHub 上看到了 'Awesome' 列表......它们确实很棒......所以今天我将尝试整理我的......_javascript.plainenglish.io](https://javascript.plainenglish.io/my-take-on- awesome-javascript-243255451e74 "https://javascript.plainenglish.io/my-take-on-awesome-javascript-243255451e74")

[开始使用 VSCode + 扩展和资源所需的一切

_Commands:_levelup.gitconnected.com](https://levelup.gitconnected.com/everything-you-need-to-get-started-with-vscode-extensions-resources-b9f4c8d91931 "https://levelup.gitconnected.com /你需要开始的一切 - vscode-extensions-resources-b9f4c8d91931")

[我最喜欢的 VSCode 主题

Themeslevelup.gitconnected.com](https://levelup.gitconnected.com/my-favorite-vscode-themes-9bab65af3f0f "https://levelup.gitconnected.com/my-favorite-vscode-themes-9bab65af3f0f")

[JavaScript 中的面向对象编程

_面向对象编程_levelup.gitconnected.com](https://levelup.gitconnected.com/object-oriented-programming-in-javascript-d45007d06333 "https://levelup.gitconnected.com/object-oriented-programming-in- javascript-d45007d06333")

[JavaScript Rotate (Array) ProblemWalkthrough

_旋转 Right_medium.com 的说明](https://medium.com/codex/javascript-rotate-array-problemwalkthrough-31deb19ebba1 "https://medium.com/codex/javascript-rotate-array-problemwalkthrough-31deb19ebba1")

[超级简单的 HTML 简介

_什么是 HTML、CSS 和 JS,为什么我们需要这三者?_levelup.gitconnected.com](https://levelup.gitconnected.com/super-simple-intro-to-html-651d695f9bc "https://levelup. gitconnected.com/super-simple-intro-to-html-651d695f9bc")

[您需要了解的有关关系数据库、SQL、PostgreSQL 和 Sequelize 构建的一切......

_对于像我一样努力跳转到全栈的前端开发人员。_medium.com](https://medium.com/codex/everything-you-need-to-know-about-relational-databases-sql-postgresql- and-sequelize-to-build-8acb68284a98 “https://medium.com/codex/everything-you-need-to-know-about-relational-databases-sql-postgresql-and-sequelize-to-build-8acb68284a98” )

[了解 Git(包含备忘单和资源的初学者指南)

_基本 Git 工作流程._levelup.gitconnected.com](https://levelup.gitconnected.com/understanding-git-a-beginners-guide- contains-cheat-sheets-resources-b50c9c01a107 "https://levelup.gitconnected. com/understanding-git-a-beginners-guide-containing-cheat-sheets-resources-b50c9c01a107")

[完整的 JavaScript 参考指南

[Javascript 中的模块

_Node.js 和 browsers_medium.com 的区别](https://medium.com/geekculture/modules-in-javascript-a55333e35978 "https://medium.com/geekculture/modules-in-javascript-a55333e35978")

[Markdown 简介(包括赠品 Markdown 模板)

_基本语法指南_levelup.gitconnected.com](https://levelup.gitconnected.com/an-introduction-to-markdown-bonus-markdown-templates-included-3497ce56de3 "https://levelup.gitconnected.com/an-introduction -to-markdown-bonus-markdown-templates-included-3497ce56de3")

[网络开发资源

_Web Development_levelup.gitconnected.com](https://levelup.gitconnected.com/web-dev-resources-ec1975773d7d "https://levelup.gitconnected.com/web-dev-resources-ec1975773d7d")

[常用表达

_description:_medium.com](https://medium.com/codex/regular-expressions-4d8fb3eb146b "https://medium.com/codex/regular-expressions-4d8fb3eb146b")

[使用 Python 编写文件

_用Python编写文件的基础知识

对文件进行操作的常用方法是 open() 打开文件,_medium.com](https://medium.com/geekculture/writing-files-using-python-d46b4851366f "https://medium.com/geekculture /写文件-使用-python-d46b4851366f")

[我最有用的 Gist 条目的集合

_这个列表没有特别的顺序!_bryanguner.medium.com](https://bryanguner.medium.com/a-collection-of-my-most-useful-gist-entries-f4314f3ba3ab "https://bryanguner.medium .com/a-collection-of-my-most-useful-gist-entries-f4314f3ba3ab")

[学习 CSS 让你的网站看起来不像垃圾

_CSS 选择器_javascript.plainenglish.io](https://javascript.plainenglish.io/learn-css-so-that-your-site-doesnt-look-like-garbage-938871b4521a "https://javascript.plainenglish.io/学习 css 所以你的网站不会看起来像垃圾938871b4521a")

[适用于 Windows 和 WSL/Ubuntu 的 PostgreSQL 设置

_如果您按照本指南进行操作......您将在 Windows 安装中安装 PostgreSQL 本身。然后,你会... for-windows-wsl-ubuntu-801672ab7089")

[埃米特备忘单

_EMMET_bryanguner.medium.com](https://bryanguner.medium.com/emmet-cheat-sheet-24758e628d37 "https://bryanguner.medium.com/emmet-cheat-sheet-24758e628d37")

[Git 技巧

_Refs_bryanguner.medium.com](https://bryanguner.medium.com/git-tricks-57e8d292285 "https://bryanguner.medium.com/git-tricks-57e8d292285")

[面向 JavaScript 程序员的 Python 学习指南

_从 JavaScript_levelup.gitconnected.com 中了解的 Python 命令指南](https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb "https:// levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb")

[Fetch 快速工作表

Fetchbryanguner.medium.com](https://bryanguner.medium.com/fetch-quick-sheet-8872650742b4 "https://bryanguner.medium.com/fetch-quick-sheet-8872650742b4")

[快速表

_Settings_bryanguner.medium.com](https://bryanguner.medium.com/express-quick-sheet-8f93762c59ca "https://bryanguner.medium.com/express-quick-sheet-8f93762c59ca")

[JavaScript 中的基本数据结构

[使用 Postgres 和 Express 将 React 应用程序部署到 Heroku

_Heroku 是一个 Web 应用程序,可让初学者轻松部署应用程序。_bryanguner.medium.com](https://bryanguner.medium.com/deploy-react-app-to-heroku-using-postgres-express-70b7ea807986"https ://bryanguner.medium.com/deploy-react-app-to-heroku-using-postgres-express-70b7ea807986")

[Postgresql 备忘单

_PostgreSQL commands_medium.com](https://medium.com/codex/postgresql-cheat-sheet-718b813d3e31 "https://medium.com/codex/postgresql-cheat-sheet-718b813d3e31")

[Big-O 表示法、记忆法、制表法和排序算法的示例快速指南

_Curating Complexity: A Guide to Big-O Notation_medium.com](https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms- by-example-803ff193c522 “https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522”)

[基本的 Web 开发环境设置

_适用于 Linux (WSL) 和 Ubuntu_levelup.gitconnected.com 的 Windows 子系统](https://levelup.gitconnected.com/basic-web-development-environment-setup-9f36c3f15afe "https://levelup.gitconnected.com/basic-web -开发-环境-设置-9f36c3f15afe")

通过Bryan Guner上2021 年 3 月 22 日。

规范链接

2021年8月24日从中导出。

https://medium.com/codexwebdevhub/notes-i-wish-i-had-when-i-started-learning-python-16ce4244be12

https://bryanguner.medium.com/awesome-list-of-github-repositories-f1c433e32b17

https://bryanguner.medium.com/my-personal-arsenal-of-convenience-scripts-3c7869fdae53

https://bryanguner.medium.com/adding-css-to-your-html-3a17ba25ba82

https://bryanguner.medium.com/most-common-javascript-errors-311ea1356a3d

https://bryanguner.medium.com/super-simple-intro-to-react-5c78e4207b7f

https://medium.com/codexcodex/react-state-d8e0fc340714

https://bryanguner.medium.com/awesome-web-development-youtube-video-archive-792a25839143

https://levelup.gitconnected.com/beginner-python-problems-solutions-dd631e9c3a9f

https://medium.com/codexcodex/fundamental-concepts-in-javascript-8e093a665b04

https://bryanguner.medium.com/bash-proficiency-in-under-15-minutes-3ec9d4e2e65

https://medium.com/codexanalytics-vidhya/mini-review-of-sql-for-postgresql-w-node-express-f34676f3802b

https://bryanguner.medium.com/all-the-things-you-can-embed-in-a-medium-article-b03a85c65d86

您可以在 Medium 文章中嵌入的所有内容

我有一种与生俱来的愿望,即把所有东西都放在一个地方,这通常是不必要的浪费时间......bryanguner.medium.com

https://bryanguner.medium.com/front-end-behavioral-interview-bf5c079f7461

https://medium.com/codexcodex/prerequisites-to-writing-express-apis-75e3267b284a

https://medium.com/codexanalytics-vidhya/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02

https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f

https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380

https://bryanguner.medium.com/bash-d3077114aea7

https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b

您可以在中篇文章中嵌入的所有内容

我有一种与生俱来的愿望,想把所有东西都放在一个地方,这通常是不必要的浪费时间......但在这里我会......

您可以在中等文章中嵌入的所有内容

我有一种与生俱来的愿望,希望将所有东西都集中在一个地方,这通常是不必要的浪费时间......但在这里,我将在我有意放纵这种倾向的地方进行和“实验”。

在这里,您可以在我的博客站点的第一帧中看到 5 个不同的嵌入式小部件,我使用 javascript 将这些小部件注入到站点的几乎每个页面中,以将我的小部件附加到 html 中的各个锚点。

[](https://res.cloudinary.com/practicaldev/image/fetch/s---ExP4j80---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1 .medium.com/max/1200/1%2A8Td2sElycsUj67bbm5m_0w.png)

更新:

带Airtable的桌子:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Lzjzb2I3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2Azost4Lf7pDfZdMf7b_hH4w.png)### 数学与https://math.embed.fun/

[](https://res.cloudinary.com/practicaldev/image/fetch/s--N_G-y5Cj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/600/1%2Aub0xEha5Nrq60qU1FspjAQ.png)对于下一个包含,我将用一块石头杀死两只鸟......我将嵌入一个 CodePen......其内容是我的 twitter 提要的嵌入式版本......

如果您想真正了解它,您还可以将您的中型文章嵌入到中型文章中......

→链接

Play.ht 提供以下服务:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qaoOWqwU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AGSZM_XmBIe4sgMtYN3e57A.png)[](https://res.cloudinary.com/practicaldev/image/fetch/s--Lzjzb2I3--/c_limit%2Cf_auto%2Cfl_progressive% 2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/800/1%2Azost4Lf7pDfZdMf7b_hH4w.png)### 4.):Repl.it:

bigO(分叉) — CodeSandbox

[](https://res.cloudinary.com/practicaldev/image/fetch/s--uBVpyW-w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images- 1.medium.com/max/800/0%2AS0kSybjoWZP08__p.gif)[](https://res.cloudinary.com/practicaldev/image/fetch/s--Lzjzb2I3--/c_limit%2Cf_auto% 2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/800/1%2Azost4Lf7pDfZdMf7b_hH4w.png)### 7.) 运球:

[米希尔·拜格·米萨克

_Mihir Beg Muisc 由 Bryan Guner 设计。在 Dribbble 上与他们联系;全球设计师和创意社区..._dribbble.com](https://dribbble.com/shots/15796789-Mihir-Beg-Muisc?utm_sourceu003dClipboard_Shot&utm_campaignu003dbgoonz4242&utm_contentu003dMihir%20Beg%20Muisc&utm_mediumu003dSocial_Share&utm_sourceu003dClipboard_Shot&utm_campaign_contentu003dbgoon %20Beg%20Muisc&utm_mediumu003dSocial_Share "https://dribbble.com/shots/15796789-Mihir-Beg-Muisc?utm_sourceu003dClipboard_Shot&utm_campaignu003dbgoonz4242&utm_contentu003dMihir%20Beg%20Muisc&utm_mediumu003dSocial_Share&utm_sourceu003dClipboard_Shot&utm_campaignu003dbgoonz4242&utm_contentu003dMihir%20Beg%20Muisc&utm_mediumu003dSocial_Share ")

链接

14.) Spotify 播放列表。

还有一个 SoundCloud 轨道:

15.) 信息图表:

待定......

通过Bryan Guner上2021 年 8 月 6 日。

规范链接

2021年8月24日从中导出。

Markdown 简介(包括赠品 Markdown 模板)

基本语法指南

Markdown 简介(包括赠品 Markdown 模板)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--jYXiCwtT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2Aoy6szzmI0FdRUiTd.png)[bgoonz/Markdown-Templates

_这里有一段项目描述这些说明将为您提供项目的副本并在..._github.com 上运行](https://github.com/bgoonz/Markdown-Templates.git "https://github.com /bgoonz/Markdown-Templates.git")

基本语法指南

本主题旨在为您提供有关 Markdown 工作原理的非常基本的概述,仅显示您最常使用的一些最常见的操作。请记住,您还可以使用“编辑”菜单使用工具栏注入 Markdown,这是了解 Markdown 工作原理的好方法。然而,Markdown 的最大优势在于其简单性和对键盘友好的方法,让您可以专注于编写文本并留在键盘上。

什么是降价

Markdown 非常容易学习和适应,因为它是一组相对较小的标记“命令”。它使用已经熟悉的语法来表示常见的格式化操作。 Markdown 了解基本的换行符,因此您通常只需键入文本即可。

Markdown 还允许在 Markdown 文档中使用原始 HTML,所以如果你想嵌入比 Markdowns 语法更花哨的东西,你总是可以回退到 HTML。但是,为了保持文档的可读性,通常不建议这样做。

基本 Markdown 语法

以下是您在构建典型文档时可能使用 Markdown 执行的最常见操作的几个示例。

粗体和斜体

markdown

This text **is bold**.
This text *is italic*.

进入全屏模式退出全屏模式

这段文字是粗体的。

此文字为斜体。

标题文本

markdown

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

进入全屏模式退出全屏模式

标题1

标题 2

标题 3

标题 4

标题 5标题 6

续行

默认情况下,Markdown 在双换行符处添加段落。单个换行符本身只是简单地包装成一行。如果您希望软返回打破单行,请在行尾添加两个空格。

markdown

This line has a paragraph break at the end (empty line after).

Theses two lines should display as a single
line because there's no double space at the end.

The following line has a soft break at the end (two spaces at end)
This line should be following on the very next line.

进入全屏模式退出全屏模式

这一行的末尾有一个分节符(后面是空行)。

这两行应该显示为单行,因为末尾没有双空格。

以下行末尾有一个软中断(末尾有两个空格)

这一行应该紧跟在下一行。

链接

markdown

[Help Builder Web Site](http://helpbuilder.west-wind.com/)

进入全屏模式退出全屏模式

帮助生成器网站

如果您需要额外的图像标签,例如目标或标题属性,您也可以直接嵌入 HTML:

markdown

Go the Help Builder sitest Wind site: <a href="http://west-wind.com/">Help Builder Site</a>.

进入全屏模式退出全屏模式

图片

markdown

![Help Builder Web Site](https://helpbuilder.west-wind.com/images/HelpBuilder_600.png)

进入全屏模式退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--eBCnIuR9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AibU0D-Zr0qDT5h3z.png)### 块行情

块引号是非常适合在文档中添加注释或警告的标注。

markdown

&gt; ###  Headers break on their own
&gt; Note that headers don't need line continuation characters
as they are block elements and automatically break. Only text
lines require the double spaces for single line breaks.

进入全屏模式退出全屏模式

> _Headers 自行中断

> 注意,标题不需要换行符,因为它们是块元素并且会自动中断。只有文本行需要双空格来换行。

Fontawesome 图标

Help Builder 在其模板中包含FontAwesome图标的自定义语法。您可以嵌入一个@ icon-后跟一个很棒的字体图标名称,以自动嵌入该图标而无需完整的 HTML 语法。

markdown

Gear:  Configuration

进入全屏模式退出全屏模式

配置

HTML 标记

如果您愿意,您还可以将纯 HTML 标记嵌入到页面中。例如,如果你想完全控制 fontawesome 图标,你可以使用这个:

markdown

This text can be **embedded** into Markdown:
 Refresh Page

进入全屏模式退出全屏模式

该文本可以嵌入到 Markdown 中:

刷新页面

无序列表

markdown

* Item 1
* Item 2
* Item 3
This text is part of the third item. Use two spaces at end of the the list item to break the line.

A double line break, breaks out of the list.

进入全屏模式退出全屏模式

项目 1
项目 2
项目 3

该文本是第三项的一部分。在列表项的末尾使用两个空格来换行。

双换行符,超出列表。

有序列表

markdown

1. **Item 1**
Item 1 is really something
2. **Item 2**
Item two is really something else

If you want lines to break using soft returns use two spaces at the end of a line.

进入全屏模式退出全屏模式

Item 1 Item 1 真的是东西
第 2 项

第二项真的是另一回事

如果要使用软返回来换行,请在行尾使用空格。

内嵌代码

如果您想在一段文本的中间嵌入代码以突出显示编码语法或类/成员名称,您可以使用内联代码语法:

markdown

Structured statements like `for x =1 to 10` loop structures
can be codified using single back ticks.

进入全屏模式退出全屏模式

像for x =1 to 10循环结构这样的结构化语句可以使用单个反引号进行编码。

带有语法高亮的代码块

Markdown 以多种方式支持代码块语法:

markdown

The following code demonstrates:

    // This is code by way of four leading spaces
    // or a leading tab

More text here

进入全屏模式退出全屏模式

以下代码演示:

pgsql

// This is code by way of four leading spaces
// or a leading tab

进入全屏模式退出全屏模式

更多文字在这里

代码块

您还可以使用三次反引号加上可选的编码语言来支持语法突出显示(在最后一个 ` 之前注入空间以避免降价解析):

markdown

`` `csharp
// this code will be syntax highlighted
for(var i=0; i++; i &lt; 10)
{
    Console.WriteLine(i);
}
`` `

csharp

// this code will be syntax highlighted
for(var i=0; i++; i &lt; 10)
{
    Console.WriteLine(i);
}

进入全屏模式退出全屏模式

支持多种语言:html、xml、javascript、css、csharp、foxpro、vbnet、sql、python、ruby、php 等等。使用代码下拉列表获取可用语言的列表。

您也可以省略语言以获得没有语法着色但代码框:

markdown

`` `dos
robocopy c:\temp\test d:\temp\test
`` `

dos

robocopy c:\temp\test d:\temp\test

进入全屏模式退出全屏模式

要创建格式化块但不格式化,请使用txt格式:

markdown

`` `txt
This is some text that will not be syntax highlighted
but shows up in a code box.
`` `

进入全屏模式退出全屏模式

这给了你:

text

This is some text that will not be syntax highlighted
but shows up in a code box.

进入全屏模式退出全屏模式

如果您觉得本指南有帮助,请随时查看我托管类似内容的 github/gists:

bgoonz 的要点 · GitHub

[bgoonz — 概述

_Web 开发人员,电气工程师 JavaScript | CSS |引导程序 |蟒蛇 |反应 | Node.js |快递 |续集..._github.com](https://github.com/bgoonz "https://github.com/bgoonz")

或查看我的个人资源网站:

[a/A-学生资源

_编辑描述_goofy-euclid-1cd736.netlify.app](https://goofy-euclid-1cd736.netlify.app/ "https://goofy-euclid-1cd736.netlify.app/")

通过Bryan Guner上2021 年 3 月 8 日。

规范链接

2021年8月24日从中导出。

Big-O 表示法、记忆法、制表法和排序算法的示例快速指南

策划复杂性:Big-O 表示法指南

Big-O 表示法、记忆法、制表法和排序算法的快速指南(按示例)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--e5foW0o4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AyjlSk3T9c2_14in1.png)Curating Complexity: A Guide to Big-O Notation

[中篇文章综合体

_a Node.js repl by bgoonz_replit.com](https://replit.com/@bgoonz/Medium-article-comp-complex "https://replit.com/@bgoonz/Medium-article-comp-complex")

为什么查看运行时不是计算时间复杂度的可靠方法?
并非所有计算机都是平等的(有些可能更强大,因此提高了我们的运行速度)
有多少后台进程与我们正在测试的程序同时运行?
如果我们增加输入的大小,我们还需要询问我们的代码是否保持高性能。
我们需要回答的真正问题是:How does our performance scale?。

大“O”符号

Big O Notation 是一种工具,用于描述算法在输入参数大小方面的效率。
由于我们在 Big-O 中使用数学函数,因此我们需要牢记一些全局概念:
函数应由输入的大小定义。
SmallerBig O 更好(时间复杂度更低)
Big O 用于描述最坏的情况。
Big O 被简化为仅显示其最主要的数学术语。

简化数学术语

我们可以使用以下规则来简化我们的大 O 函数:
Simplify Products:如果函数是多个项的乘积,我们会删除不依赖于 n 的项。
Simplify Sums:如果函数是许多项的总和,我们删除非主导项。
n:输入的大小
T(f):未简化的数学函数
O(f):简化的数学函数。

Putting it all together

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4WatxLa---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1 .medium.com/max/800/1%2ATT8uuv1x3nmGUw5rvtoZ8A.png)- 首先我们应用乘积规则删除所有常量。

然后我们应用求和规则来选择单个最主要的词。

复杂度类

常见的复杂性类

时间复杂度有7大类

[](https://res.cloudinary.com/practicaldev/image/fetch/s--sVH3EHp3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A6zKhmJoHkvDbrd8jfUDf3A.png)####O(1) Constant

> 对于任何输入大小,该算法所采用的步数大致相同。

`O(log(n)) Logarithmic`

> 在大多数情况下,我们的对数时间的隐藏基数是 2,对数复杂度算法通常会显示“减半”输入的大小(如二进制搜索!)

`O(n) Linear`

> 线性算法将“一次”访问输入的每个项目。

`O(nlog(n)) Log Linear Time`

> 线性和对数行为的组合,我们将看到这两个类的特征。

> 对数线性的算法将使用递归和迭代。

`O(nc) Polynomial`

> C 是一个固定常数。

`O(c^n) Exponential`

> C 现在是在每个堆栈帧中进行的递归调用的数量。

> 具有指数时间的算法非常慢。

备忘

记忆化:一种设计模式,用于减少使用递归策略求解的算法中可能发生的计算总数。
MZ 将子问题的结果存储在其他一些数据结构中,这样我们就可以避免重复计算,每个问题只“解决”一次。
包含记忆的两个功能:

函数必须是递归的。
我们的附加数据结构通常是一个对象(我们将其称为我们的备忘录......或者有时缓存!)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--LZufCuLQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A4U79jBMjU2wKE_tyYcD_3A.png)[](https://res.cloudinary.com/practicaldev/image/fetch/s--D5z2gnDG--/c_limit%2Cf_auto%2Cfl_progressive% 2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/800/1%2AQh42KZgcCxmVt6WrTasCVw.png)### 记忆阶乘

我们的备忘录对象将我们的阶乘参数_映射_到它的返回值。

请记住,我们没有提高算法的速度。

记忆斐波那契

[](https://res.cloudinary.com/practicaldev/image/fetch/s--onCDDfEo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2A2XaPj7UGKZYFjYhb)- 应用记忆化后,我们的斐波那契时间复杂度从 O(2^n) 变为 O(n)。

记忆公式

> 规则:

1.编写未优化的蛮力递归(确保它有效);

添加备忘录对象作为附加参数。
添加一个基本情况条件,如果函数的参数在备忘录中,则返回存储的值。
在返回递归案例的结果之前,将其作为值存储在备忘录中,并将函数的参数设为键。

要记住的事情

用Memoization解决DP问题时,先画出视觉树是有帮助的。_
当你注意到重复的子树时,这意味着我们可以记忆。

制表

制表策略

> 使用时间:

函数是迭代的而不是递归的。
随附的 DS 通常是一个数组。

制表步骤

根据输入的大小创建一个表数组。
初始化表中的一些值以“回答”微不足道的小子问题。
遍历数组并填写剩余的条目。
您的最终答案通常是表格中的最后一个条目。

斐波那契备忘录和标签演示

> _ 正态递归斐波那契 _

function fibonacci(n) {
  if (n &lt;= 2) return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

进入全屏模式退出全屏模式

> Memoization Fibonacci 1

> Memoization Fibonacci 2

> Tabulated Fibonacci

线性搜索示例

最坏情况:该术语甚至不存在于数组中。
含义:如果它不存在,那么我们的 for 循环将一直运行到最后,因此我们的时间复杂度为 O(n).

排序算法

冒泡排序

Time Complexity:二次 O(n^2)

内部 for 循环会导致 O(n),但在最坏的情况下,while 循环将需要运行 n 次,然后才能将所有 n 个元素带到它们的最终静止点。

Space Complexity:O(1)

冒泡排序将始终使用相同数量的内存,而与 n 无关。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--oMxrQfjd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2ACk9aeGY-d5tbz7dT)- 在入门编程课程中学习的第一个主要排序算法。

介绍如何将未排序的数据转换为已排序的数据。

> 它几乎从不在生产代码中使用,因为:

效率不高
_不常用
有污名
Bubbling Up:推断物品在运动中,朝某个方向移动,并有某个最终静止目的地的术语。
冒泡排序,通过将最大整数冒泡到顶部来对整数数组进行排序。
最坏情况和最佳情况总是相同的,因为它会产生嵌套循环。
Double for 循环是多项式时间复杂度,或者更具体地说,在这种情况下是二次(大 O):O(n2)

选择排序

Time Complexity:二次 O(n^2)

我们的外部循环将贡献 O(n) 而内部循环将贡献 O(n / 2) 平均。因为我们的循环是嵌套的,所以我们会得到 O(n2);

Space Complexity:O(1)

选择排序将始终使用相同数量的内存,而与 n 无关。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4YiUfrjV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AAByxtBjFrPVVYmyu)- 选择排序将最小的元素组织到数组的开头。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8yBc6ifm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AGeYNxlRcbt2cf0rY)选择排序应该如何工作的总结:

将 MIN 设置为位置 0

2.搜索列表中的最小元素。

与位置 Min 的值交换
Increment Min 指向下一个元素。
重复直到列表排序。

插入排序

Time Complexity:二次 O(n^2)

我们的外部循环将贡献 O(n) 而内部循环将贡献 O(n / 2) 平均。因为我们的循环是嵌套的,所以我们会得到 O(n2);

Space Complexity: O(n)

因为我们正在为原始输入中的每个元素创建一个子数组,所以我们的空间复杂性变为线性。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--cwUsF1FG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AgbNU6wrszGPrfAZG)### 合并排序

Time Complexity:对数线性 O(nlog(n))

由于每次我们贡献 O(log(n)) 时,我们的数组都会被分成两半。我们的辅助合并函数中包含的 while 循环贡献了 O(n),因此我们的时间复杂度是 O(nlog(n));Space Complexity: O(n)
我们是线性 O(n) 时间,因为我们正在创建子数组。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--suVAR2wl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AGeU8YwwCoK8GiSTD)[](https://res.cloudinary.com/practicaldev/image/fetch/s--KOODCV_Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://cdn-images-1.medium.com/max/800/0%2AIxqGb72XDVDeeiMl)### 合并排序示例

[](https://res.cloudinary.com/practicaldev/image/fetch/s--CKMP0DTK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AHMCR--9niDt5zY6M)- 合并排序是 O(nlog(n)) 时间。

我们需要一个合并函数和一个排序函数。

> 步骤:

如果列表中只有一个元素,则已经排序;返回数组.
否则,将列表递归地分成两半,直到不能再被分割。
将最小的列表按排序顺序合并到新列表中。

快速排序

Time Complexity:二次 O(n^2)

尽管平均时间复杂度为 O(nLog(n)),但最坏的情况始终是二次的。

Space Complexity: O(n)

由于我们创建的分区数组,我们的空间复杂度是线性 O(n)。
QS 是另一种分而治之的策略。
需要牢记的一些关键思想:
相对于特定目标值对数组元素进行排序很容易。
0 或 1 个元素的数组已经简单排序。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--E_x8MHzo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AWLl_HpdBGXYx284T)[](https://res.cloudinary.com/practicaldev/image/fetch/s--S2xEUsO4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://cdn-images-1.medium.com/max/800/0%2A-LyHJXGPTYsWLDZf)### 二进制搜索

Time Complexity: 记录时间 O(log(n))

Space Complexity: O(1)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GMOG7c2r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2A-naVYGTXzE2Yoali)递归解法

> 最小最大解

必须在排序数组上进行。
二进制搜索是对数时间,而不是指数 b/c n 减少了 2,没有增长。
二进制搜索是分而治之的一部分。

插入排序

通过在数组的最左端构建一个越来越大的排序区域来工作。

> 步骤:

如果是第一个元素,并且已经排序;返回 1.
选择下一个元素。

3.与排序后的子列表中的所有元素进行比较

将已排序子列表中大于待排序值的所有元素移位。
插入值
重复直到列表排序。

如果您觉得本指南有帮助,请随时查看我托管类似内容的 GitHub/gists:

[bgoonz 的要点

_即时共享代码、注释和片段。 Web 开发人员,电气工程师 JavaScript | CSS |引导程序 | Python |..._gist.github.com](https://gist.github.com/bgoonz "https://gist.github.com/bgoonz")

[bgoonz — 概述

_Web 开发人员,电气工程师 JavaScript | CSS |引导程序 |蟒蛇 |反应 | Node.js |快递 |续集..._github.com](https://github.com/bgoonz "https://github.com/bgoonz")

或查看我的个人资源网站:

[网络开发中心

_Memoization、Tabulation 和 Sorting Algorithms by Example 为什么查看运行时不是一个可靠的方法......_bgoonz-blog.netlify.app](https://bgoonz-blog.netlify.app/" netlify.app/")

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xe5UZi4k--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AVCmj_H9AHs41oC9Yx1hZFQ.png)### 发现更多:

[网络开发中心

_Memoization、Tabulation 和 Sorting Algorithms by Example 为什么查看运行时不是一个可靠的方法......_bgoonz-blog.netlify.app](https://bgoonz-blog.netlify.app/" netlify.app/")

通过Bryan Guner上2021 年 2 月 27 日。

规范链接

2021年8月24日从中导出。

使用 For 循环实现的数组回调方法

如何在 JavaScript 中实现数组回调方法

使用 For 循环实现的数组回调方法

如何在JavaScript中实现数组回调方法

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MdEbxRS7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/0%2AWpKqOdTsTPhvapuW)#### 函数在 JavaScript 中被称为“第一类对象”,因为:

函数是 Object 类型的实例
函数可以具有属性并具有返回其构造函数方法的链接
您可以将函数存储在变量中
您可以将函数作为参数传递给另一个函数
可以从函数返回函数

你认为下面会打印什么:

匿名回调,命名回调

function foo(callback) {
    console.log('grape');
    callback();
}

function bar() {
    console.log('banana');
}

const fruitBasket = function() {
    console.log('apple');
    bar();
    foo(bar);
    foo(function() {
        console.log('orange');
    });
    console.log('pear');
};

fruitBasket();

进入全屏模式退出全屏模式

接受一个值和两个回调的函数。该函数应返回调用结果较大的回调的结果。

function greaterValue(value, cb1, cb2) {
    // compare cb1 invoked with value to cb2 invoked with value
    // return the greater result

    let res1 = cb1(value);
    let res2 = cb2(value);
    if (res1 &gt; res2) {
        // if this is false, we move out of if statement
        return res1;
    }
    return res2;
}

let negate = function(num) {
    return num * -1;
};

let addOne = function(num) {
    return num + 1;
};

console.log(greaterValue(3, negate, addOne));
console.log(greaterValue(-2, negate, addOne));

进入全屏模式退出全屏模式

注意:我们不调用negateoraddOne(通过使用()来调用它们),我们传递的是函数本身。

编写一个函数 myMap,它接受一个数组和一个回调作为参数。该函数应该模仿 Array.prototype.map 的行为。

function myMap(arr, callback) {
    // iterate through the array, perform the cb on each element
    // return a new array with those new values
    let mapped = [];

    for (let i = 0; i &lt; arr.length; i++) {
        // remember that map passes three args with each element.
        let val = callback(arr[i], i, arr);
        mapped.push(val);
    }

    return mapped;
}

let double = function(num) {
    return num * 2;
};
console.log(myMap([1, 2, 3], double));

进入全屏模式退出全屏模式

编写一个函数 myFilter,它接受一个数组和一个回调作为参数。该函数应该模仿 Array.prototype.filter 的行为。

function myFilter(arr, callback) {
    let filtered = [];

    for (let i = 0; i &lt; arr.length; i++) {
        let element = arr[i];

        if (callback(element, i, arr)) {
            filtered.push(element);
        }
    }

    return filtered;
}

进入全屏模式退出全屏模式

编写一个函数 myEvery,它接受一个数组和一个回调作为参数。该函数应该模仿 Array.prototype.every 的行为。

function myEvery(arr, callback) {
    for (let i = 0; i &lt; arr.length; i++) {
        let element = arr[i];

        if (callback(element, i, arr) === false) {
            return false;
        }
    }
    return true;
}

进入全屏模式退出全屏模式

上述概念的更多示例

const createMeowValue = () =&gt; {
  console.log(this.name);
  let meow = function () {
    console.log(this);
    console.log(this.name + ' meows');
  }
  meow = meow.bind(this);
  return meow;
};

const name = 'Fluffy';

const cat = {
  name: name,
  age: 12,
  createMeow: function () {
    console.log(this.name);
    let meow = () =&gt; {
      const hello = 'hello';
      console.log(this.name + ' meows');
    };
    let world = '';
    if (true) {
      world = 'world';
    }
    console.log(world);
    // meow = meow.bind(this);
    return meow;
  }
};

cat.newKey = function () {
  const outermostContext = this;
  const innerFunc = () =&gt; {
    secondContext = this;
    console.log(secondContext === outermostContext)
    return function () {
      innermostContext = this;
    }
  };
  return innerFunc.bind(outermostContext);
};

const meow = cat.createMeow(); // method-style invocation
meow(); // function-style invocation

console.log('-------')

const createMeow = cat.createMeow;
const globalMeow = createMeow(); // function-style
globalMeow(); // function-style

function createSmoothie(ingredient) {
  const ingredients = [ingredient];
  return ingredients;
}

// console.log(createSmoothie('banana'));
// console.log(createSmoothie('apple'));

// one parameter only
// first argument is a string
// return an array
// DO NOT USE forEach

进入全屏模式退出全屏模式

参考:

[应用学院开放

_App Academy Open 是第一个免费的在线 Web 开发课程,旨在让您被聘为开发人员。获取..._open.appacademy.io](https://open.appacademy.io/learn "https://open.appacademy.io/learn")

[MDN 网络文档

_在 hacks.mozilla.org 阅读更多内容大约一年前,我们在 Mozilla 开始努力提高 Firefox 的稳定性......_developer.mozilla.org](https://developer.mozilla.org/en-US/ "https:// developer.mozilla.org/en-US/")

[简介:回调

_为了演示回调、承诺和其他抽象概念的使用,我们将使用一些浏览器方法..._javascript.info](https://javascript.info/callbacks "https://javascript.info/callbacks")

更多内容在plainenglish.io

通过Bryan Guner上2021 年 5 月 27 日。

规范链接

2021年8月24日从中导出。

计算大 O 计算复杂度的快速指南

大O:大图,大笔画,不细节

计算大 O 计算复杂度的快速指南

大O:大图,大笔画,不细节

如需更完整的指南......结帐:

[Big-O 表示法、记忆法、制表法和排序算法的示例快速指南

[](https://res.cloudinary.com/practicaldev/image/fetch/s--jJpqFw-W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/800/0%2Alte81mEvgEPYXodB.png)- 我们分析算法效率的方式,而不会陷入细节的泥潭

可以模拟在给定n输入的情况下任何函数将花费多少时间
对确切数字的数量级感兴趣
O 吸收所有绒毛和 n u003d 最大项
3x^2 +x + 1的大 O u003dO(n^2)

时间复杂度

没有循环或退出 & return u003d O(1)

0 个嵌套循环 u003dO(n)

1 个嵌套循环 u003dO(n^2)

2 个嵌套循环 u003dO(n^3)

3 个嵌套循环 u003dO(n^4)

递归:当您添加更多术语时,随着您添加输入而增加的时间会减少

递归:当您根据自身定义某些东西时,一个调用自身的函数

使用* 是因为能够在不同的递归级别保持状态

本身占用空间大
每次调用函数时,都将调用添加到堆栈

迭代:使用循环而不是递归(首选)

有利于可读性胜过性能

O(n log(n))&O(log(n)):除/减半

如果代码采用递归/分治策略
我需要什么电源来为我的基地供电才能获得 n

时间定义

常数:不随输入缩放,将花费相同的时间
对于任何输入大小 n,恒定时间每次执行相同数量的操作
对数:增加它作为输入大小 n 的对数函数执行的操作数
函数 log n 增长非常缓慢,因此随着 n 变长,算法需要执行的操作数不会增加太多
减半
线性:增加它作为输入大小 n 的线性函数执行的操作数
需要执行的额外操作数量与输入大小 n 的增加成正比
对数线性:增加它作为输入大小n的对数线性函数执行的操作数
查看每个元素并处理每个元素
二次:增加它作为输入大小 n 的二次函数执行的操作数
指数:增加它作为输入大小 n 的指数函数执行的操作数
嵌套循环的数量随着 n 的增加而增加
多项式:随着输入大小的增加,使用的运行时间/空间将以更快的速度增长
阶乘:随着输入大小的增加,使用的运行时间/空间将呈天文数字增长,即使输入相对较小
增长率:函数随输入大小增长的速度

[](https://res.cloudinary.com/practicaldev/image/fetch/s--IMbZJpEg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2A5t2u8n1uKhioIzZIXX2zbg.png)### 空间复杂度

当输入变得非常大时,空间使用量如何扩展/变化?
你的算法使用什么辅助空间或者它是否到位(常数)?
除非另有说明,否则运行时堆栈空间计为空间复杂度的一部分。

排序算法

[](https://res.cloudinary.com/practicaldev/image/fetch/s--FZ1c3ZPD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/800/1%2AHhXmG2cNdg8y4ZCCQGTyuQ.png)[](https://res.cloudinary.com/practicaldev/image/fetch/s--wCij0HaP--/c_limit%2Cf_auto%2Cfl_progressive% 2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/800/1%2AULeXxVCDkF73GwhsxyM_2g.png)###数据结构

[](https://res.cloudinary.com/practicaldev/image/fetch/s--q5GZ0zFE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/1200/1%2AhkZWlUgFyOSaLD5Uskv0tQ.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MR8qNYNn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/2560/1%2ACOjzunj0-FsMJ0d7v7Z-6g.png)

有关类似内容,请查看我的 GitHub:

[bgoonz - 概述

Web 开发人员、电气工程师](https://github.com/bgoonz "https://github.com/bgoonz") _https://bryanguner.medium.com/https://portfolio42.netlify .app/..._github.com

通过Bryan Guner上2021 年 5 月 19 日。

规范链接

2021年8月24日从中导出。