JavaScript中数组的相关知识介绍

水深无声 2024-03-23 18:57 47阅读 0赞

![8ba467226743299912f421c6dffea6ba.jpeg][]

本文主要介绍了JavaScript中中数组的相关知识,是JS入门学习中的基础知识,需要的朋友可以参考下

**创建数组**

js中数组的声明可以有如下几种方式：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code> <code>arr = [];&nbsp; </code><code>// 简写模式</code> <code>var</code> <code>arr = </code><code>new</code> <code>Array(); </code><code>// new一个array对象</code> <code>var</code> <code>arr = </code><code>new</code> <code>Array(arrayLength); </code><code>// new一个确定长度的array对象</code> </td> 
 </tr> 
 </tbody> 
</table>

要说明的是：

*  虽然第三种方法声明了数组的长度，但是实际上数组长度是可变的。也就是说，即使指定了长度为5，仍然可以将元素存储在规定长度之外，这时数组的长度也会随之改变。
 *  此外，还需要明确的一点：
 *  js是弱类型语言，也就是数组中的元素类型不需要一样。

举个数组中元素类型不一致的例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>var</code> <code>arr = [1, 2, 3, 4, </code><code>'wangzhengyi'</code><code>, </code><code>'bululu'</code><code>];</code> <code>for</code> <code>(</code><code>var</code> <code>i = 0; i &lt; arr.length; i ++) { </code> <code>&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**数组元素访问**

JavaScript数组的索引值也是从0开始的，我们可以直接通过数组名+下标的方式对数组元素进行访问。

示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code> <code>arr = [1, 2, 3];</code> <code>console.log(arr[0]);</code> <code>console.log(arr[1]);</code> </td> 
 </tr> 
 </tbody> 
</table>

此外，数组的遍历推荐使用连续for循环的模式，不推荐for-in，具体原因参考：Loop through array in JavaScript

遍历数组示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>var</code> <code>arr = [1, 2, 3, 4, </code><code>'wangzhengyi'</code><code>, </code><code>'bululu'</code><code>];</code> <code>for</code> <code>(</code><code>var</code> <code>i = 0, len = arr.length; i &lt; len; i ++) { </code> <code>&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

注意：

上述代码中，一个小优化在于提前获取数组的大小，这样不需要每次遍历都去查询数组大小。对于超大数组来说，能提高一定的效率。

**添加数组元素**

有三种方法可以往一个数组中添加新的元素，分别是：push、unshift、splice。下面我分别来介绍一下这三种方法。  
**push**

push方法，在数组末尾添加元素。示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>var</code> <code>arr = [];</code> <code>arr.push(1);</code> <code>arr.push(2);</code> <code>arr.push(3);</code> <code>for</code> <code>(</code><code>var</code> <code>i = 0, len = arr.length; i &lt; len; i ++) { </code> <code>&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

执行结果为：

**unshift**

unshift方法，是在数组头部添加元素。示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>var</code> <code>arr = [];</code> <code>arr.unshift(1);</code> <code>arr.unshift(2);</code> <code>arr.unshift(3);</code> <code>for</code> <code>(</code><code>var</code> <code>i = 0, len = arr.length; i &lt; len; i ++) { </code> <code>&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

执行结果如下：

**splice**

splice方法是在数组的指定位置插入新元素，之前的元素则是自动顺序后移。注意splice的函数原型为：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>array.splice(index, howMany, element...)</code> </td> 
 </tr> 
 </tbody> 
</table>

howMany表示要删除的元素个数，如果只是添加元素，此时howMany需要置为0。

示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>var</code> <code>arr = [1, 2, 3, 4];</code> <code>arr.splice(1, 0, 7, 8, 9);</code> <code>for</code> <code>(</code><code>var</code> <code>i = 0, len = arr.length; i &lt; len; i ++) { </code> <code>&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

执行结果如下：

**删除数组元素**

与增加数组元素一样，删除数组中的元素也有三个方法，分别是：pop、shift和splice。接下来，分别讲解一下这三个函数的用法。  
**pop**

pop方法是移除数组中的最后一个元素。push和pop的组合可以将数组实现类似于栈（先入后出）的功能。示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>var</code> <code>arr = [];</code> <code>arr.push(1);</code> <code>arr.push(2);</code> <code>arr.push(3);</code> <code>while</code> <code>(arr.length != 0) { </code> <code>&nbsp;&nbsp;</code><code>var</code> <code>ele = arr.pop();</code> <code>&nbsp;&nbsp;</code><code>console.log(ele);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**shift**

shift方法是移除第一个元素，数组中的元素自动前移。（这种方法肯定对应着效率问题，时间复杂度是O(n)）。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>var</code> <code>arr = [];</code> <code>arr.push(1);</code> <code>arr.push(2);</code> <code>arr.push(3);</code> <code>function</code> <code>traverseArray(arr) { </code> <code>&nbsp;&nbsp;</code><code>for</code> <code>(</code><code>var</code> <code>i = 0, len = arr.length; i &lt; len; i ++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>while</code> <code>(arr.length != 0) { </code> <code>&nbsp;&nbsp;</code><code>var</code> <code>ele = arr.shift();</code> <code>&nbsp;&nbsp;</code><code>traverseArray(arr);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

大家可以自己考虑运行结果。  
**splice**

在增加数组元素的时候，我们就讲过splice，这个函数原型中有一个howMany参数，代表从index开始删除之后的多少个元素。  
示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>var</code> <code>arr = [1, 2, 3, 4, 5, 6, 7];</code> <code>function</code> <code>traverseArray(arr) { </code> <code>&nbsp;&nbsp;</code><code>for</code> <code>(</code><code>var</code> <code>i = 0, len = arr.length; i &lt; len; i ++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>arr.splice(1, 3);</code> <code>traverseArray(arr);</code> </td> 
 </tr> 
 </tbody> 
</table>

执行结果为：

**数组的拷贝和截取**

举个例子，代码如下：

这个时候，arr2只是保存arr1数组在堆内存的地址，并没有在堆内存重新申请内存搞一个数组出来。所以对arr2的修改会同时影响到arr1。因此，如果我们需要拷贝一份数组该怎么做呢？这就引出了需要学习的slice和concat函数。  
**slice**

这里的slice和python语法的slice是一样的，都是返回数组的切片。slice函数原型为：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>array.slice(begin, end)</code> </td> 
 </tr> 
 </tbody> 
</table>

返回从begin到end的所有元素，注意包含begin，但是不包含end。  
缺省begin，默认从0开始。缺省end，默认到数组末尾。

因此，拷贝数组我们可以通过如下代码实现：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>var</code> <code>arr1 = [1, 2, 3, 4];</code> <code>var</code> <code>arr2 = arr1.slice();</code> <code>arr2[2] = 10000</code> <code>function</code> <code>traverseArray(arr) { </code> <code>&nbsp;&nbsp;</code><code>for</code> <code>(</code><code>var</code> <code>i = 0, len = arr.length; i &lt; len; i ++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(arr[i]);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>traverseArray(arr1);</code> <code>traverseArray(arr2);</code> </td> 
 </tr> 
 </tbody> 
</table>

执行结果如下：

**concat**

concat方法将创建一个新数组，然后将调用它的对象(this 指向的对象)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组.

示例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>var</code> <code>alpha = [</code><code>"a"</code><code>, </code><code>"b"</code><code>, </code><code>"c"</code><code>];</code> <code>var</code> <code>number = [1, 2, 3]</code> <code>// 新数组为["a", "b", "c", 1, 2, 3]</code> <code>var</code> <code>complex = alpha.concat(number);</code> </td> 
 </tr> 
 </tbody> 
</table>

来源：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[8ba467226743299912f421c6dffea6ba.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ad2a1e8a4e9a4f3e9905a5fc846052c2.png
[Link 1]: https://www.weidianyuedu.com