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)

我的代码：

＆＃13;

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++
}

＆＃13;

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

＆＃13;

修正了代码，谢谢！

Answer 1

问题是你正在修改列表，而则迭代它。停止！： - ）

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

Answer 2

问题是，当您向其中添加项目时，数组会改变形状，但i上的循环并未考虑到这一点。一个快速的解决方案是在拼接新值后增加i，以及像for循环一样。

 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}
    }
 }

递归地在数组中的点之间添加中点

2 个答案: