Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the difference between JavaScript imperative code and declarative code". In daily operation, I believe many people have doubts about the difference between JavaScript imperative code and declarative code. I have consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "what is the difference between JavaScript imperative code and declarative code"! Next, please follow the editor to study!

What is imperative and declarative code?

We can classify the way we write code as one of two styles.

To be clear, a person's code is never strictly classified as one or another, but it is a useful way to refer to the way we code, depending on who or what is most appropriate.

There are two types of code written, called imperative code or declarative code. These complex-sounding words represent a very simple concept: imperative code means that the code we write is more suitable for computers, while declarative code is code that is easier for people to understand.

More specifically, imperative code means that we tell JavaScript (or any language you are coding) what to do and how to do it.

Imperative code and why it should be avoided

Imperative coding is a style you should avoid.

Suppose many of us want to write an invitation to a birthday party. First create our personnel list.

Next, we will also save each written invitation, so we create an array of invitations for the invitations (invitations) to be placed.

Const people = ['Doug',' Fred', 'Jane']; const invitations = []

As you may have guessed, we need to traverse this array to achieve our goal. First, we will do what we need to use for most of the JavaScript life cycle: using for loops. As follows:

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! `)

It's all in the same line, but it's also easier to understand. It is more concise, easy to write (and remember), and at the same time very clear.

This is what the pursuit of declarative code style can provide.

Unlike the first example, we don't need to create any messy variables (such as I), nor do we need to tell JavaScript how to pass the array. We just need to map (or iterate over) the array, add everyone's name to our invitation, and then return it to us.

At this point, the study on "what is the difference between JavaScript imperative code and declarative code" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.