JavaScript中的数组

一、数组：
　　定义：数据的集合，可以存储多个单元的数据
　　数组中的数据单元,可以是任意形式的数据内容(数组,对象,函数)
1、字面量：

1 var 变量 == [数据1，数据2，数据3，.....];

　　在[]中括号内各个数据用逗号隔开
2、数组的嵌套：

1 var 变量 == [数据1，数据2，数据3，[数据1，数据2，数据3，.....]，[数据1，数据2，数据3，.....]，[数据1，数据2，数据3，.....].....];

　　在一维数组[]中括号内再嵌套一个[]中括号,各个数据还用逗号隔开，

二、数组的调用：
1、简单数组的调用：

1 var arr = [1,2,3,4,5];
2 //调用数组中第一个数据
3 console.log(arr[0]);
4 //调用数组中第二个数据
5 console.log(arr[1]);
6 //调用数组中第三个数据
7 console.log(arr[2]);
8 //调用数组中第n个数据，如果n大于数组个数，执行结果为undefined
9 console.log(arr[n]);

2、嵌套数组的调用：

1 var arr2 = ['北京' , '上海' , '广州' , ['a' , 'b' , 'c' , 'd']];
2 //调用第三个数据：广州
3 console.log(arr2[2])
4 //调用第四个数据：['a' , 'b' , 'c' , 'd']
5 console.log(arr2[3])
6 //调用第四个数据中的第一个数据
7 console.log(arr2[3][0])

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

四、数组的应用：
1、根据数组的内容,填充页面中的表格

 1 <body>
 2     <table>
 3         <thead>
 4             <tr>
 5                 <td>序号</td>
 6                 <td>姓名</td>
 7                 <td>年龄</td>
 8                 <td>地址</td>
 9                 <td>性别</td>
10             </tr>
11         </thead>
12         <!-- 给标签定义id属性和属性值,通过属性值来操作标签 -->
13         <tbody id="tb"></tbody>
14     </table>
15     <script>
16         // 建立数组,模拟本地数据信息
17         var arr = [
18             ['张123',18,'北京','男'],
19             ['李四',19,'上海','女'],
20             ['王五',20,'广州','男'],
21             ['赵六',21,'重庆','女'],
22         ];
23         // 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
24         var str = '';
25         // 外层循环,生成tr
26         for(var i = 0 ; i <= arr.length-1 ; i++){
27             // 定义tr标签
28             str += '<tr>';
29             // 第一个单元格是序号,内容是一维索引+1
30             str += `<td>${i+1}</td>`;
31             // 内层循环,生成其他td标签,内容是二维数组内容
32             for(var j = 0 ; j <= arr[i].length-1 ; j++){
33                 str += `<td>${arr[i][j]}</td>`; 
34             }
35             str += '</tr>';
36         }
37         // 将循环生成的字符串,写入到tbody标签中
38         tb.innerHTML = str;
39     </script>
40 </body>

2、当然还能做很多html页面的填充

posted @ 2020-03-18 23:31  不懂老爱瞎逼逼  阅读(468)  评论(0)  编辑  收藏  举报