JavaScript命令式和声明式代码有哪些区别

这篇文章主要介绍“JavaScript命令式和声明式代码有哪些区别”，在日常操作中，相信很多人在JavaScript命令式和声明式代码有哪些区别问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript命令式和声明式代码有哪些区别”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

什么是命令式和声明式代码?

我们可以把我们写代码的方式归为倾向于两种风格中的一种。

要说明的是，一个人的代码从来不会严格地归为一类或另一类，但它是一种有用的方式，指的是我们的代码方式，根据谁或什么最适合。

编写的代码有两种，称为命令式代码或声明式代码。这些听起来很复杂的词代表了非常简单的概念：命令式代码是指我们编写的代码更适合计算机，而声明式代码是指对人更容易读懂的代码。

更具体地说，命令式代码是指我们告诉JavaScript(或任何你正在编码的语言)要做什么以及如何做。

命令式代码以及为什么应避免使用它

命令式编码是你应该避免的一种样式。

假设我们有很多人想写一个生日派对的邀请。先创建我们的人员列表。

接下来，我们也要保存每个书面邀请，因此我们为要放置的邀请函(invitations)创建一个邀请数组。

const people = [‘Doug’, ‘Fred’, ‘Jane’]; const invitations = [];

你可能已经猜到了，我们需要遍历此数组以实现我们的目标。首先，我们将按照JavaScript生命周期中大部分时间都需要使用的方式：使用for循环。如下：

for (let i = 0; i < people.length; i++) {   invitations[i] = `Hi ${people[i]}, come to my party!`; }

根据我提到的步骤，我们要对一个数组进行循环(迭代)，得到每一个元素，一个人的名字，我们将其添加到一个消息(上面的字符串)中，然后将其添加到一个新的数组中。

但是代码讲的是同样的故事吗?

如果我们要读这段代码，我们是将一个变量 i 设置为0，检查它是否小于数组的当前长度，在 i 上加1，将数组的第 i  个值赋值为一个字符串，并将其放在新数组的相同索引中。

这些都是必须的，我们告诉JavaScript做什么和怎么做。所有这些代码都是正确的。

如果我们运行它，我们将收到所有消息，就像我们想要的一样。

然而，你对这段代码的第一直觉(就像我们许多人第一次看到for循环一样)可能是它看起来不太对。

尽管如此，它无疑是该语言生命周期中最流行的遍历数组的方式。然而，阅读和记忆是必要的和具有挑战性的。

声明式代码以及为什么要以声明式风格编写

如果我们以声明性的方式编写它，那会是什么样?

声明式代码则不同。正如名称所示，我们用它来声明我们想要完成的内容，JavaScript会完成它——就这么简单。

换句话说，它对我们人类是可读的，而不仅仅是对计算机。事实上，它对其他开发者的可读性正是我们试图用更多的声明式写作所追求的。

让我们用一种你可能一开始就想使用的风格重写我们的代码，如果你熟悉很多JavaScript有用的数组方法的话。

这是为一系列人员创建一系列邀请的一种(多种)声明式方法。

const invitations = people.map((person) => `Hi ${person}, come to my party!`);

这一切都在一条线上，但同时也更容易理解。它更加简洁，易于书写(和记忆)，同时又非常清晰。

这就是追求声明式代码风格所能提供的。

与第一个例子不同的是，我们不需要创建任何混乱的变量(如  i)，也不需要告诉JavaScript如何通过数组。我们只需对数组进行映射(或迭代)，将每个人的名字添加到我们的邀请函中，然后返回给我们。

到此，关于“JavaScript命令式和声明式代码有哪些区别”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！