【Html.js——函数编写】分一分（蓝桥杯真题-2438）【合集】

Rossy Yan

发布于 2025-03-06 09:07:20

3690

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

背景介绍

如果给你一个数组，你能很快将它分割成指定长度的若干份吗？本题需要在已提供的基础项目中使用 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 分。

通关代码✔️

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

代码解析📑

一、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>

1. 文档声明与元信息：

<!DOCTYPE html>：声明文档类型为 HTML5。
<meta charset="utf-8" />：设置字符编码为 UTF - 8，确保页面能正确显示各种字符。
<title>分一分</title>：设置页面标题，显示在浏览器标签上。

2. 内联 CSS 样式：

.main div：选择 class 为 main 的元素下的所有 div 元素，将其高度设置为 40 像素，行高也设置为 40 像素，使文本垂直居中。
#sliceNum：选择 id 为 sliceNum 的元素（即输入框），将其宽度设置为 30 像素。

3. 页面结构：

<div class="main">：作为整个页面内容的容器。
<div class="old-array">：显示当前测试数组的信息，其中 <span id="oldArray"></span> 用于动态显示数组内容。
<div class="split-num">：包含一个提示文本和一个输入框，用户可以在输入框中输入分割后子数组的长度，输入框初始值为 2，最小值为 1。
<button type="button" onclick="getNew()">点我分割数组</button>：点击该按钮会触发 getNew 函数。
<div>：显示分割后的数组信息，其中 <span id="newArr"></span> 用于动态显示分割后的数组内容。

4. 脚本引入与执行：

<script type="text/javascript" src="./js/index.js"></script>：引入外部 JavaScript 文件，该文件中包含 splitArray 函数。
<script type="text/javascript">：内联 JavaScript 代码。
- var oldArr = [22, 23, 34, 4, 5, 6, 76, 8, 91, 10, 11, 12];：定义一个测试数组。
- document.getElementById("oldArray").innerText = JSON.stringify(oldArr);：将测试数组以 JSON 字符串的形式显示在页面上。
- function getNew()：点击按钮时调用的函数，用于获取用户输入的分割长度，调用 splitArray 函数进行数组分割，并将分割结果显示在页面上。

二、JavaScript 部分

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

1.函数定义：

const splitArray = (oldArr, num) => {...}：定义一个箭头函数 splitArray，接受两个参数 oldArr（待分割的数组）和 num（分割后子数组的长度）。

2. 数组排序：

arr=oldArr.sort(function(a,b){ return a - b })：对输入的数组 oldArr 进行升序排序，并将排序后的数组赋值给 arr。不过这里存在一个小问题，变量 arr 没有使用 let 或 const 声明，会变成全局变量，建议改为 const arr = oldArr.sort((a, b) => a - b);。

3. 分割数组：

let result = [];：初始化一个空数组 result，用于存储分割后的子数组。
for(let i = 0; i < arr.length; i += num)：使用 for 循环遍历排序后的数组，每次循环的步长为 num。
let subArray = oldArr.slice(i, i + num);：使用 slice 方法从当前索引 i 开始截取长度为 num 的子数组。
result.push(subArray);：将截取的子数组添加到 result 数组中。