javascript - 递归添加数组中点之间的中点

Question

我正在尝试创建一个函数，该函数获取数组中的所有点并返回一个数组，其中每对相邻点之间有一个附加点。例如，从 (2, 10) 开始，我将得到列表的以下迭代:

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

我的代码:

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>

已修复代码，谢谢!

Answer 1

问题在于您在迭代列表时正在修改列表。 停下来! :-)

创建根据原始列表构建的第二个列表，并返回第二个列表。或者，您可以尝试以相反的顺序进行迭代，但这会使您依赖于拼接语义——这仍然是一种危险的做法。