为什么我的 for 循环不访问该对象内的数组？

Question

我正在尝试绘制橙色椭圆，但代码底部的 for 循环没有绘制任何东西。我知道下面的代码是访问对象内部数组的正确方法，因为我在另一个任务中使用了它并且它起作用了。我以前有 beginShape();和 endShape()；在我的 for 循环之前和之后，但这也不起作用。

一切看起来都是正确的，但我不确定我做错了什么。我会感谢大家的帮助。谢谢

Case 601 - Cross Reference - stage 2

Fry is still on the loose. We think she’s resorted to stealing to get by.
Hopefully we can track her down by cross-referencing sightings and recent thefts in the area.

In the setup function, use a for loop to traverse the sightings, marking all of the locations on the map
where she was last seen. Do this by drawing small, DarkOrange stroke ellipses at each location.

In addition, we've assembled a list of recent thefts in the area. Using another for loop to traverse the
recent crime records, you should mark those locations on the map. Do this by drawing small, Magenta stroke rectangles centered over each location.

Use X11 colours. You can find a reference table at https://en.wikipedia.org/wiki/Web_colors.

For this mission you will need ONLY the following:

- for loop
- stroke
- ellipse()

- stroke
- rect() NB. Draw each rectangle with the point at its center.


*/

var countyMap;

//Sightings of Casey Fry.

var absconder_record = {
    Loc_X: [639, 681, 712, 756, 715, 701, 753, 815, 795, 788, 781, 768, 750, 732, 714, 695, 693, 654, 624, 594, 555],
    Loc_Y: [288, 286, 293, 310, 368, 425, 436, 468, 506, 497, 486, 489, 500, 506, 514, 531, 552, 523, 500, 484, 474],
};

//Recent crime records.

var robbery_record = [ 
  { PointX : 403, PointY : 401},
  { PointX : 402, PointY : 360},
  { PointX : 427, PointY : 403},
  { PointX : 646, PointY : 284},
  { PointX : 639, PointY : 264},
  { PointX : 830, PointY : 434},
  { PointX : 809, PointY : 443},
  { PointX : 844, PointY : 496},
  { PointX : 802, PointY : 350},
  { PointX : 683, PointY : 413},
  { PointX : 552, PointY : 464},
  { PointX : 629, PointY : 498},
  { PointX : 712, PointY : 562},
  { PointX : 783, PointY : 603},
  { PointX : 415, PointY : 225},
  { PointX : 561, PointY : 282},
  { PointX : 562, PointY : 392},
  { PointX : 751, PointY : 283},
  { PointX : 680, PointY : 359},
  { PointX : 626, PointY : 436},
  { PointX : 701, PointY : 455},
  { PointX : 838, PointY : 565},
  { PointX : 322, PointY : 508},
  { PointX : 468, PointY : 556},
  { PointX : 625, PointY : 737} 
];


function preload()
{
    countyMap = loadImage("map.png")
}

function setup()
{
  createCanvas(countyMap.width, countyMap.height);

    image(countyMap, 0,0);

    //add your code below here
    stroke(255, 140, 0);
    
    for(i = 0; i <absconder_record.Loc_X[i].length; i++ ){
        ellipse(absconder_record.Loc_X[i], absconder_record.Loc_Y[i], 5)
    }
    
    
    


}

这是它应该绘制的图像：

Answer 1

正在查看 i <absconder_record.Loc_X[i].length、

absconder_record.Loc_X是一个数组
absconder_record.Loc_X[i]是一个数字
absconder_record.Loc_X[i].length 是数字的 length 属性（强制转换为 Number 对象），即 undefined
对小于 undefined returns false
的数字进行比较检查

所以循环条件总是失败，循环体永远不会执行。

Answer 2

查看这一行：

 for(i = 0; i <absconder_record.Loc_X[i].length; i++ ){

我想你的意思是：

i <absconder_record.Loc_X.length

i <absconder_record.Loc_X[i].length

i 是 0
absconder_record.Loc_X[0] 是 639
639 没有 length 属性.

跟进评论中的问题：

how do you loop through the array robbery_record?

A for loop 有 3 个表达式：

初始化器，通常用于初始化计数器，如i = 0;。（这运行仅一次，并非每次迭代都如此。）
要测试的条件。如果条件为真，则循环体运行s。最常见的用途是查看计数器是否超过某个阈值，如 i > 10。如果 i 小于 10，运行循环体。
一个在每次循环迭代后运行秒的表达式。最常用于递增计数器：i++.

合起来看起来像这样：

for (let i = 0; i < 10; i++) {
  // body
}

i 以 0.
判断条件：i是否小于10？
如果是，循环体运行s.
在正文运行s 之后，执行最后一个表达式 (i++)。现在我是 1.
重复 2-4 直到条件不再为真（当 i 不再小于 10 时）。

要使用 for 循环遍历数组，常用的方法是完全按照上面的方法进行，但是将 10 替换为数组的长度。所以在你的情况下 robbery_record:

for (let i = 0; i < robbery_record.length; i++) {
  // do stuff
}

通常有人这样做是因为他们想为数组中的每个项目执行一次正文。方便的是，因为 i 每次通过循环都会递增，您可以通过 robbery_record[i]:

获取循环体内的当前项

for (let i = 0; i < robbery_record.length; i++) {
  const record = robbery_record[i];
  // do stuff with the current record
}

您的每个 robbery_record 条目都是一个具有 PointX 和 PointY 属性的对象，因此您可以在循环主体中使用它们：

for (let i = 0; i < robbery_record.length; i++) {
  // record is an object, like: { PointX: 123, PointY: 456 }
  const record = robbery_record[i];

  // do stuff with the object's properties
  console.log(record.PointX) // 123
  console.log(record.PointY) // 456

  const x = record.PointX; // now x === 123
  const y = record.PointX; // now y === 456

  // etc.
}

希望这对您有所帮助。

为什么我的 for 循环不访问该对象内的数组？

Why is my for-loop not accessing the arrays inside this object?

javascript

arrays

for-loop

p5.js