Javascript循环遍历对象数组

Question

第一次发帖。通过stackoverflow寻找答案，但没有找到。如果我错过了，这是一个重复的问题，请评论一个链接，我会删除这个！ （这里是新手）

所以基本上，我有一个包含对象的数组them_dogs。我正在尝试编写一个接受数组和对象值的函数，比如'tennis ball'。然后，此函数将查看数组中的每个项目并检查值 'tennis ball' 是否存在。如果是这样，它将返回项目名称。

var them_dogs = [{
        name: 'Henry',
        age: 0.5,
        breed: 'Aussie',
        food: 'kibble',
        toys: ['tennis ball', 'chew toy'],
        picture: 'http://rubyriverminiaustralianshepherds.com/wp-content/uploads/aussie-puppy-for-sale-940x412.jpg'
    }, {
        name: 'Tilly',
        age: 5,
        breed: 'Mutt',
        food: 'kibble',
        toys: ['bone', 'kong', 'squeaky toy'],
        picture: 'http://www.dogchannel.com/images/zones/top_promo/excited-mixed-breed.jpg'
    }, {
        name: 'Apollo',
        age: 10,
        breed: 'Labrador',
        food: 'absolutely anything',
        toys: ['old sock', 'other old sock', 'more old socks'],
        picture: 'http://media.cmgdigital.com/shared/img/photos/2014/08/01/5a/66/LadyLabrador.jpg'
    }]

这里是函数

    var findDogByToy = function (arr, toyname) {
      arr.forEach (function (item) {
        if (item.toys === toyname) {
          return item.name;
        }
      })
    }

findDogByToy(them_dogs, 'tennis ball');

Answer 1

正如其他人所提到的，使用 forEach 来解决这个问题是一种幼稚的方法，但是对于 Array 函数的初学者来说，这个解释可能对你的理解很有帮助：

function findDogByToy(array, toy) {
  // loop across each item in the array
  var result;
  array.forEach(function(dog) {
    // check that item (which is an object) to see if toy is in there
    dog.toys.forEach(function(item) {
      //if it is, then return item name
      if (item === toy) {
        result = dog.name;
      }
    });
  });
  return result;
}

Answer 2

我认为您可能想要使用 filter() 和 map() 而不是 forEach()。这样，如果您有多个名称，您将获得一组名称。

var them_dogs = [{
        name: 'Henry',
        age: 0.5,
        breed: 'Aussie',
        food: 'kibble',
        toys: ['tennis ball', 'chew toy'],
        picture: 'http://rubyriverminiaustralianshepherds.com/wp-content/uploads/aussie-puppy-for-sale-940x412.jpg'
    }, {
        name: 'Tilly',
        age: 5,
        breed: 'Mutt',
        food: 'kibble',
        toys: ['bone', 'kong', 'squeaky toy'],
        picture: 'http://www.dogchannel.com/images/zones/top_promo/excited-mixed-breed.jpg'
    }, {
        name: 'Apollo',
        age: 10,
        breed: 'Labrador',
        food: 'absolutely anything',
        toys: ['old sock', 'other old sock', 'more old socks'],
        picture: 'http://media.cmgdigital.com/shared/img/photos/2014/08/01/5a/66/LadyLabrador.jpg'
    }]

    var findDogByToy = function (arr, toyname) {
      return arr.filter (function (item) {
        return item.toys.indexOf(toyname) > -1;
      }).map( function(o){ return o.name; });
    }

console.log(findDogByToy(them_dogs, 'tennis ball'));

其他选项，只需使用简单的 for 循环并推送到数组。

Answer 3

1. 请使用every，而不是forEach。 every 更简洁，因为您不想修改 any 元素。此外，更难突破forEach。见how to stop Javascript forEach?
2. 使用indexOf检测toyname是否存在于toys数组中
3. findDogByToy 实际上需要返回一个值以使调用者受益

var them_dogs = [{
  name: 'Henry',
  age: 0.5,
  breed: 'Aussie',
  food: 'kibble',
  toys: ['tennis ball', 'chew toy'],
  picture: 'http://rubyriverminiaustralianshepherds.com/wp-content/uploads/aussie-puppy-for-sale-940x412.jpg'
}, {
  name: 'Tilly',
  age: 5,
  breed: 'Mutt',
  food: 'kibble',
  toys: ['bone', 'kong', 'squeaky toy'],
  picture: 'http://www.dogchannel.com/images/zones/top_promo/excited-mixed-breed.jpg'
}, {
  name: 'Apollo',
  age: 10,
  breed: 'Labrador',
  food: 'absolutely anything',
  toys: ['old sock', 'other old sock', 'more old socks'],
  picture: 'http://media.cmgdigital.com/shared/img/photos/2014/08/01/5a/66/LadyLabrador.jpg'
}];

var findDogByToy = function(arr, toyname) {
  var name;
  arr.every(function(item) {
    if (item.toys.indexOf(toyname) > -1) {
      name = item.name;
      return false;
    }
  });
  return name;
}


console.log(findDogByToy(them_dogs, 'tennis ball'));