// 新增数组数据单元
// 对不存在的索引下标进行赋值操作
// 执行结果就是在数组中,新增一个存储单元,索引下标是定义的索引下标,数据是定义的数据
var arr = [100,200,300];
// 对已有的索引下标赋值,执行结果是修改这个索引下标存储的数据
arr[0] = '北京';
console.log(arr);
// 现在的索引下标是 0 1 2
// 给一个不存在的索引下标进行赋值
// 执行效果是 新增索引下标3 存储数据是 '我是新增的'
arr[3] = '我是新增的';
// 上述情况是 连续的索引下标 也就是 0 1 2 之后 继续写 3
// 如果是 不连续的索引下标
// 会新增单元, 新增单元的索引下标是定义的索引下标 数据是定义的数据
// 新增的索引下标 至 原始索引下标之间
// JavaScript程序会自动存储 数据为空的单元
// ["北京", 200, 300, "我是新增的", empty × 296, "我是蹦跶出来的"]
// 索引0 北京 索引1 200 索引2 300 索引3 我是新增的
// 索引4 - 索引299 都是存储数据为空的数据单元 , 这些索引,这些数据单元,是存在的,只是存储的数据是空数据
// 索引300 存储 我是蹦跶出来的
// 如果调用这些 empty 的数据单元,执行结果是 undefined 表示没有被正确赋值
// 虽然浏览显示的 empty 但是 这些单元 实际上是没有被正确赋值的
// 调用的执行结果是 undefined 没有正确赋值
// 我们定义数组时,要求,索引下标,必须是连续的
arr[300] = '我是蹦跶出来的';
console.log(arr);
console.log(arr[200]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
80px;
height: 30px;
text-align: center;
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>住址</td>
<td>爱好</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var arr = [
['张三', 18, '男', '北京', 'LOL'],
['李四', 19, '女', '上海', '吃鸡'],
['王五', 20, '保密', '广州', '王者'],
['赵六', 21, '不是人', '月球', '挖矿'],
['刘七', 22, '不详', '火星', '种土豆'],
];
/*
// 定义一个变量,来存储,根据数组结果,渲染生成的页面内容,也就是字符串内容
var str = '';
// 外层循环,生成行数
// 循环变量i 的范围 就是 索引下标的范围 , 需要索引下标来提取数据
// 每一行的内容,可以通过 arr[i] 获取
// 每一行要定义 一对 tr 标签
// 有一个索引下标,就会循环一次,就会生成一个 tr 标签
for(var i = 0 ; i <= arr.length-1 ; i++){
// 先生成一对 tr标签 包裹 td 标签
str += '<tr>';
// 在 tr 起始和结束标签之前,嵌套 td 标签
// 标签内容是 i+1 因为是变量不需要解析,可以使用模板字符串
// 这是序号td单元格
str += `<td>${i+1}</td>`;
// 字符串拼接
// str += '<td>' + (i+1) + '</td>';
// 在需要td 单元格之后,拼接新的td单元格聂荣
// 当 i 是 0 时 等于 是 arr[0][0] -- 张三
// 当 i 是 1 时 等于 是 arr[1][0] -- 李四
// 当 i 是 2 时 等于 是 arr[2][0] -- 王五
// 当 i 是 3 时 等于 是 arr[3][0] -- 赵六
// 当 i 是 4 时 等于 是 arr[4][0] -- 刘七
// str += `<td>${arr[i][0]}</td>`;
// // 修改第二个索引下标,就是获取二维数组中每一个数据单元
// str += `<td>${arr[i][1]}</td>`;
// str += `<td>${arr[i][2]}</td>`;
// str += `<td>${arr[i][3]}</td>`;
// str += `<td>${arr[i][4]}</td>`;
// 第二个索引下标的范围是 二维数组 arr[i] 的索引下标范围
// 0 至 arr[i].length-1 就是 二维数组 的 length
// 可以通过 内层 循环 根据 二维数组 arr[i] 生成 td 单元格
for(var j = 0 ; j <= arr[i].length-1 ; j++){
// j就是通过循环生成的 二维数组的索引下标
str += `<td>${arr[i][j]}</td>`;
}
// 循环结束,拼接 tr 结束标签
str += '</tr>';
console.log(i , arr[i]);
}
// 将结果写入到 tbody 标签中
// 这里数据 DOM 操作,现在不用管,我们之后会详细解释
document.querySelector('tbody').innerHTML = str;
*/
// 实现不行,你可以这么理解
// 每一个 td 单元格 都是 可以独立完成的
str1 = '';
str1 += `<tr>
<td>1</td>
<td>${arr[0][0]}</td>
<td>${arr[0][1]}</td>
<td>${arr[0][2]}</td>
<td>${arr[0][3]}</td>
<td>${arr[0][4]}</td>
</tr>`;
str1 += `<tr>
<td>2</td>
<td>${arr[1][0]}</td>
<td>${arr[1][1]}</td>
<td>${arr[1][2]}</td>
<td>${arr[1][3]}</td>
<td>${arr[1][4]}</td>
</tr>`;
str1 += `<tr>
<td>3</td>
<td>${arr[2][0]}</td>
<td>${arr[2][1]}</td>
<td>${arr[2][2]}</td>
<td>${arr[2][3]}</td>
<td>${arr[2][4]}</td>
</tr>`;
str1 += `<tr>
<td>4</td>
<td>${arr[3][0]}</td>
<td>${arr[3][1]}</td>
<td>${arr[3][2]}</td>
<td>${arr[3][3]}</td>
<td>${arr[3][4]}</td>
</tr>`;
str1 += `<tr>
<td>5</td>
<td>${arr[4][0]}</td>
<td>${arr[4][1]}</td>
<td>${arr[4][2]}</td>
<td>${arr[4][3]}</td>
<td>${arr[4][4]}</td>
</tr>`;
// 我们通过循环,生成的就是这些内容
document.querySelector('tbody').innerHTML = str1;
</script>
</body>
</html>