微信号:gh_bd8d6a989787

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

JavaScript数组和对象就好比书籍和报纸

2017-07-09 20:50 web前端程序员

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

如果您已阅读过书籍和报纸,则可以了解JavaScript中的数组和对象之间的区别。

刚接触JavaScript时,很容易对如何更好的组织和存储数据感到困惑。

一方面,你最初熟悉数组可能是从学习“for”循环开始。 但是,一旦你开始将尽可能多的数据插入数组,你会遇到无法企及的混乱,以至于当你回顾代码时,不容易理解。

当您可以快速确定每个结构的目的时,在对象和数组之间进行选择会变得更加容易。 数组非常类似图书存储信息的方式。 对象则类似报纸存储信息的方式。

我们一起来看看吧!


数组:有序数据很重要

以下是数组形式表示的超级简短书籍列表例子。

好的,我承认,那是哈利波特第一本书的前三章。 以下是数组的视觉化形式。

当顺序是组织信息最重要的因素时,请使用数组。 此处章节的顺序告诉你下一个阅读哪一章。

从数组中检索信息时,可以使用每个元素的索引。 数组为0索引,这意味着它们以0而不是1开始计数。

访问books数组的索引0,则可以使用:

于是得到如下结果:

如果想了解本书第三部分的名称,使用:

可以根据书中的章节顺序选择下一步阅读哪些部分,而不是基于本章的标题。


对象:数据标签是最重要的

以下是用对象形式表示的例子,有点像阅读报纸。

以下是对象的视觉化形式。

当您想根据数据标签组织信息时,请使用对象。 当你阅读报纸时,你可能不会从前面到后面逐页阅读。 可能会根据该部分的名称翻到某一部分。 无论报纸上的哪一部分都可以,您可以立即翻到,并找到想读的部分。 这不同于阅读一本书,章节/部分的顺序很重要。

对象通过“键/值对”来组织信息。 看起来像这样:

如果您想访问报纸的“商业”部分,您将使用如下所示的关键字:

或者:

这将返回值“GE股票再次下跌”。 因此,最简单的方法是根据标签(键)访问数据,您需要将其存储在对象中。


组合对象和数组

到目前为止,我们已经将字符串存储在数组和对象中。 您还可以存储其他基本数据类型,如数值型和布尔型,以及:

1.在对象内使用数组

2.在数组内使用对象

3.数组嵌套数组

4.对象嵌套对象

以上情况都很复杂。 但是,几乎总是需要两者的组合来以可扩展的方式存储数据。 例如一周之后当你需要重新回顾代码时,你想要首先理解代码。

我们再来看一下这本书的例子。 如果我们也想存储每一章的页数怎么办? 这种情况可能最好用对象填充数组。 如下所示:

我们保持了我们章节的顺序,现在我们能命名每一章的具体属性。 所以,如果我们想知道第二部分的页数,我们将使用:

以上代码将返回结果值18

现在我们假设要根据资历,查看当地报纸每一部分的顶尖作家的排名。 就可以在报纸对象中的数组中表达,如下所示:

数组很适合存储作家信息,因为顺序很重要。 你知道早期作家的排名高于每个数组中的后期作家。 索引为0的作家是排名第一的作家。

可以通过在报纸对象内创建对象来优化此对象。 例如,具有标题和作者列表的运动对象。 这个留给你来尝试!


给你准备的一些问题

1.假设你的web应用程序有一个测验部分,用户可以回答一些问题,然后在最后得到一个分数。 您想要存储用户对每个问题的答案,最后来有效地检查它们。 在检查之前,您将使用哪种结构存储所有用户的答案? 为什么?

2.假设允许用户在网站上创建一个新的个人资料,名字,姓氏,电子邮件和密码。 您要将数据发送到后端之前先存储。 您将使用哪种结构来存储所有新用户的信息? 为什么?

3.假设正在建立一个论坛网站,您需要根据投票数对评论进行排名。 当需要跟踪评论本身的文本和投票数时,哪种结构最有意义? 提示:某两种类型的组合。


如果你认为这可能会帮助其他与你一样的人,给它点一个“赞”!


英文原文:https://medium.freecodecamp.com/javascript-arrays-and-objects-are-just-like-books-and-newspapers-6e1cbd8a1746
译者:LJ


 
web前端程序员 更多文章 Unicode中的一个神奇特性: Emoji.prototype.length 使用可重用的JavaScript函数来处理CSS的管理状态 使用指针事件API处理鼠标和触摸输入 React将会接管前端开发的原因 JavaScript的功能:将方法从对象中解耦
猜您喜欢 软件测试面试 (一) 如何测试一个杯子 伏天已至!听说这些已称霸夜宵界! 张子阳:如何在 30 岁前年薪超过 XXX 万 ASP.NET Core 发布至Linux生产环境 Ubuntu 系统 为什么这段代码输出的是”Hello World”