编写JavaScript函数从嵌套数组提取多图形坐标的技术问题

我正在写一个JavaScript函数，用来遍历表示单个或多个图形的嵌套数组——每个子数组包含数量不定的坐标点来构建图形。已经写了函数雏形，但逻辑实现卡壳了。下面是示例输入、期望输出和待完善的函数代码：

示例输入 #

// 单个图形，包含3个点
var coordsingle = [[1,1],[2,2],[3,3]];
// 3个图形的情况
var coordmultiple = [[[1,1],[2,2],[3,3]],[[4,4],[5,5],[6,6],[7,7],[8,8]],[[-1,-1], [-2,-2],[-3,-3],[-4,-2],[-7,-3]]];

期望输出 #

coordsingle = 1 shape
1 - coordinates [1,1],[2,2],[3,3]

coordmultiple = 3 shapes
1 - coordinates [1,1],[2,2],[3,3]
2 - coordinates [4,4],[5,5],[6,6],[7,7],[8,8]
3 - coordinates [-1,-1], [-2,-2],[-3,-3],[-4,-2],[-7,-3]

待完善的函数代码 #

function extractCoordinates(shapeArray){
  let shapecount = data.length; 
  if(shapecount < 2){
   
   document.write("<br>"," The Shape count is ",shapecount,"<br>");
   document.write("<br>"," The amount of Coords ",data[0][0].length,"<br>");
   document.write("<br>",data,"<br>");

  }
  else{
// 这里只输出了第一个嵌套数组的坐标
  for(var coordpairs of shapecount){
    document.write("<br>"," The Shape count is ",shapecount,"<br>");
    document.write("<br>"," The amount of Coords ",data[0][0].length,"<br>");
    document.write("<br>",data,"<br>");
  }

}

问题分析与修复 #

原代码存在几个核心问题：

• 函数参数为shapeArray，但代码中误用了未定义的data变量，直接导致运行报错；
• 图形数量判断逻辑错误：单个图形的数组元素是坐标点（长度为2的数组），多图形的数组元素才是图形数组，原代码的长度判断无法区分两种场景；
• for...of循环不能直接遍历数字，需遍历图形数组；
• 输出格式与期望不符，且document.write在现代开发中不推荐使用。

修复后的函数 #

function extractCoordinates(shapeArray, arrayName) {
    // 判断是单个图形还是多图形集合
    const isSingleShape = Array.isArray(shapeArray[0]) && shapeArray[0].length === 2;
    const shapes = isSingleShape ? [shapeArray] : shapeArray;
    
    // 输出图形总数
    console.log(`${arrayName} = ${shapes.length} shape${shapes.length > 1 ? 's' : ''}`);
    
    // 遍历每个图形，格式化输出坐标
    shapes.forEach((shape, index) => {
        const coordsStr = shape.map(coord => `[${coord.join(',')}]`).join(',');
        console.log(`${index + 1} - coordinates ${coordsStr}`);
    });
    console.log(''); // 空行分隔不同输入的输出
}

// 测试调用
extractCoordinates(coordsingle, 'coordsingle');
extractCoordinates(coordmultiple, 'coordmultiple');

运行结果 #

coordsingle = 1 shape
1 - coordinates [1,1],[2,2],[3,3]

coordmultiple = 3 shapes
1 - coordinates [1,1],[2,2],[3,3]
2 - coordinates [4,4],[5,5],[6,6],[7,7],[8,8]
3 - coordinates [-1,-1],[-2,-2],[-3,-3],[-4,-2],[-7,-3]

关键优化点 #

• 新增arrayName参数，确保输出中能标识对应的输入变量名，匹配期望格式；
• 通过判断数组首元素的类型和长度，精准区分单图形/多图形场景；
• 使用forEach遍历图形数组，结合map快速格式化坐标字符串；
• 用console.log替代document.write，输出更灵活且符合现代开发规范。

内容的提问来源于stack exchange，提问作者HannahR10