JavaScript 了解数组及其使用并学习用数组生成HTML表格 h5大前端学习日结

数组的基本介绍定义
所谓的数组，就是数据的集合。数组中的数据单元，可以是任意形式的数据内容，比如可以是一个数组,对象,函数等等。
数组是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中编辑：

序号姓名年龄地址性别

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标签的内容,也就是td单元格标签 // 第一个单元格是单独生成的,不参与内层循环,是当前外层循环索引下标+1 str += `${i+1}`; // 其他单元格,是内层循环生成的,循环的对象是二维数组 // arr[i] 拿到的就是每次循环当前行对应的二维数组 // 循环的对象是 arr[i] , 生成 arr[i] 的所有的索引下标 // 通过索引下标,获取对应的数据 // 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1arr[i].length-1 for(var j = 0 ; j <= arr[i].length-1 ; j++){ // 二维数组有几个单元,就循环几次,生成几个td单元个 // 可以生成对应的单元格 // 每一个单元的内容,就是当前二维数组单元的数据内容 // 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j // 所以是arr[i][j] str += `${arr[i][j]}`; } str += ''; } // 将定义好的内容,写入到taody标签中 tb.innerHTML = str;

【JavaScript 了解数组及其使用并学习用数组生成HTML表格】仔细看懂之后不如自己动手操作一下吧，写代码是更好的理解代码的方式哦！