【JavaScript——函数编写】谁最长（蓝桥杯真题-7327）【合集】

Rossy Yan

发布于 2025-03-19 13:12:54

23400

代码可运行

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

运行总次数：0

代码可运行

背景介绍

如果给你若干个数组，你能很快判断出最长的都有哪些吗？本题需要在已提供的基础项目中，使用 JS 知识封装一个函数，该函数可以接收若干个一维数组作为参数，并最终返回长度最大的数组集合。

准备步骤

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

├── index.html
└── js
    └── index.js

其中：

js/index.js 是页面功能实现的逻辑代码。
index.html 包含用于检测函数的代码。

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

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

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

当前的几种传参情况，并未返回正确结果。

目标效果

请在 js/index.js 文件中，补全函数 getMaxArrays 中的代码，最终实现根据不同的传参情况，返回预期数组的需求。具体需求如下：

（1）传入的参数列表中，所有参数皆为数组的情况下：

1. 若长度最大的数组有一到多个，则最终返回这些数组的集合（即二维数组）。

例如：

var a1 = [12, 2];
var a2 = [34, 2, 3];
var a3 = [23, 12, 3];
var newA = getMaxArrays(a1, a2, a3);
console.log(newA); // => [[34, 2, 3],[23, 12, 3]];
var newA = getMaxArrays(a3);
console.log(newA); // => [[23, 12, 3]];

2. 若所有数组长度相同，则返回空数组（即：[]）。

例如：

var a2 = [34, 2, 3];
var a3 = [23, 12, 3];
var newA = getMaxArrays(a2, a3);
console.log(newA); // => [];

3. 其他情况则返回空数组（即：[]）。

要求规定

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

判分标准

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

通关代码✔️

/**
 * 封装函数，传入任意数量的数组，返回长度最大的数组集合
 */
const getMaxArrays = (...arrays) => {
  // TODO：待补充代码
  if(arrays.some(items=>!Array.isArray(items))){
    return [] 
  }
  if(arrays.length == 0){
    return []
  }
  if(arrays.every(arr=>arr.length==arrays[0].length)){
    return []
  }
  const max = Math.max(...arrays.map(item=>item.length))
  return arrays.filter(items=>items.length == max)
};
module.exports = getMaxArrays; //请勿删除

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>谁最长</title>
  </head>
  <body>
    <div id="main"></div>
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript">
      // 传入的参数中只有一个最长数组
      var a1 = [12, 2];
      var a2 = [34, 2, 3];
      var a3 = [23, 12];
      var newA = getMaxArrays(a1, a2, a3);
      document.querySelector("#main").innerHTML +=
        JSON.stringify(newA) + "<br/>";

      // 传入的参数中包含多个最长数组
      var a1 = [12, 2];
      var a2 = [34, 2, 3];
      var a3 = [23, 12, 3];
      var newA = getMaxArrays(a1, a2, a3);
      document.querySelector("#main").innerHTML +=
        JSON.stringify(newA) + "<br/>";

      // 传入的参数中所有数组等长
      a1 = [12, 2, 3];
      newA = getMaxArrays(a1, a2, a3);
      document.querySelector("#main").innerHTML +=
        JSON.stringify(newA) + "<br/>";

      // 不传入任何参数
      newA = getMaxArrays();
      document.querySelector("#main").innerHTML +=
        JSON.stringify(newA) + "<br/>";

      // 传入的不是数组
      newA = getMaxArrays(1, 2, 3);
      document.querySelector("#main").innerHTML +=
        JSON.stringify(newA) + "<br/>";

      // 传入的有些不是数组
      newA = getMaxArrays([1], 2, [3, 4]);
      document.querySelector("#main").innerHTML +=
        JSON.stringify(newA) + "<br/>";
    </script>
  </body>
</html>

页面结构搭建：使用 <!DOCTYPE html> 声明文档类型，创建一个基本的 HTML 页面，包含 <html>、<head> 和 <body> 标签。
元数据设置：在 <head> 标签中设置字符编码为 utf-8，并指定页面标题为 “谁最长”。
页面内容添加：
- 在 <body> 标签中创建一个 <div> 元素，其 id 为 main，用于后续在页面上显示结果。
- 通过 <script> 标签引入外部 JavaScript 文件 ./js/index.js，该文件中包含了 getMaxArrays 函数的定义。
- 在 <script> 标签内编写 JavaScript 代码，用于测试 getMaxArrays 函数在不同情况下的行为。
测试用例执行：
- 定义不同的数组变量（如 a1、a2、a3），并以不同的组合方式调用 getMaxArrays 函数。
- 将函数的返回结果使用 JSON.stringify 方法转换为字符串，并将其添加到 id 为 main 的 <div> 元素中，同时添加换行符 <br/> 以便在页面上清晰显示每个测试结果。

二、JavaScript 部分

/**
 * 封装函数，传入任意数量的数组，返回长度最大的数组集合
 */
const getMaxArrays = (...arrays) => {
  // TODO：待补充代码
  if(arrays.some(items=>!Array.isArray(items))){
    return [] 
  }
  if(arrays.length == 0){
    return []
  }
  if(arrays.every(arr=>arr.length==arrays[0].length)){
    return []
  }
  const max = Math.max(...arrays.map(item=>item.length))
  return arrays.filter(items=>items.length == max)
};
module.exports = getMaxArrays; //请勿删除

函数定义：定义一个名为 getMaxArrays 的函数，使用剩余参数语法 ...arrays 来接收任意数量的数组参数。
输入检查：
- 使用 arrays.some 方法检查传入的参数中是否存在非数组元素，如果有则返回空数组。
- 使用 arrays.length == 0 检查是否没有传入任何参数，如果是则返回空数组。
- 使用 arrays.every 方法检查所有传入的数组长度是否相等，如果相等则返回空数组。
寻找最大长度：
- 使用 arrays.map(item => item.length) 将每个数组转换为其长度的数组。
- 使用扩展运算符 ... 将长度数组展开，并传递给 Math.max 函数，从而获取这些数组中的最大长度。
筛选最长数组：使用 arrays.filter 方法，筛选出长度等于最大长度的数组，并返回这些数组组成的集合。
模块导出：使用 module.exports = getMaxArrays; 将 getMaxArrays 函数导出，以便在其他模块中使用（虽然在当前的 HTML 页面中没有实际体现模块导入的场景，但这是为了函数的可复用性而设置的）。

三、工作流程▶️

浏览器加载 HTML 页面，解析并执行页面中的代码。
引入外部 JavaScript 文件 ./js/index.js，其中包含 getMaxArrays 函数的定义。
在页面内的 JavaScript 代码中，定义不同的测试用例，包括不同长度的数组组合、空参数、非数组参数等情况。
针对每个测试用例，调用 getMaxArrays 函数，传入相应的参数。
getMaxArrays 函数内部对输入进行检查，然后计算并返回长度最大的数组集合。
将函数的返回结果转换为字符串，并添加到页面的 id 为 main 的 <div> 元素中显示出来，用户可以在页面上看到不同测试用例下函数的执行结果。