JavaScript数组的学习整理-优快云博客

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/104955667

本文深入讲解JavaScript数组的概念，包括数组的创建方法、数据调用、嵌套数组及length属性的使用，通过实例演示如何利用数组生成页面中的table表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

数组的创建方式：
①字面量方式
var 变量 = [ 数据1 , 数据2 , 数据3 , … ];
在 [] 中定义多个数据单元，中间使用逗号间隔
创建一个变量存储数组，数组中有5个数据单元
数组中的数据单元可以是任意形式的数据内容，当然也可以是一个数组、对象、函数

var arr1 = [1,2,3,4,5,'北京','上海',true,false,undefined,null,[6,7,8,9,10],{name:'张三'},function fun(){console.log}];
console.log(arr);

②构造函数方式——创造一个空数组，然后再向这个数组中添加单元
这是JavaScript的固定语法，必须这么写
一般不用这种方式来定义数组
调用构造函数 Array() 通过 new 关键词,来生成数组的实例化对象，存储在变量中
new 是JavaScript的关键词
Array() 是JavaScript定义好的构造函数,可以直接使用

var arr2 = new Array();
console.log(arr2);

数组的简单操作：
①定义数组

// 字面量方式↓
var arr = [1,2,3,4,5];
console.log(arr);
// 内置构造函数方式↓
var arr2 = new Array();

②调用数据的数据
JavaScript给数组中的每一个单元都定义了一个编号，是从0开始的整数。通过索引下标，就可以获取到对应的具体某一个数据

var arr = [3,6,9,12,15];
console.log( arr[0] );// 调用索引下标是0的第一个单元的数据，结果为3  
console.log( arr[1] );// 调用索引下标是1的第二个单元的数据，结果为6
console.log( arr[2] );// 调用索引下标是2的第三个单元的数据，结果为9
console.log( arr[3] );// 调用索引下标是3的第四个单元的数据，结果为12
console.log( arr[4] );// 调用索引下标是4的第五个单元的数据，结果为15
console.log( arr[400] );// 调用不存在的索引下标,执行结果是undefined
console.log( arr[0,1] );// []中写两个索引,不会同时调取两个数据,后面的会覆盖前面的，结果为6

③嵌套数组

// 第一层的数组称为一维数组
// 第二层的数组称为二维数组
//一维数组中,数据的调用是正常的调用方法,数组变量[索引]
var arr2 = [ '北京' , '上海' , '广州' , ['a' , 'b' , 'c' , 'd'] ];
console.log(arr2);
console.log(arr2[0])     // 北京
console.log(arr2[1])     // 上海
console.log(arr2[2])     // 广州
console.log(arr2[3])     // 二维数组['a' , 'b' , 'c' , 'd']
console.log(arr2[3][0])  // 二维数组中,索引下标是0的第一个单元 a
console.log(arr2[3][1])  // 二维数组中,索引下标是1的第二个单元 b
console.log(arr2[3][2])  // 二维数组中,索引下标是2的第三个单元 c
console.log(arr2[3][3])  // 二维数组中,索引下标是3的第四个单元 d

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

数组的应用（有点难）

// 根据数组的内容,生成页面中的table表格

        // 从数据库或者接口获取到的数据信息,往往都是数组形式，而且基本都是二维数组形式
        // 建立数组,模拟本地数据信息
        var arr = [
            ['张123',18,'北京','男'],
            ['李四',19,'上海','女'],
            ['王五',20,'广州','男'],
            ['赵六',21,'重庆','女'],
        ];
        // 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
        var str = '';
        // 外层循环,生成tr
        for(var i = 0 ; i <= arr.length-1 ; i++){
            // 定义tr标签
            str += '<tr>';
            // 第一个单元格,内容是一维索引+1
            str += `<td>${i+1}</td>`;
            // 内层循环,生成其他td标签,内容是二维数组内容
            for(var j = 0 ; j <= arr[i].length-1 ; j++){
                str += `<td>${arr[i][j]}</td>`; 
            }
            str += '</tr>';
        }
        // 将循环生成的字符串,写入到tbody标签中
        tb.innerHTML = str;
        // 利用获取到的数据 (当前自定义数组模拟)，来渲染生成页面
        // 页面的内容完全是由获取到的数据,来决定的,不再是一阶段时,固定的内容了
        // 准备知识1 : 通过 id属性值,可以直接操作标签,只能是id属性值
        // 准备知识2 : 标签id属性值.innerHTML = 内容

代码运行结果如下图
在这里插入图片描述

详解：

<head>
    <style>
        table{
            border-collapse: collapse;
        }
        table td{
            border:1px solid #000000;
            width: 100px;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <!-- 固定的页面内容 -->
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>性别</td>
            </tr>
        </thead>
        <!-- 根据数据库信息的渲染生成的页面内容 
             给要要操作的tbody标签,添加id属性属性值,通过id属性值,来操作标签
        -->
        <tbody id="tb"></tbody>
    </table>
    <script>  
        // 定义的数组,根据数组,渲染生成页面内容  
        var arr = [
            ['张123',18,'北京','男'],
            ['李四',19,'上海','女'],
            ['王五',20,'广州','男'],
            ['赵六',21,'重庆','女'],
        ];
        console.log(arr)
        // 定义变量,存储要写入的内容
        var str = '';
        // 外层循环,生成tr标签,有一维单元,就循环生成几个tr标签
        // 从第一个索引 0 开始,最终数值是索引下标的最大值 --- 数组.length-1
        // 生成所有索引下标的数值
        // 根据数组的结构,定义循环次数,起始数值一定是0,结束数值是索引下标的最大值
        for(var i = 0 ; i <= arr.length-1 ; i++){
            console.log(arr[i]);
            // 外层循环生成tr标签,循环几次,就生成几个tr标签
            // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
            str += '<tr>';
            // 定义tr标签的内容,也就是td单元格标签
            // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
            str += `<td>${i+1}</td>`;
            // 其他单元格,是内层循环生成的,循环的对象是二维数组
            // arr[i] 拿到的就是 每次循环,当前行,对应的二维数组 
            // 循环的对象是 arr[i] , 生成 arr[i] 的所有的 索引下标
            // 通过索引下标,获取对应的数据
            // 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1  arr[i].length-1
            for(var j = 0 ; j <= arr[i].length-1 ; j++ ){
                // 二维数组有几个单元,就循环几次,生成几个td单元个
                // 可以生成对应的单元格
                // 每一个单元的内容,就是当前二维数组单元的数据内容
                // 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
                // arr[i][j]
                str += `<td>${arr[i][j]}</td>`;
            }
            str += '</tr>';
        }
        // 将定义好的内容,写入到taody标签中
        tb.innerHTML = str;
    </script>
</body>

在这里插入图片描述