画线JavaScript的循环逻辑

Question

我有以下两个数组：

var element_1 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]);
var element_2 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]);

逻辑：我想运行一个循环（嵌套），其中将element_1每个元素（例如[x1,y1] ）与element_2每个元素进行比较，并且应在循环内计算它们之间的最短距离 （我知道如何计算最短路径）。 这里最棘手的部分是，我需要一个参考，该参考对使配对最短，然后获得那些[x1,y1]和[x2,y2]组合以画一条线。

样本数据：

var element_1 = new Array([10,0],[20,10],[10,20],[0,10]);
var element_2 = new Array([10,30],[20,40],[10,50],[0,40]);

线应该在[10,20]和[10,30]之间。 此外，我将以某种方式需要将坐标存储在某处以将其传递给线条绘制函数

我怎样才能做到这一点？ 任何线索将不胜感激。

Answer 1

这是我的方法：

 var element_1 = [[0,0],[1,2],[5,3],[6,8]]; var element_2 = [[0,1],[1,4],[5,9],[9,8]]; var closest = {a: false, b: false, distance: false}; for(var i=0; i<element_1.length; i++) { for(var j=0; j<element_2.length; j++) { var distance = calculate_distance(element_1[i], element_2[j]); console.log('Distance between element_1['+i+'] and element_2['+j+']: ' + distance); if(closest.distance === false || distance < closest.distance) { closest = {a: element_1[i], b: element_2[j], distance: distance}; } } } console.log('The shortest path is between '+closest.a+' and '+closest.b+', which is '+closest.distance); function calculate_distance(a, b) { var width = Math.abs( a[0] - b[0] ), height = Math.abs( a[1] - b[1] ), hypothenuse = Math.sqrt( width*width + height*height ); return hypothenuse; } 

正如Roko C. Buljan所说，在您的情况下，您可以只用[]替换new Array() 。 这就是为什么 。

Answer 2

好吧，我非常喜欢这个问题。 它启发了我发明一个通用的Array方法，以对两个数组中的每个其他项应用回调。 所以我称它为Array.prototype.withEachOther() 。 它确实是@blex在嵌套的for循环解决方案中所做的。 它将操作（由回调提供）应用于每个数组项以及另一个数组的项。 让我们看看它是如何工作的。

 Array.prototype.withEachOther = function(a,cb,s=0){ return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s); }; var element_1 = [[10,0],[20,10],[10,20],[0,10]], element_2 = [[10,30],[20,40],[10,50],[0,40]], cb = (p1,p2,q) => {var h = Math.hypot(p1[0]-p2[0],p1[1]-p2[1]); return h < qd ? {d:h,p1:p1,p2:p2} : q}, minDist = element_1.withEachOther(element_2,cb,{d:Number.MAX_SAFE_INTEGER,p1:[],p2:[]}); console.log(minDist); 

因此，让我们解释发生了什么。

Array.prototype.withEachOther = function(a,cb,s=0){
  return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);
};

是可重用的功能。 它将与两个数组中的其他每个元素一起执行回调函数中提供的操作。 它需要3个参数(a,cb,s=0) 。

• a是第二个数组，我们将对每个调用.withEachOther的数组的每个项应用回调。
• cb是回调。 下面，我将解释专门针对此问题的回调。
• s=0是我们将开始使用的初始值（默认值为0）。 它可以是任何东西，具体取决于回调函数。

return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s);

这部分是功能的核心。 如您所见，它有两个嵌套的reduces。 外部reduce具有由s表示的初始值，该初始值如上所述提供。 初始值最初分配给外部reduce的回调的p参数，另一个参数et与调用数组的每个项一个一分配。 （T他的电子字元素）。 在外部Reduce中，我们调用另一个Reduce（内部Reduce）。 内部约简从上一个循环结果的初始值开始，即外部约简的p ，并在每次计算后将结果返回到其减少值变量q 。 q是我们的内存，并在回调中进行了测试，以查看是否保持原样或将其替换为计算结果。 内部reduce完成一轮完整处理后，它将q返回p ，并且相同的机制将再次运行，直到我们完成调用.withEachOther的数组的所有项目.withEachOther 。

cb = (p1,p2,q) => {var h = Math.hypot(p1[0]-p2[0],p1[1]-p2[1]);
                   return h < q.d ? {d:h,p1:p1,p2:p2} : q}

回调对于此问题是特殊的。 它将收到两个点（每个点都有x和y坐标），将计算它们之间的距离并将其与先前进行的计算进行比较。 如果较小，它将通过返回此新值来替换q ； 如果不是，它将按原样返回q 。