js数组

「爱情、让人受尽委屈。」 2023-07-16 12:59 22阅读 0赞

## 数组概念 ##

所谓的数组,就是数据的集合
        基本数据类型 : 在变量中只能存储一个单元的数据;
        数组,是数据的集合,可以存储多个单元的数据，所以它也属于复杂数据类型

## 数组的创建方式 ##

**数组的创建方法有两种：**

1.字面量方式
        var 变量 = [ 数据1 , 数据2 , 数据3 , ..... ];
        在 [] 中,定义多个数据单元,中间使用逗号间隔
    
        数组中的数据单元,可以是任意形式的数据内容
        如下图:可以是一个数组,对象,函数

![在这里插入图片描述][20200318191927803.png]

2.构造函数方式 
       	 var arr2 = new Array();
       	 通过关键词new创造一个空数组然后再向这个数组中添加单元
         这是JavaScript的固定语法,必须这么写
         一般不用这种方式来定义数组
    
         调用构造函数 Array() 通过 new 关键词,来生成数组的实例化对象,存储在变量中
         new 是JavaScript的关键词
         Array() 是JavaScript定义好的构造函数,可以直接使用
    
         数组是JavaScript中,一个非常重要的数据类型
         后端接口返回给我们的数据行是,往往都是数组的形式

![在这里插入图片描述][20200318192737658.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]  
**数组的简单操作**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]

## 数组中数据的调用方式 ##

**一维数组：** 只有一层的数组不带嵌套数组的就为一维数组

(1) 索引下标
         JavaScript程序给数组中的每一个单元都定义了一个编号,是从0开始的整数
         一维数组中,数据的调用,是,正常的调用方法,数组变量[索引]；
         通过索引下标,就可以获取到对应的具体某一个数据，如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]  
**注意：** 一般只在\[\]中写一个索引下标，因为数组单元只能一个一个获取。

**二维数组：** 二维数组就是一个嵌套数组， 第一层的数组,我们称为 一维数组，第二层的数组,我们称为 二维数组  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 4]

数组的length属性
       是数组特有的属性,表示数组的长度,也就是单元的个数
       数组中最大的索引下标 是 length-1 
       获取length属性值 :  数组变量.length

## 数组的简单实例 ##

这个简单的实例就是模拟从后端数据库取到的数据在页面上渲染显示出来  
在这里是指把数组里的数据放到表格里在网页上显示出来。

**HTML和CSS代码如下：** 主要就是创建表格的表头，加点样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 5]  
**js代码如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 6]  
上述代码创建了一个数组，里面又嵌套了数组，所以这是二维数组。在这里我定义了一个函数进行封装，输入参数是获得的标签id。

首先定义个变量用来存储数据，外层循环是为了创建行，对应的就是一维数组中数据单元的个数，str字符串拼接进行创建行标签，行标签分开是因为内层循环输出的数据是在一行中。多加上`<td></td>`是因为表格里从序号开始，但是二维数组中是从姓名开始，多创建个单元格用来放序号。

内层循环是给每行的每个单元格输入数据，同样使用字符串拼接创建单元格并加入数据，内层循环结束后不要忘记把行标签的另一半进行拼接。

最后就是把字符串内容赋值给指定的标签（即传入的参数），显示在网页上。字符串中的标签会被自动解析并创建出来。`innerHTML`就是像指定的标签中写入内容

**注意 :** 通过 id属性值,可以直接操作标签,只能是id属性值，因为id就像身份证是唯一的  
但这是不规范的，在后面会通过DOM对象获得标签进行操作。

[20200318191927803.png]: /images/20230528/fdb4839879f74286b1f3a1ca43621ac6.png
[20200318192737658.png]: /images/20230528/a998a23d4e7c40b99f5e2ad605d28f80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]: /images/20230528/4d8ab94c5c6847fb8b68a42b9601ea23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]: /images/20230528/18d0a408eb524449b36a1d733477939e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]: /images/20230528/e9b304a4dce0406980c7d43bdcfdcf4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 3]: /images/20230528/4cab7bb1cf5147428bd6103a4dc26804.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 4]: /images/20230528/4bd12e50703c4309afc540cff86708d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 5]: /images/20230528/9a414821937b4e1d8f80543b9d073275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 6]: /images/20230528/7bbeeebf86ec49ada2ee5ecadb903c3f.png