蓝桥杯web开发国赛题目(大学组)--------分一分(每日一题)

Small reader

已于 2023-03-29 12:00:38 修改

阅读量676

点赞数 1

文章标签：前端蓝桥杯 javascript

于 2023-03-29 11:53:19 首次发布

本文链接：https://blog.csdn.net/qq_57174393/article/details/129832779

版权

介绍

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

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

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── effect.gif
├── index.html
└── js
└── index.js
其中：

effect.gif 是最终实现的效果图。
index.html 是主页面。
js/index.js 是需要补充代码的 js 文件。
在浏览器中预览 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]]
copy
上述仅为示例代码，判题时会随机提供数组对该函数功能进行检测。

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

规定

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

判分标准

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

本题目使用到的知识点：数组的拓展用法

数组拷贝展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝

下面展示一些 内联代码片。

let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3]
arr2.push(4); 
console.log(arr2); // [1, 2, 3, 4]

// 数组含空位
let arr3 = [1, , 3],
    arr4 = [...arr3];
console.log(arr4); // [1, undefined, 3]

链接: ES6拓展运算符用法.

index.html

下面展示index.html的 代码片.

//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);
      //我在这边先打印一下原数组的值
      console.log(oldArr)
      document.querySelector("#newArr").innerHTML = JSON.stringify(newA);
      
    }
  </script>
</html>

index.js

//index.js
/**
 * @param {Object} oldArr
 * @param {Object} num
 * */
const splitArray = (oldArr, num) => {
  // TODO：请补充代码实现功能
  // 定义一个新数组进行存储分割后
  //也可以使用扩展运算符重新定义一下oldArr，防止对原来的数据进行破坏
  //let newArr=[...oldArr]
  let _oldArr=[]
  // 定义一个返回的渲染数组
  let arr=[]
  // 进行升序排序，降序就是return b-a
  var a=oldArr.sort((a,b)=>{
    return a-b;
  })
  // 循环遍历数组的长度大于等于切割的数组长度时，
  // 将切割的小数组推入定义的返回数组中
  while(a.length>=num){
    _oldArr= a.splice(0,num)
    // console.log(_oldArr)  
    arr.push(_oldArr)
  }
  // 当数组长度不能整除传进来切割的num长度时执行，用a来判读是否整除，
  // 若整除则是返回[]，否则里面的值就直接当成剩余数组直接推入arr[]
 if(a.length!=0){
  arr.push(a)
 }
//  最后返回渲染数组
  return arr
};
module.exports = splitArray; // 检测需要，请勿删除