畫線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 。