JavaScript 了解数组及其使用并学习用数组生成HTML表格

数组的基本介绍

定义

所谓的数组，就是数据的集合。数组中的数据单元，可以是任意形式的数据内容，比如可以是一个数组,对象,函数等等。
数组是JavaScript中，一个非常重要的数据类型。后端接口返回给我们的数据形式，往往都是数组的形式。

索引/下标

JavaScript会给数组中的单元自动添加序号，我们称这个序号为 索引/下标。通过 索引/下标，可以获取到对应的数据。
所有计算机语言的 索引/下标 都是从 0 开始计数的。
通过索引/下标调取数据的语法： 数组变量[索引/下标]

length属性

length属性 是数组特有的属性，别的数据没有，表示数组中的单元个数。
数组的 索引/下标 最大值是length - 1。

实例

var arr = [1,2,3,4,5];
console.log(arr);

输出效果：

数组的创建方式

1. 自变量方式

语法

var 变量 = [ 数据1 , 数据2 , 数据3 , ..... ];
// 在 [] 中,定义多个数据单元,中间使用逗号间隔

实例

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

2. 构造函数方式

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

语法

var 变量 =  new Array( 数据1 , 数据2 , 数据3 , ..... );
// 在 Array() 中,定义多个数据单元,中间使用逗号间隔

实例

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

数组的嵌套

Demo

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

这是一个嵌套数组，第一层的数组，我们称为一维数组；第二层的数组，我们称为二维数组。
一维数组中，数据的调用语法是正常的调用方法：数组变量[索引/下标]
二维数组中，数据的调用语法是则有所不同，是：数组变量[二维数组索引/下标][二维数组中具体单元索引/下标]

实战：用数组生成table表格

首先，在html中创建一个表格，创建好css样式，并给表格内容部分加一个id，以便在JavaScript中编辑：

<table>
    <thead>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
            <td>性别</td>
        </tr>
    </thead>
    <!-- 
    根据数据库信息的渲染生成的页面内容
    给标签定义id属性和属性值,通过属性值来操作标签 
    -->
    <tbody id="tb"></tbody>
</table>

css样式：

table{
    border-collapse: collapse;
}
table td{
    border:1px solid #000000;
}

JavaScript代码：

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

// 我们从数据库或者接口获取到的数据信息,往往都是数组形式
// 而且基本都是二维数组形式
// 我们先在本地建立数组,模拟数据信息

// 建立数组,模拟本地数据信息
var arr = [
    ['张123',18,'北京','男'],
    ['李四',19,'上海','女'],
    ['王五',20,'广州','男'],
    ['赵六',21,'重庆','女'],
];

// 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
var str = '';

// 外层循环,生成tr,有几个一维单元,就循环生成几个tr标签
// 从第一个索引 0 开始,最终数值是索引下标的最大值 --- 数组.length-1
// 生成所有索引下标的数值
// 根据数组的结构,定义循环次数,起始数值一定是0,结束数值是索引下标的最大值
for(var i = 0 ; i <= arr.length-1 ; 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; 

仔细看懂之后不如自己动手操作一下吧，写代码是更好的理解代码的方式哦！