web蓝桥杯真题--3、分一分

最新推荐文章于 2024-07-10 14:03:37 发布

畏迁c

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量490

点赞数 13

分类专栏：蓝桥杯真题web 文章标签：前端蓝桥杯职场和发展

本文链接：https://blog.csdn.net/m0_65380423/article/details/135568372

版权

蓝桥杯真题web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

分一分

介绍

如果给你一个数组，你能很快将它分割成指定长度的若干份吗？

本题需要在已提供的基础项目中使用 JS 知识封装一个函数，达到分割数组的要求。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── effect.gif
├── index.html
└── js
    └── index.js

其中：

effect.gif 是最终实现的效果图。
index.html 是主页面。
js/index.js 是需要补充代码的 js 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9788/01.zip && unzip 01.zip && rm 01.zip

在浏览器中预览 index.html 页面，显示如下所示：

初始效果

目标

请在 js/index.js 文件中补全函数 splitArray 中的代码，最终返回按指定长度分割的数组。

具体要求如下：

将待分割的（一维）数组升序排序。
将排序后的数组从下标为 0 的元素开始，按照从 id=sliceNum 的输入框中获取到的数值去分割，并将分割好的数据存入一个新数组中。如：输入框中值为 n，将原数组按每 n 个一组分割，不足 n 个的数据为一组。
将得到的新数组返回（即 return 一个二维数组）。

例如：

var arr = [3, 1, 4, 2, 5, 6, 7];
// 分割成每 1 个一组
var newA = splitArray(arr, 1);
console.log(newA); // => [[1],[2],[3],[4],[5],[6],[7]]

// 分割成每 2 个一组
newA = splitArray(arr, 2);
console.log(newA); // => [[1,2],[3,4],[5,6],[7]]

// 分割成每 4 个一组
newA = splitArray(arr, 4);
console.log(newA); // => [[1,2,3,4],[5,6,7]]

// 分割成每 7 个一组
newA = splitArray(arr, 7);
console.log(newA); // => [[1,2,3,4,5,6,7]]

上述仅为示例代码，判题时会随机提供数组对该函数功能进行检测。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

请勿修改 js/index.js 文件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

完全实现题目目标得满分，否则得 0 分。

实现思路

首先是排序，其次是分组

排序的思路是使用简单的sort方法排序，但是注意sort方法，默认按照 Unicode 字符顺序排序，而不是按照数值大小排序。因此，如果要对数值型的数组进行排序，应该使用比较函数来指定排序规则。

也就是说sort方法后面要加一个比较函数,例如sort((a,b)=>(a-b))这样子的

然后第二步骤就是分组。使用split函数，这里是按照num的具体值来算的，所以用一个for循环

i=0；i<oldArr.length;i+=num,,,,这里为什么是+=num呢，因为num个为一组

index.html具体代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>分一分</title>
    <style type="text/css">
      .main div {
        height: 40px;
        line-height: 40px;
      }
      #sliceNum {
        width: 30px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="old-array">
        <span class="left">当前测试数组：</span>
        <span id="oldArray"></span>
      </div>
      <div class="split-num">
        <span class="left">请输入分割后子数组的长度：</span>
        <input type="number" id="sliceNum" value="2" min="1" />
      </div>
      <div>
        <button type="button" onclick="getNew()">点我分割数组</button>
      </div>
      <div>
        <span class="left">分割后的数组：</span>
        <span id="newArr"></span>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="./js/index.js"></script>
  <script type="text/javascript">
    var oldArr = [22, 23, 34, 4, 5, 6, 76, 8, 91, 10, 11, 12];
    document.getElementById("oldArray").innerText = JSON.stringify(oldArr);
    function getNew() {
      var num = parseInt(document.querySelector("#sliceNum").value);
      var newA = splitArray(oldArr, num);
      document.querySelector("#newArr").innerHTML = JSON.stringify(newA);
    }
  </script>
</html>

index.js代码

/**
 * @param {Object} oldArr
 * @param {Object} num
 * */
const splitArray = (oldArr, num) => {
  // TODO：请补充代码实现功能
  let sortArr = [];
  sortArr = oldArr.sort((a,b)=>(a-b));
  let newArr = [];
  console.log(sortArr)
  let i;
  for( i = 0; i < sortArr.length; i += num) {
      let fenArr = sortArr.slice(i,i+num);
      newArr.push(fenArr);
  }
  return newArr;
  
};
module.exports = splitArray; // 检测需要，请勿删除