js高级程序设计，第十章（小总结）：

1.关于table方法的使用

在关于table方法的使用中，由于好久没有在业务场景中使用到表格的创建，所以今天看到了这些，并且在目前的业务场景中，同事适用了table表格，不过是将表格封装成了组件使用，这里关于table的方法做一下总结。

关于table在逻辑中使用最多的就是添加一行、删除一行或者在行中添加一列或者删除一列，自然而然就使用到了下面的方法。

// 使用原生js进行创建表格
const table = document.createElement("table");
const tr1 = table.insertRow(0);  // 在table中添加第一行，返回的就是对新插入行的引用，下标从0开                                  始
const td1 = tr1.insertCell(0);  // 在第一行中插入第一列，返回的是对新插入列的引用，下标从0开                                  始
const tr2 = table.insertRow(1);  // 在table中添加第一行，返回的就是对新插入行的引用，下标从0开                                  始
const td2 = tr1.insertCell(1);  // 在第一行中插入第一列，返回的是对新插入列的引用，下标从0开                                  始
......

// 删除一行
table.deleteRow(0);  // 删除第一行
tr2.deleteCell(0); // 删除第二行的第一列
// 依次创建多行和多列
document.appendChild(table);

这里的insertRow、insertCell、deleteRow、deleteCell里面的参数都是指定的位置，下标从0开始。

2.关于对for循环的两种差异

for循环的大家都不陌生，可是有一点差异或许在某些使用中会导致你的无限循环，会持续操作DOM节点，导致浏览器崩溃。比如下面的一个例子，这对我理解for循环的遍历和两种写法的不同，还有有帮助的，所以这里做一下总结。

// 第一种写法
let divs = document.getElementsByTagName("div"), // 先获取文档中的div元素
    i,
    div
for (i = 0; i < divs.length; i++) {
      div = document.createElement("div");  // 创建了一个div元素
      document.body.appendChild(div); 
}

// 第二种写法
let divs = document.getElementsByTagName("div"), // 先获取文档中的div元素
    i,
    len,
    div
for (i = 0, len = divs.length; i < len; i++) {
      div = document.createElement("div");
      document.body.appendChild(div);
}

这上面的两种写法看着是没有什么差别，或许在普通的循环中也没什么差别，都可以实现遍历。但是这里的首要差别就是效率问题，第一种写法每一次都会去计算（i < divs.length），这就相当于每一次都去重新查询DOM文档中的div节点的个数。而第二种很直接，就在初始化的时候计算一次div的长度。所以在使用第一种方法往DOM文档中插入元素时，要注意！这样会导致你的浏览器最终崩溃。而第二种更为保险，建议在普通循环中也使用第二种，起码效率得到了提升。

本章的内容较基础，讲了好多底层的实现，特别是原生的js实现逻辑，这里的两点是临时看到的感觉对自己在工作中有帮助的，有利于提高效率的两点。👋