Javascript中常用链表的剖析n
nArray
Array（） 是我们在 JavaScript 中经常谈论的代码，今天我们就来讨论一下 JavaScript 中字段的常用方式，有兴趣的同学可以理解一下！n
创建一个字段： 1、构造函数方法：var a1 = new Array（）; 2、文字测量方法：var a2 = [];当只传入一个数字时javascript声明数组，构造函数会创建一个表示链表宽度的字段，而文本链表只有一个数据。n
二、数组的长度属性：数组的长度属性n
数组表示链表的宽度，您可以借助字段的 length 属性将元素附加到链表。n
n
输出：n
n
三、阵列方式：n
1、concat（）：拼接链表，将两个链表拼接在一起，返回一个新的链表。n
n
输出：n
n
2. join（）：以特定的方式拼接链表的每个项目，默认为 “， 拼接。返回串联字符串n
n
输出：n
n
3、反向（）：翻转链表。n
n
输出：n
n
4、sort（）：与匿名函数配合使用，实现链表的气泡排序，a-b为相反顺序，b-a为反向顺序。n
n
输出：n
n
5. 在链表中查找最大值和最小值：n
n
n
6. push（）：从链表末尾追加元素，返回新字段的宽度; 7、pop（）：从链表末尾删除元素，返回已删除的元素;8. unshift（）：从链表的开头插入一个元素，返回新链表的宽度;9、shift（）：从链表开头删除元素，返回已删除的元素;10、slice（a，n）：截取链表，接收两个参数，表示从 a 项开始，截取 n 个元素，返回截取的元素;11、splice（a，n）：删除链表，表示从项目A开始，删除n个元素，也可以接收第三个元素拼接（a，n，b），这意味着从项目A，删除n个项目javascript声明数组，并将B插入到原来的位置，b可以有多个值;12， indexOf（）：返回检索到的元素的索引值;lastIndexOf（）：返回元素在链表中最后一次出现的位置。n
13， valueOf（）：返回链表对象本身;n
14、toString（）：将链表转换成字符串;n
15、filter（）：传入一个匿名函数，过滤链表的每一项，并返回过滤后的元素;n
第四，清空链表：1、arr = []; 2、arr.length = 0; 3、arr.splice（0，arr.length）;n","to":"zh-Hans","sentLen":{"srcSentLen":[54,10,162,108,160,72,148,10,11,10,28,107,10,11,10,102,32,10,11,10,39,10,11,10,141,10,11,11,62,11,11,190,114,98,160,270,65,91,57,58,119,93],"transSentLen":[23,10,86,64,42,21,41,10,7,10,11,40,10,7,9,40,8,10,7,10,16,10,7,10,51,10,7,11,21,11,10,60,35,29,53,92,28,33,27,28,44,68]}}]}]
在本文中，我将通过提供一些最小的例子来展示它们的功能，从而尽可能客观地比较这三个框架。-
-安吉洛斯·查拉里斯
原始文章的有用链接
请访问文章末尾的“原始链接”，以获取可点击的文本链接、全格式原始图像和相关文章。
谢谢
编译自 |
作者|安吉洛斯·查拉里斯
译者|最佳翻译：21篇 贡献时间：969天
在我的上一篇文章[1]中，我试图解释为什么我认为Hyperapp[2]是React[3]或Vue[4]的可用替代品，因为我发现它适合开始。许多人批评这篇文章自以为是，没有给其他框架展示自己的机会。为此，在本文中javascript示例，我将通过提供一些最小的例子来展示它们的功能，从而尽可能客观地比较这三个框架。
一个众所周知的计时器示例
定时器可能是反应式编程最常用的示例之一，并且非常容易理解：
◈ 您需要一个变量计数来跟踪计数器。
◈ 您需要两种方法来降低或减少计数变量的值。
◈ 您需要一种方法来呈现 count 变量并将其呈现给用户。
◈ 您需要在这两种方法上挂载两个密钥，以便在用户与它们交互时更改 count 变量。
以下代码是所有这三个框架的实现：
使用 React、Vue 和 Hyperapp 实现的计数器
这里似乎发生了很多事情，尤其是当您不熟悉其中一个或多个步骤时，因此让我们逐步解释代码
◈ 所有三个框架的底部都有一些导入句子
◈ React 更喜欢面向对象的范式，即创建一类计数器组件。Vue 遵循类似的范式，创建一个新 Vue 类的实例并向其传递信息。最后，Hyperapp 遵循功能范式，同时将视图、状态和操作彼此完全分离。
◈ 对于 count 变量，React 在组件的构造函数中实例化它，而 Vue 和 Hyperapp 分别在其数据和状态中设置此属性。
◈ 继续寻找，你可能会注意到 React 和 Vue 与 count 变量交互的方式相同。React 使用从 React.Component 继承的 setState 来改变它的状态，而 Vue 直接改变 this.count。Hyperapp 使用 ES6 的双箭头句型来实现这一点，据我所知，这是唯一推荐使用这些句型的框架，React 和 Vue 需要在他们的方式中使用它。另一方面，Hyperapps需要状态作为参数，这意味着它们可以在不同的上下文中重用。
◈ 这三个框架的渲染部分实际上是相同的。唯一的细微区别是 Vue 要求将函数 h 作为参数传递给渲染器，Hyperapp 使用 onclick 而不是 onClick，并根据每个框架中实现的方法引用 count 变量。
◈ 最后，所有三个框架都挂载在 #app 元素上。每个框架的句型略有不同，Vue 使用最直接的句子结构，通过使用元素选择器而不是使用元素来提供最大的多功能性。
反案比较意见
同时比较所有三个框架，Hyperapp 需要最少的代码来实现计数器，并且它是唯一使用函数范式的框架。但是，Vue 的代码在绝对宽度上更短，元素选择器的挂载形式是一个很好的改进。React 代码看起来最多，这并不意味着它很难理解。
使用异步代码
从时间到
您可能必须处理异步代码的时间。最常见的异步操作之一是向 API 发送请求。出于此反例的目的，我将使用 [占位符 API] 以及一些虚假数据来呈现文章列表。必须做的事情如下：
◈ 在状态中保存帖子字段
◈ 以某种方式使用正确的 URL 调用 fetch（），等待数据返回，转换为 JSON，最后用接收到的数据更新 posts 变量。
◈ 呈现一个按钮，该按钮将调用抓取文章的方式。
◈ 呈现带有字段的帖子列表。
从 RESTFul API 中抓取数据
让我们分解其中的代码并比较三个框架：
◈ 与前面的技术示例类似，三个框架之间的存储状态、呈现视图和挂载非常相似。此差异与前面的讨论相同。
◈ 在所有三个框架中获取数据都很容易，并且可以按预期工作。但关键是Hyperapp处理异步操作的方式与其他两个框架不同。接收数据并将其转换为 JSON 时，操作将调用不同的同步操作，而不是直接在异步操作中更改状态。
在代码宽度方面，Hyperapp 仍然以最少的代码行数达到相同的结果，Vue 的代码看起来没有那么繁琐，绝对字符宽度也最少。
异步代码比较意见
无论选择哪个框架，异步操作都很简单。在应用异步操作时，Hyperapp 可能会促使您遵守一种编纂功能越来越强大和模块化代码的形式。另外两个框架可以做到这一点，但在这方面为您提供更多选择。
待办事项列表组件示例
也许反应式编程最著名的例子是在每个框架中使用待办事项列表。我不打算在这里实现整个部分，我只是实现一个无状态组件，它展示了三个框架如何创建更小的、可重用的块来帮助构建应用程序。
待办事项实现示例
里面的图片显示了每个框架的反例，并为 React 提供了一个额外的反例。接机是我们从他们四个人身上看到的：
◈ React 是编程范式中最灵活的。它支持函数组件以及类组件。它还支持您在右下角看到的Hyperapp组件，无需任何更改。
Hyperapp 还支持 React 的功能组件实现，这意味着两个框架之间有足够的实验空间。
◈ 最后一个 Vue 有自己合理而奇怪的句型，即使是对其他两个框架有经验的人也无法立即理解其含义。
◈ 在宽度方面，所有的情况代码粗细都非常相似，这在 React 的一些技巧中有点麻烦。
待办事项列表项比较意见
Vue 需要一些时间来适应，因为它的模板与其他两个框架有些不同。React 特别灵活，支持许多不同的方法来创建组件，而 HyperApp 使一切变得简单，并提供与 React 的兼容性，因此您不想在个别时刻切换。
生命周期模式比较
另一个关键的比较是组件的生命周期混乱，其中每个框架都允许您根据需要订阅和处理风暴。下面是我根据每个框架的 API 参考指南创建的表：
生命周期方法比较
◈ Vue 提供了最多的生命周期钩子，提供了处理生命周期风暴之前或之后发生的任何风暴的机会。这可以有效地帮助管理复杂的组件。
◈ 反应和超级应用
具有非常相似的生命周期钩子，React 绑定卸载和删除，Hyperapp 绑定创建和挂载。两者都在处理生命周期风暴方面提供了相当大的控制。
◈ Vue 根本不处理卸载（据我所知），而是依靠销毁风暴在组件生命周期的后期处理它。React 不处理去故事风暴，选择只处理卸载风暴。最终，HyperApp 不会处理创建风暴，而只依赖于安装风暴。
生命周期比较意见
总之，每个框架都提供了生命周期组件，可帮助您处理组件生命周期中的许多事情。这三个框架都为其生命周期提供了钩子，它们之间的细微差异可能源于实现和场景的根本差异。通过更精细的时间处理，Vue 可以更进一步，让你在开始或结束之后处理生命周期混乱。
性能比较
除了易用性和编码技术之外，性能是大多数开发人员的关键动力，尤其是在处理更复杂的应用程序时.js-framework-benchmark [5] 是比较框架的好工具，所以让我们看看每组测量数据字段是怎么说的：
评估操作表
◈ 对于这三个框架，无字段操作比外键操作更快。
◈ 没有字段的 React 在所有六次比较中都有最强的性能，并且在所有测试中的表现都令人印象深刻。
◈ 带字段的 Vue
只比有字段的 React 稍微好一点javascript示例，而没有字段的 Vue 明显比没有字段的 React 差。
Vue 和 Hyperapp 在测试本地更新的性能时遇到了一些问题，而 React 很好地优化了这个问题。
开始测试
Hyperapp 是三个框架中最轻的，而 React 和 Vue 的大小差异特别小。
◈ Hyperapp 具有最快的启动时间，这要归功于其极小的尺寸和极简的 API
Vue 在启动方面比 React 更好，但差异非常小。
内存分配测试
◈ Hyperapp 是两者中资源依赖性最低的，任何一个操作都需要比其他三个操作更少的视频内存。
◈ 资源消耗不是特别高，两者都应该在现代硬件上类似地操作。
性能比较意见
如果性能是一个问题，您应该考虑您正在使用哪种类型的应用程序以及您的要求是什么。似乎 Vue 和 React 更适合更复杂的应用程序，而 Hyperapps 更适合较小的应用程序、较少的数据处理和需要快速启动的应用程序，以及需要在高端硬件上运行的应用程序。
但是，请记住，此测试远不能代表通常的方案，因此您可能会在实际场景中看到不同的结果。
其他说明
比较 React、Vue 和 Hyperapp 在很多方面可能就像比较苹果和橙子一样。有关此框架的其他注意事项可以帮助您决定使用另一个框架。
◈ React 通过引入片段 [6] 绕过了相邻 JSX 元素必须封装在父元素中的问题，这允许您对子元素列表进行分组，而无需向 DOM 添加额外的节点。
◈ React 还为您提供了更高级别的组件 [7]，而 VUE 为您提供了重用组件功能的 MIXIN[8]。
◈Vue 允许使用模板 [9] 来分离结构和功能，从而更好地分离关注点。
与其他两个相比，Hyperapp感觉像是一个较低级别的API，代码要短得多，如果你愿意调整它并了解它是如何工作的，它可以提供更多的多功能性。
推论
我想如果你读了这么多，你已经知道哪个工具更适合你的需求。虽然，这不是讨论哪一个更好，而是讨论哪一个更适合每种情况。总而言之：
◈ React 是一个非常强大的工具，周围有一个庞大的开发者社区，可以帮助你找到工作。入门并不难，掌握它肯定需要很多时间。但是，完全掌握它是值得的。
如果你过去使用过另一个JavaScript框架，Vue可能看起来有点奇怪，但它也是一个有趣的工具。如果 React 不是你喜欢的样子，它可能是一个可行的学习选择。它有一些特别酷的外部功能，它的社区正在下降，甚至可能比 React 还要快。
◈ 最后，Hyperapp 是一个很酷的小框架，适用于大型项目，也是初学者入门的好地方。它提供的工具比 React 或 Vue 少，它可以帮助你快速原型化和理解许多基础知识。您为其编写的大部分代码都与其他两个框架兼容，无论是立即兼容还是稍作修改，并且当您对另一个框架有信心时，您可以切换框架。
作者简介：
热爱编码的Web开发人员，“30秒编码”和mini.css框架的创建者。
通过：
