记录数组的reduce使用方法，并简单实现一个带分页表格的DOM

最新推荐文章于 2024-05-21 14:15:14 发布

ZX星XX

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量307

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42931681/article/details/106857338

版权

前两天看一个视频聊天时才知道的reduce这个数组的方法，简单看了一下别人写的觉得使用这个方法渲染数据挺不错的，于是自己就写了一个小DOM玩玩。

先给大家简单说说数组的reduce这个方法：

来张图先

依上图，reduce方法中传递两个参数，第一个参数是一个方法，方法中又有四个参数：分别代表

1.初始值。（也就是这个方法一开始的返回值，和reduce方法的第二个参数有关系，我一般设为空）

2.当前元素，相当于遍历数组，拿到每一个下标的值

3.数组索引（就不多说啦）

4.当前这个数组（我觉得一般用不到）

以上是reduce方法第一个参数function中的参数意义。

reduce方法的第二个参数就是这个方法的初始值了，也就是第一次进入方法时的那个初始值。

方法介绍完了，该方法的使用过程如下：

html部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>arr方法</title>
  <style>
    .tableBox{
      height: 363px;
    }
    table td{
      border-bottom: 1px solid #000;
      text-align: center;
      line-height: 30px;
    }
    .operation{
      width: 500px;
      overflow: hidden;
      margin: 20px auto 0;
    }
    #pre,#next{
      vertical-align: middle;
    }
    #opsBtn{
      margin: 0;
      padding: 0;
      display: inline-block;
    }
    #opsBtn li{
      list-style: none;
      display: inline-block;
    }
    .pageBtn{
      vertical-align: middle;
      width: 23px;
      height: 23px;
      margin-left: 5px;
      margin-right: 5px;
    }
    /*.pageBtn:first-child{
      margin-left: 0;
    }*/
  </style>
</head>
<body>
<div class="box">
  <div class="tableBox">
    <table cellspacing="0" width="500px" align="center">
      <thead>
      <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
      </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
  </div>
  <div class="operation">
    <button id="pre">上一页</button>
    <ul id="opsBtn"></ul>
    <button id="next">下一页</button>
  </div>
</div>
<script src="sortAndFilter.js"></script>
<script src="reduceMethod.js"></script>
</body>
</html>

html部分简单写了一些样式，看起来稍微好看些。

以下是主要的js代码：

// 数据源
let responseData = [
  {
    id: 1,
    name: 'z1',
    sex: 1
  },
  {
    id: 2,
    name: 'z2',
    sex: 1
  },
  {
    id: 3,
    name: 'z3',
    sex: 0
  },
  {
    id: 4,
    name: 'z4',
    sex: 0
  },
  {
    id: 5,
    name: 'z5',
    sex: 0
  },
  {
    id: 6,
    name: 'z6',
    sex: 1
  },
  {
    id: 7,
    name: 'z7',
    sex: 0
  },
  {
    id: 8,
    name: 'z8',
    sex: 1
  },
  {
    id: 9,
    name: 'z9',
    sex: 0
  },
  {
    id: 10,
    name: 'z10',
    sex: 0
  },
  {
    id: 11,
    name: 'z11',
    sex: 0
  },
  {
    id: 12,
    name: 'z12',
    sex: 0
  },
  {
    id: 13,
    name: 'z13',
    sex: 0
  },
  {
    id: 14,
    name: 'z14',
    sex: 1
  },
  {
    id: 15,
    name: 'z15',
    sex: 0
  },
  {
    id: 16,
    name: 'z16',
    sex: 0
  },
  {
    id: 17,
    name: 'z17',
    sex: 0
  },
  {
    id: 18,
    name: 'z18',
    sex: 1
  },
  {
    id: 19,
    name: 'z19',
    sex: 1
  },
  {
    id: 20,
    name: 'z20',
    sex: 0
  },
  {
    id: 21,
    name: 'z21',
    sex: 0
  },
  {
    id: 22,
    name: 'z22',
    sex: 1
  },
  {
    id: 23,
    name: 'z23',
    sex: 1
  },
  {
    id: 24,
    name: 'z24',
    sex: 0
  },
  {
    id: 25,
    name: 'z25',
    sex: 0
  },
  {
    id: 26,
    name: 'z26',
    sex: 0
  },
];
var page = 1; // 定义全局page页码
var rows = 10; // 定义全局一页展示多少条数据
var total = responseData.length; // 定义数据总条数
var str = ''; // 定义用于渲染表格时的空字符串
var str1 = ''; // 定义用于渲染列表按钮时的空字符串
const tb = document.getElementById('tb'); // 获取到表格tbody
const pre = document.getElementById('pre'); // 获取上一页点击按钮
const next = document.getElementById('next'); // 获取下一页点击按钮
const opsBtn = document.getElementById('opsBtn'); // 获取放入页码的ul

// 页码点击事件
function clickPageNum(e) {
  page = Number(e.innerText)
  turnPage(responseData)
}
// 渲染数据的方法
function renderData(arrData) {
  str = arrData.reduce(function (preVal, currentVal, currentI, arr) {
    return preVal +
      `<tr>
      <td>${currentVal.id}</td>
      <td>${currentVal.name}</td>
      <td>${currentVal.sex ? '男' : '女'}</td>
    </tr>`
  }, '');
  tb.innerHTML = str;
}
// 翻页码时的方法
function turnPage (pageData) {
  let newData = pageData.filter(function (item, index) {
    return index >= (page - 1) * rows && index < page * rows
  });
  renderData(newData)
}
turnPage(responseData);

(function () {
  // 生成页码
  for (let i = 0; i < Math.ceil(total / rows); i++) {
    str1 = str1 += `<li>
                      <button class="pageBtn" onclick="clickPageNum(this)">${i + 1}</button>
                    </li>`
  }
  opsBtn.innerHTML = str1
// 上一页点击事件
  pre.onclick = function () {
    if (page === 1) {
      alert('已是第一页')
    } else {
      page--;
      turnPage(responseData)
    }
  };
// 下一页点击事件
  next.onclick = function () {
    if (page === Math.ceil(total / rows)) {
      alert('已是最后一页')
    } else {
      page++;
      turnPage(responseData)
    }
  };
})();

觉得reduce方法真的很好用，渲染比较简单，搭配模板字符串，也算是高效渲染了吧。

虽然只是一个简单的功能小dom，但是有什么可以改进的更好的地方，欢迎大家留言告诉我~~

ZX星XX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录数组的reduce使用方法，并简单实现一个带分页表格的DOM

前两天看一个视频聊天时才知道的reduce这个数组的方法，简单看了一下别人写的觉得使用这个方法渲染数据挺不错的，于是自己就写了一个小DOM玩玩。先给大家简单说说数组的reduce这个方法：来张图先依上图，reduce方法中传递两个参数，第一个参数是一个方法，方法中又有四个参数：分别代表1.初始值。（也就是这个方法一开始的返回值，和reduce方法的第二个参数有关系，我一般设为空）2.当前元素，相当于遍历数组，拿到每一个下标的值3.数组索引（就不多说啦）4.当前这个数组（...
复制链接

扫一扫