Rekursives Hinzufügen von Mittelpunkten zwischen Punkten in einem Array

Question

Ich versuche eine Funktion zu erstellen, die alle Punkte in einem Array übernimmt und ein Array mit einem zusätzlichen Punkt zwischen jedem Paar benachbarter Punkte zurückgibt. Zum Beispiel, beginnend mit (2, 10), würde ich die folgenden Iterationen in die Liste erhalten:

(2, 14) 
(2, 8, 14) 
(2, 5, 8, 11, 14) 
(2, 3.5, 5, 6.5, 8, 9.5, 11, 12.5, 14) 

Mein Code:

var Width = 1000 
 
var Height = 1000 
 
const svg = document.getElementById('svg1') 
 
svg.setAttribute('width', Width) 
 
svg.setAttribute('height', Height) 
 

 
var seg = function(point) { 
 
    var segment = document.createElementNS("http://www.w3.org/2000/svg", "circle") 
 
    segment.setAttribute("cx", point.x) 
 
    segment.setAttribute("cy", point.y) 
 
    segment.setAttribute("r", 1) 
 
    segment.setAttribute("fill", "none") 
 
    segment.setAttribute('stroke', "#f00") 
 
    segment.setAttribute('stroke-width', 0.5) 
 
    svg.appendChild(segment) 
 
} 
 

 
const mid = function(pa, pb) { 
 
    let cx = (pa.x + pb.x)/2 
 
    let cy = (pa.y + pb.y)/2 
 
    return { 
 
    x: cx, 
 
    y: cy 
 
    } 
 
} 
 

 
var testarray = [{ 
 
    x: 0, 
 
    y: 100 
 
}, { 
 
    x: 400, 
 
    y: 50 
 
}] 
 

 
const split = function(a) { 
 

 
    let b = [] 
 
    let c = [] 
 
    for (i = 0; i < a.length - 1; i++) { 
 
    b.push(mid(a[i], a[i + 1])) 
 
    c.push(a[i]) 
 
    c.push(b[i]) 
 
    } 
 
    c.push(a[a.length - 1]) 
 
    return c 
 

 
} 
 

 
while (testarray.length < 30) { 
 
    var testarray = split(testarray) 
 
} 
 

 
var counter = 0 
 
while (counter < testarray.length) { 
 
    seg(testarray[counter]) 
 
    counter++ 
 
}

<svg id="svg1"></svg>

Fest Code, danke!

Answer 1

Das Problem ist, dass Sie die Liste ändern, während Sie durchlaufen es. Hör auf damit! :-)

Erstellen Sie eine zweite Liste, die Sie aus dem Original erstellen, und geben Sie die zweite Liste zurück. Alternativ könnten Sie versuchen, in umgekehrter Reihenfolge zu iterieren, aber dies macht Sie abhängig von der Spleiß Semantik - was immer noch eine gefährliche Praxis ist.

Answer 2

Das Problem ist, dass das Array die Form ändert, wenn Sie Elemente hinzufügen, aber Ihre Schleife auf i berücksichtigt dies nicht. Eine schnelle Lösung wäre es, den Wert i nach dem Einfügen in den neuen Wert zu erhöhen, wie auch in der for-Schleife üblich.

const split = function(a){ 
    for(i=0;i<a.length-1;i++){ 
     let b = mid(a[i],a[i+1]) 
     a.splice(i+1,0,b) 
     i++ 
     if(a.length>100){return} 
    } 
}