数组新增数据数组详细应用

// 新增数组数据单元

// 对不存在的索引下标进行赋值操作

// 执行结果就是在数组中,新增一个存储单元,索引下标是定义的索引下标,数据是定义的数据

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>

<head>

<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>

</tr>

</thead>

</table>

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>

</tr>`;

str1 += `<tr>

</tr>`;

str1 += `<tr>

</tr>`;

str1 += `<tr>

</tr>`;

str1 += `<tr>

</tr>`;

// 我们通过循环,生成的就是这些内容

document.querySelector('tbody').innerHTML = str1;

</script>

</body>

</html>

右侧打赏一下代码改变世界一块二块也是爱

数组新增数据 数组详细应用

数组新增数据数组详细应用