const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var arr_2d = [];
const cols = 5;
var row = 0;
var col = 0;
arr_1d.forEach((item) => {
  if (col == 0) {
    arr_2d.push([]);
    arr_2d.at(row).push(item);
    col += 1;
  } else if (col < cols) {
    arr_2d.at(row).push(item);
    col += 1;
  } else {
    row += 1;
    arr_2d.push([]);
    arr_2d.at(row).push(item);
    col = 1;
console.log(arr_2d);
代码解释：
第一次col为零时，需要添加一个[]空数组，然后向空数组中添加当前元素，而且该语句只执行一次
执行else时，即col == cols，这时已经时下一个子数组的第一个元素，因此要先执行row += 1，然后再添加一个[]空数组，并附加当前元素。因为子数组的第一个元素已经附加，col要赋值为1，不能赋值为0
已知JS二维数组的行数和列数
已知JS二维数组的行数和列数，可以按照只知二维数组的列数来处理，也推荐使用：只知二维数组的列数来处理，因为这种情况能完全处理完一维数组的元素。
JS一维对象数组转换二维数组，使用数组的slice()函数最简单，示例代码：
const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
var arr_2d = [];
const rows = 4;
const cols = 5;
for (let row=0; row<rows; row++) {
  arr_2d[row] = arr_1d.slice(row*cols, (row+1)*cols);
console.log(arr_2d);
使用双循环实现JS一维对象数组转换二维数组，代码如下：
const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
const arr_len = arr_1d.length;
var arr_2d = [];
const rows = 4;
const cols = 5;
for (let row=0; row<rows; row++) {
  for (let col=0; col<cols; col++) {
    if (col == 0) {
      arr_2d.push([]);
    let idx = row * cols + col;
    if ( idx == arr_len) break;
    arr_2d.at(row).push(arr_1d.at(idx));
console.log(arr_2d);
代码解释：
每次col为零时，需要添加一个[]空数组，它的作用是搭建二维数组的框架，然后向空数组中添加元素，  
push()可附加一个元素，也可以附加一个数组元素
使用行数和列数的双循环时，当JS一维数组的元素个数超过行列乘积时，后面的元素就会被舍弃。
JS二维数组中每列的元素数不同
原生JS实现一维对象数组转换二维数组时，如果二维数组的每列的元素数不同，那么需要给出每列的元素数，那么自然也能得知二维数组的行数，可以使用两种方式实现：
使用单循环实现JS实现一维对象数组转换二维数组
使用双循环实现JS实现一维对象数组转换二维数组
使用JS单循环转换
const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
var arr_2d = [];
const cols = [5, 4, 3, 4, 4];
var nums = 0;
cols.forEach((item) => {
  nums += item;
const arr_len = arr_1d.length;
var row = 0;
var col = 0;
for (let idx=0; idx<nums; idx++) {
  if (idx==arr_len) break;
  if (col == 0) {
    arr_2d.push([]);
    arr_2d.at(row).push(arr_1d.at(idx));
    col += 1;
  } else if (col < cols.at(row)) {
    arr_2d.at(row).push(arr_1d.at(idx));
    col += 1;
  } else {
    row += 1;
    arr_2d.push([]);
    arr_2d.at(row).push(arr_1d.at(idx));
    col = 1;
console.log(arr_2d);
代码解释：
第一次col为零时，需要添加一个[]空数组，然后向空数组中添加当前元素，而且该语句只执行一次。
执行else时，即col == cols，这时已经时下一个子数组的第一个元素，因此要先执行row += 1，然后再添加一个[]空数组，并附加当前元素。因为子数组的第一个元素已经附加，col要赋值为1，不能赋值为0。
break 是一维数组中元素个数少于各列之和时，中断循环。
循环的次数是各列之和
使用JS双循环转换
const arr_1d = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var arr_2d = [];
const cols = [5, 4, 3, 4, 4];
const rows = cols.length;
var nums = 0;
cols.forEach((item) => {
  nums += item;
const arr_len = arr_1d.length;
for (let row=0; row<rows; row++) {
  for (let col=0; col<cols.at(row); col++) {
    if (col == 0) {
      arr_2d.push([]);
    let idx = row * cols.at(row) + col;
    if ( idx == arr_len) break;
    arr_2d.at(row).push(arr_1d.at(idx));
console.log(arr_2d);
代码解释：
每次col为零时，需要添加一个[]空数组，它的作用是搭建二维数组的框架，然后向空数组中添加元素。
nums为各列之和，即：二维数组中元素的个数。
break语句是一维数组中的元素个数少于二维数组应添加的个数时，中断循环。
本文中介绍了原生JS实现一维对象数组转换二维数组，可实现二维数组中的每个子数组包含不同个数的元素。并介绍了原生JS实现一维对象数组转换二维数组的两种实现情况： JavaScript 二维数组中每列的元素数相同，即：每个子数组包含的元素的个数相同； JS 二维数组中每列的元素数不同，即：每个子数组包含的元素的个数不同。
      JavaScript 为多元素添加监听事件修改元素或属性
    
  本文介绍使用原生JavaScript （Vanilla JS）为多个元素添加事件监听器，添加或修改元素（element）或属性（class, id, rel, type等），为触发事件的元素添加和修改属性和元素。 
  Javascript为多元素添加事件监听器的步骤 ： 
 获取所有的元素 
 使用循环一次性添加事件监听器 
 要为多个元素添加事件监听器，如要获取多个元...
      Javascript 为元素添加事件监听器
    
  使用原生 Javascript（Vanilla JS）为元素添加事件监听器，需要使用  EventTarget.addEventListener() 函数。 
  EventTarget.addEventListener()  方法将指定的监听器注册到  EventTarget  上，当该对象触发指定的事件时，指定的回调函数就会被执行。 EventTarget  可以是一个文档上的元素  El...
      JavaScript 为 HTML 元素添加 CSS 样式
    
  JavaScript 可以使用 HTML DOM Element 为 HTML Element 添加 CSS class，添加 CSS 可以使用  Element  的  classList  和  className  两个属性来配置。 
  Element.classList  和  Element.className  的区别： 
  Element.classList  使用其方法...