创建一个函数，该函数将从嵌套数组中获取多个形状，每个形状都有其坐标。

Question

我正在尝试创建一个JavaScript函数，它将迭代表示嵌套数组中的1个或多个形状的数组，并且每个这些嵌套数组可能有不同数量的坐标来创建这些形状。在下面，我已经开始了此函数的开头，但是在思考逻辑时遇到了困难。

例如:

//This is a single 'shape' with 3 points
var coordsingle = [[1,1],[2,2],[3,3]];
//This one has 3 'shapes'
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形状
1 - 坐标 [1,1],[2,2],[3,3]

coordmultiple = 3形状
1 - 坐标 [1,1],[2,2],[3,3]
2 - 坐标 [4,4],[5,5],[6,6],[7,7],[8,8]
3 - 坐标 [-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{
// this only outputs the first nested arrays set of coordinates 
  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>");
  }

}

- HannahR10

Answer 1

看起来有几件事情需要处理。首先，您想要能够输入单个形状，并输出有关该形状的一些信息。 或者 您可能会获得一个形状数组，并能够为每个形状输出相同的“单个形状”信息。

这是可以实现的，但方法略有不同。首先，请考虑定义函数来处理单个形状数组：

const displayShapeInfo = (arr) => {
  return `--------------------------
  The number of endpoints is ${arr.length}
  those endpoints: [${arr.join('],[')}]`;
}

这只是将值作为字符串输出，但我们可以告诉该函数返回DOM元素，或者返回任何其他内容。关键是，该函数接受类似[[1,1],[2,2],[3,3]]的数组，并输出类似以下内容：

-------------------------------------
  The number of endpoints is 3
  those endpoints: [1,1],[2,2],[3,3]

它接受一个二维数组，输出该数组的信息。

如果是一个形状嵌套的数组，则为三级数组。从根节点开始，我们可以进入最深处的三个数组：主数组（最外层）、形状数组（中间层）和点数组（内层）。那么在这种情况下如何应用我们的单形状处理函数呢？

在这种情况下，我们只需要这样说：

const displayShapes = (arrayOfShapes) => {
  let info = []
  for(let i=0; i<arrayOfShapes.length; i++){
    info.push( displayShapeInfo(arrayOfShapes[i]) );
  }
  return info;
}

那个函数需要一个三维数组，并将我们的函数应用于顶层内的每个二维数组。是的，对于那些寻求完整性的人来说，这可以使用arrayOfShapes.map（displayShapeInfo）完成，但这可能会令人困惑。

接下来的部分将足够令人困惑。看，我们仍然不知道我们是否正在处理两级深度的数组还是三级深度的数组。我们需要以某种方式获取数组深度，告诉我们此数组的最大深度。这将决定我们想要走哪条路。

因此，为了找到javascript中的数组深度，我进行了一些搜索，发现了这个：

const getArrayDepth = (arr) => {
  // if arr is an array, recurse over it
  return Array.isArray(arr) ?
    1 + Math.max(...arr.map(getArrayDepth)) : 
    0; // otherwise, it's 0
}

该函数从最外层数组开始，如果它是一个数组，则在每个子元素上运行相同的函数，并在每次递归调用时添加1。简而言之，它将告诉我们每个嵌套数组的最大深度。

如果我们知道了这一点，我们就可以处理两种情况：

const displayShapeInfo = (arr) => {
  return `--------------------------
  The number of endpoints is ${arr.length}
  those endpoints: [${arr.join('],[')}]`;
}

const displayShapes = (arr) => {
  switch(getArrayDepth(arr)){
    case 2:
      // if this is a two-deep array, it is a *shape* array.
      return displayShapeInfo(arr);
    case 3:
      // if it's three-deep, it is an *array of shape arrays*.
      let info = [];
      for(let i=0; i<arrayOfShapes.length; i++){
        info.push( displayShapeInfo(arrayOfShapes[i]) );
      }
      return info;
    default:
      // *anything else*, we haven't specified how to handle
      return 'Unknown shapes array';
  }
}

要查看此示例，请访问https://replit.com/@TobiasParent/arraysOfShapes#index.js

。

- Snowmonkey