使用 forEach 遍历数组

Question

I am trying to make a basic program that loops through an array and logs the 'place' & 'distance' to the console. My program isn't working as intended and won't log the values to the console. What am I doing wrong and how can I fix it?

let destinations = [
  {place: ['Dubai'],
  distance: 7276},
  {place: ['Sydney'],
  distance: 8759},
  {place: ['London'],
  distance: 4166},
  {place: ['tokyo'],
  distance: 5754},
  {place: ['Seoul'],
  distance: 6037},
];

destinations.forEach(spot => {
    if (spot.length < 6) {
      console.log(`${spot} is an interesting vacation spot.
      Let's see how far it is before we pull the trigger`);
      destinations.forEach(howFar => {
        if (howFar < 6000) {
          console.log(`${spot} is close enough. Let's go there!`);
        } if (howFar > 6000) {
          console.log(`Nevermind. ${spot} is too far.`);
        }});
    }
});

Answer 1

You'll want to step through the code very carefully to try to see what the JS interpreter sees. It can help to put down the value of variables on scratch paper and how they change as you loop. That'll help you see your own mistakes:

destinations.forEach(spot => {

What is spot here? It'll be each value of destinations , so for example on the first iteration it'll be {place: ['Dubai'],distance: 7276} .

if (spot.length < 6) {

What would the length property be for {place: ['Dubai'],distance: 7276} ? That doesn't look like it'd have a length property. It's not an Array. Plus, what condition are you checking here? Are you sure you need an if statement here?

console.log(`${spot} is an interesting vacation spot.
Let's see how far it is before we pull the trigger`);

What would you expect to see putting spot in a string here? Its value is {place: ['Dubai'],distance: 7276} . Are you sure you're not wanting to get some value from the object to put into the string?

destinations.forEach(howFar => {

Isn't this looping over the same Array you looped over earlier? Given 6 destinations, this means it'll run 36 times. And what is howFar ? Since it's from destinations.forEach , it'll be one of the objects in the destinations array.

if (howFar < 6000) {

Would an object in the destinations array be comparable to a number? It's an object, so that won't work. Did you mean to access the distance property of the object?

My first piece of advice is to simplify your destinations Array. place is an Array of strings currently, but they're all single items, so you probably don't need an Array for that. Also, since you're not changing destinations , you could make it aa const variable which is helpful because it lets someone looking at your code know they don't have to worry about finding places where it might be changing:

const destinations = [
  {place: 'Dubai', distance: 7276},
  {place: 'Sydney', distance: 8759},
  {place: 'London', distance: 4166},
  {place: 'Tokyo', distance: 5754},
  {place: 'Seoul', distance: 6037},
];

Your way of looping through the destinations is fine, but you'll need to access the properties of the object, and you don't need the extraneous inner loop and if statement (unless you meant to do something with it that I'm not understanding).

destinations.forEach(spot => {
  console.log(`${spot.place} is an interesting vacation spot.
    Let's see how far it is before we pull the trigger`);
  if (spot.distance < 6000) {
    console.log(`${spot.place} is close enough. Let's go there!`);
  } else {
    console.log(`Nevermind. ${spot.place} is too far.`);
  }
});

Answer 2

You are basically doing an Object.length, wich doesn't exist. Try something like spot.place or spot.distance.

Also, you cannot do a destinations.forEach inside destinations. Is this really necessary? Try something like this:

destinations.forEach(spot => {
if (spot.place.length < 6) {
  console.log(`${spot.place} is an interesting vacation spot.
  Let's see how far it is before we pull the trigger`);
  if (spot.distance < 6000) {
     console.log(`${spot.place} is close enough. Let's go there!`);
  } else {
      console.log(`Nevermind. ${spot.place} is too far.`);
  }
}})