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

发布时间:2024年01月14日

分一分

介绍

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

本题需要在已提供的基础项目中使用 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?中的代码,最终返回按指定长度分割的数组。

具体要求如下:

  1. 将待分割的(一维)数组升序排序。
  2. 将排序后的数组从下标为 0?的元素开始,按照从?id=sliceNum?的输入框中获取到的数值去分割,并将分割好的数据存入一个新数组中。如:输入框中值为 n,将原数组按每 n 个一组分割,不足 n 个的数据为一组。
  3. 将得到的新数组返回(即?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; // 检测需要,请勿删除

文章来源:https://blog.csdn.net/m0_65380423/article/details/135568372
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。