在上一篇JS中的Arrays中 ,我们了解了什么是数组,如何在其中存储数据以及可以在数组上使用以获得某些结果的一些方法。
在这篇文章中,我们将通过从头开始构建我们自己的数组来更深入地了解数组,老实说,我认为在某些情况下您不需要弄清楚如何构建自己的数组因为当今大多数语言(如果不是全部)都预先内置了数组。
但是,真正,深入地了解某些方法在幕后的工作方式绝不是一个坏主意,它可以使您对数组有更多的了解,而不会对数组感到困惑,我们有很多事情需要解决,就像您在阅读本文或其他内容时应该喝浓缩咖啡或卡布奇诺咖啡一样。
现在,我将其留给您,我已经准备好自己的一杯热腾腾的热卡布奇诺咖啡,让我们直接开始吧!
另外,我将使用JavaScript进行解释,如果您想以其他语言实现数组,则某些事情可能会有所不同,并且您将需要弄清楚如何使其工作。
创建结构
在开始创建结构之前,JavaScript中的数组有些不同,因为它们只是具有基于整数的键的对象,这些键用作索引,而这正是我们在此构建的目标。
我们将从创建一个名为NewArray的类开始,并在创建该类后立即向其提供某些信息,在本例中为两个:
第一个是长度,因为如果您还记得我们可以使用length属性确定数组的长度,则基本上可以告诉我们该数组包含多少个项目。第二个是需要存储在数组中的数据,这将是一个对象。
现在,我们需要提供一些初始值,这些初始值将在创建类后立即分配给该类,为此,我们使用了构造函数,构造函数是创建类时首先调用的方法。
![](https://i-blog.csdnimg.cn/blog_migrate/40b4375dda7c85149877027c41811076.png)
获取方法
现在我们有了数组的结构,我们需要能够在数组上执行某些操作,因此让我们开始创建可用于访问数组的Get方法。
Get方法将获取索引,并仅返回索引中存在的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/dd0376de2ae25a28eabd15001d36d333.png)
现在,如果您想了解它是如何工作的,我们可以使用JavaScript中的new关键字实例化该类,让我们看一下:
![](https://i-blog.csdnimg.cn/blog_migrate/7caeb36062a4568f53b87b6206b392c1.png)
推送方式
现在我们可以访问数组了,让我们在数组中添加一些项。 我们将创建push方法在数组末尾添加一些内容。
我们将给push方法一个值,这是我们要存储在数组中的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/918568f77ccb40d338de57f88652af65.png)
现在在上面的代码中,我们使用this.length,因为如果您记得我们将其初始化为0,那么基本上我们将数据项压入0-index并将数据项存储在0-index之后,我们增加了长度将数组的值乘以1,因此如果再次执行推入操作,则会将其存储在下一个索引中,在本例中为1。
因此它将工作如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c164e0e7e124acfc7d410ab95ad5548a.png)
我们可以清楚地看到,我们已经将数组中的第一个元素压入了! 现在我们的数组长度为1,并且我们有数据,其中有键或索引0,其值为字符串hello。
弹出法
好了,现在推送工作正常,让我们开始从数组中删除一些项目。 pop方法不使用任何值,它从数组中删除最后一项。
![](https://i-blog.csdnimg.cn/blog_migrate/f8488f26bde590164bd2290fd80df02c.png)
现在您将注意到我已经将刚从数组中删除的最后一项存储在变量中,这是因为通常,pop方法返回已删除的项,这就是我们在这里所做的。
我也将数组的长度减少了一个,因为显然我们刚刚从数组中删除了一个项目。
在上述方法中,我们还使用了delete运算符,它的基本作用是从Object上删除属性。 在我们的例子中,假设数组中的项目数为5,这意味着this.data [this.length – 1]转换为this.data [4],基本上删除了最后一个元素。
![](https://i-blog.csdnimg.cn/blog_migrate/8395df0121c091e5eaba346b8c3fd508.png)
删除方式
现在我们可能要使用项目的索引删除项目,让我们为此创建一个方法。
现在,关于数组的一个非常特别的事情是它们是有序的,因此,如果要说从数组中间删除一个项目,则需要将删除的项目之后所有元素的索引移动一个。
因此,一个大小为5的数组,如果我们删除索引2上的项目(即第三个元素),则需要移动第4个元素和第5个元素的索引,以免在数组中间留下空白。
![](https://i-blog.csdnimg.cn/blog_migrate/e1e08372cc7223326eae7a5d0c1cb773.png)
现在让我们看一下结果如何:
![](https://i-blog.csdnimg.cn/blog_migrate/8c19e16989f388f681b5d6a985957ab7.png)
我们已成功从索引中删除了一项!
也可以将此方法扩展为删除一系列元素,但这是我希望你们做的事情,并且还尝试实现数组的其他方法。
因此,现在您有了一个关于如何实现自己的数组的想法,并且可以根据需要进行扩展。
最终密码
![](https://i-blog.csdnimg.cn/blog_migrate/78154b208879375258ae58af33ea53c2.png)
如果您有任何疑问,希望您喜欢这篇文章! 并且随时扩展代码并向数组添加更多方法。
别忘了关注我的社交网站– LinkedIn , Twitter , Discord
先前发布在https://bucketofcode.com/build-an-array-from-scratch-in-javascript/
From: https://hackernoon.com/build-an-array-from-scratch-in-javascript-uc4s3yqw