This article is a beginner's introduction to JavaScript arrays and data structures. It covers why we need them, and how they fit into the front-end context.
本文是JavaScript数组和数据结构的初学者介绍。 它涵盖了我们为什么需要它们，以及它们如何适应前端环境。
介绍 (Introduction)
When I first started learning to program, I would regularly encounter concepts that were hard to fit into the big picture. Coming from a non-traditional background I found words like "data structures" and "arrays" often difficult to place in a context that made sense. Or why they were needed for front-end development at all.
当我刚开始学习编程时，经常会遇到难以适应的概念。 来自非传统背景，我发现诸如“数据结构”和“数组”之类的词通常很难放置在有意义的上下文中。 还是为什么根本需要它们进行前端开发。
Nowadays data and arrays are part of my daily diet as a front-end developer. But I still remember all that early confusion. My aim here is to give a high-level overview designed for people who have no engineering background. And to place it all in a realistic context.
如今，作为前端开发人员，数据和数组已成为我日常工作的一部分。 但是我仍然记得所有这些早期的困惑。 我的目的是为没有工程背景的人提供高层次的概述。 并将其置于现实环境中。
In this article, we will talk about what data is and how we organise it. We will examine data structures focusing only on arrays to keep things clear. And we will look at why we need it.
在本文中，我们将讨论什么是数据以及如何组织 数据 。 我们将检查仅专注于数组的数据结构，以使情况保持清楚。 我们将研究为什么需要它。
设置 (The setup)
Let’s imagine that we are working on an online platform that allows us to do our supermarket shopping from a website. That's a real-world application of the things we want to talk about here.
假设我们正在一个在线平台上工作，该平台使我们可以从网站上进行超市购物。 这是我们要在此处讨论的事情的真实应用。
Take a look at Lola Market, which is where I work, for an example of how this would look like.
看看我工作的劳拉市场 ( Lola Market) ，举一个例子。
Our website is going to show a list of products. This is going to be our starting point to talk about data and organising it in a context that mimics things we do every day in the front end.
我们的网站将显示产品列表。 这将是我们讨论数据并在模拟我们每天在前端执行的操作的上下文中进行组织的起点。
数据到底是什么？ (What even is data?)
Before we start talking about how we organise data, let's try to understand what data means in our context. And where this data comes from.
在开始讨论如何组织数据之前，让我们尝试了解数据在我们的上下文中的含义。 以及这些数据的来源。
When you are working in the digital domain it’s helpful to remember that everything is data. Everything is bits stored in binary.
当您在数字领域工作时，记住所有东西都是数据会很有帮助。 一切都是以二进制存储的位。
Now while that might be interesting, it is so general that it is of no help to us. So for our purposes, we will focus on a narrow idea of what data is. The one which is most immediately relevant. Take a look at the following list:
现在，尽管这可能很有趣，但它太笼统了，对我们没有帮助。 因此，出于我们的目的，我们将重点关注什么是数据。 最直接相关的一个。 看一下以下列表：
This reduced list is an example of the kind of products you can find on this website we are building. This list is our data: mushrooms, steak, fish, aubergines, and lentils.
此简化列表是您可以在我们正在构建的此网站上找到的产品类型的示例。 此列表是我们的数据：蘑菇，牛排，鱼，茄子和小扁豆。
那么这些数据从哪里来呢？ (So where does this data come from?)
Data can live directly in your app, in your front-end code. But more commonly it comes from some outside source. Usually, this data is stored in a database.
数据可以直接在您的应用程序中以前端代码形式存在。 但更常见的是，它来自某些外部来源。 通常，此数据存储在数据库中。
The front end makes a request to the database and receives this data as a response. Once it has arrived into our front-end app, it is time for us to do what we need with it. For example, show the product name on the website, style it, and add any functionalities needed (such as an “add to cart” button).
前端向数据库发出请求，并接收此数据作为响应。 一旦它进入我们的前端应用程序，该是我们做它需要做的时候了。 例如，在网站上显示产品名称，设置其样式并添加所需的任何功能(例如“添加到购物车”按钮)。
Take a look at any of the popular shopping websites and you'll see the same pattern. It will have a list of products presented in a certain style with various functionalities and other information about it.
看看任何流行的购物网站，您都会看到相同的模式。 它将具有以某种样式呈现的产品列表，并具有各种功能和其他有关信息。
我们如何组织数据？ (How do we organise data?)
So we have established that this list of products is our data. Now we have to package this data in some sort of a container. This will enable us to organise it, move it around, and later access it and do stuff to it.
因此，我们已经确定该产品列表就是我们的数据。 现在，我们必须将此数据打包在某种容器中。 这将使我们能够对其进行组织，四处移动以及以后访问它并对其进行处理。
One of the most common ways to organise data that you will work with frequently is called an array. Here’s what an array looks like:
组织经常使用的数据的最常见方法之一就是数组 。 这是数组的样子：
The syntax looks simple enough. You create an array with the square brackets []. And separate the individual elements with a comma ,. If your data is made up of strings put each element inside quotes or double quotes ''. String loosely means a bunch of characters representing text, like words and sentences.
语法看起来很简单。 您创建一个带有方括号[]的数组。 并用逗号分隔的各个元素, 。 如果您的数据由字符串组成，则将每个元素放在引号或双引号'' 。 字符串松散地表示一堆代表文本的字符，例如单词和句子。
And that’s it. You have just organised your data in a single package called an array. And we can do lots of things with this now. You can think of an array as merely a container that allows us to put data inside, organise it in a certain structure, and permits us to do things with it.
就是这样。 您刚刚将数据组织在一个名为array的单个包中。 现在，我们可以做很多事情。 您可以将数组看作只是一个容器，它使我们可以将数据放入内部，以一定的结构组织数据，并允许我们对其进行处理。
An array is one example of what we call data structures. These are the various ways we use to organise data. There are a lot of them, but the two most common ones in the front end are arrays and objects.
数组是我们所谓的数据结构的一个例子。 这些是我们用来组织数据的各种方式。 它们很多，但是前端最常见的两个是数组和对象。
So now what do we do with this?
那么，现在我们该怎么办？
我们为什么需要数组？ (Why do we need arrays?)
We need arrays and other data structures in the front end because almost everything we deal with is data. And that needs to be organised in a way that we can work with.
我们在前端需要数组和其他数据结构，因为我们处理的几乎所有内容都是数据。 这需要以一种我们可以合作的方式进行组织。
In our example, once we receive the products' array we can write the logic that takes each product and displays its name on our website. But how do we select each item from the array and do things to it?
在我们的示例中，一旦我们收到产品的数组，我们就可以编写逻辑以获取每个产品并在我们的网站上显示其名称。 但是，我们如何从数组中选择每个项目并对其进行处理呢？
In this article below, I explain just that. I take our example to the next step and talk about how loops come into play to start processing our data - check it out!
在下面的这篇文章中，我将对此进行解释。 我将以我们的示例为下一步，并讨论循环如何开始处理我们的数据-进行检查！
https://www.freecodecamp.org/news/what-in-the-world-is-a-javascript-loop-for/
https://www.freecodecamp.org/news/what-in-the-world-is-a-javascript-loop-for/
结论 (Conclusion)
So, to recap. For our online supermarket, we have a bunch of products and that's our data. We saw how we organise this data into data structures like the array. This is usually stored in a database. We can then request this data. And once it “arrives” to our front-end app from the database we can start processing it and doing things with it. Hopefully, this has given you a better idea of why we need this in our front end.
因此，回顾一下。 对于我们的在线超市，我们有很多产品，这就是我们的数据。 我们看到了如何将这些数据组织成数组之类的数据结构。 通常将其存储在数据库中。 然后，我们可以请求此数据。 一旦它从数据库“到达”我们的前端应用程序，我们就可以开始处理它并使用它来做事。 希望这可以使您更好地了解我们为何在前端需要此功能。
Of course, there is more to data structures than arrays made up of strings. Below, I leave you with a little more information to expand your understanding. Things you may want to look at next to understand these concepts more comprehensively.
当然，数据结构比由字符串组成的数组还重要。 下面，我为您提供更多信息，以增进您的理解。 接下来可能需要看的内容才能更全面地理解这些概念。
The first port of call to search for information for me is always MDN. It's one of the most reliable sources of information for developers.
为我搜索信息的第一个呼叫端口始终是MDN 。 对于开发人员来说，它是最可靠的信息来源之一。
Data structures: Apart from arrays you will quickly need to get familiar with objects. That’s an even more common data structure. In fact, understanding objects is essential to understanding JavaScript as a whole.
数据结构：除了数组之外，您还需要快速熟悉对象 。 那是一个更常见的数据结构。 实际上，了解对象对于全面了解JavaScript至关重要。
Data types: The data we worked with here was made up of
strings. But there are a few more types of data likenumbersandbooleans(true or false) that you will need to understand.数据类型：我们在这里使用的数据是由
strings。 但是，您还需要了解其他一些类型的数据，例如numbers和booleans(对或错)。Requests: We briefly mentioned how usually we would make a request to our database to get the data we need to use. Working with APIs,
fetch(), making requests and handling the response is an advanced topic that you can safely leave for later. But one that’ll be essential by the time you are starting to interview for a developer job.请求：我们简要提到了通常如何向数据库发出请求以获取需要使用的数据。 使用API
fetch()，发出请求和处理响应是一个高级主题，您可以放心地留待以后使用。 但是，当您开始为开发人员工作面试时，这将是必不可少的。
关闭 (Closure)
Thanks for reading. I hope you found this useful. And if you enjoyed it, sharing it around would be greatly appreciated. If you have any questions or comments I’m on Twitter @Syknapse and I would love to hear from you.
谢谢阅读。 希望您觉得这有用。 并且，如果您喜欢它，与周围分享它将不胜感激。 如果您有任何疑问或意见，我在Twitter @Syknapse上 ，我希望收到您的来信 。
My name is Syk and I’m a front-end developer at Lola Market in Madrid. I career-changed into web dev from an unrelated field, so I try to create content for those on a similar journey. My DMs are always open for aspiring web developers in need of some support. You can also read about my transformation in this article.
我叫Syk，是马德里Lola Market的前端开发人员。 我从一个无关领域转变为Web开发人员，因此我尝试为类似旅程中的人员创建内容。 我的DM总是向有需要的Web开发人员开放。 您还可以在本文中了解我的转型。
翻译自: https://www.freecodecamp.org/news/what-in-the-world-is-a-javascript-array/
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
