JavaScript - 将 for 循环中的多个结果推送到数组中

Question

我创建了一个基本系统来输出与指定用户具有相同类型兴趣的用户。 我想将 for 循环的结果推送到一个数组中，但是我只能将最后一个 for 循环输出推送到数组中，但我希望所有结果都被“推送”。 有什么建议吗？

// User database
var jon = {username: 'Jon', genrePref: 'Rock'};
var lucy = {username: 'Lucy', genrePref: 'Pop'};
var mike = {username: 'Mike', genrePref: 'Rock'};
var luke = {username: 'Luke', genrePref: 'House'};
var james = {username: 'James', genrePref: 'House'};
var dave = {username: 'Dave', genrePref: 'Bass'};
var sarah = {username: 'Sarah', genrePref: 'Country'};
var natalie = {username: 'Natalie', genrePref: 'Bass'};

//userProfile.push()

// User database array
var userProfile = [jon, lucy, mike, luke, james, dave, sarah, natalie];


// Object containing username of logged in user and specification of the loaded track's genre
var trackGenre = {username: 'Harry', trackGenre: 'Rock'};

// For loop listing usernames of users with genre preference the same as the distributed track
for(i = 0; i < userProfile.length; i++){

  if(userProfile[i].genrePref == trackGenre.trackGenre){

    console.log(userProfile[i].username);

    var matchs = [];

    matchs.push(userProfile[i].username);

  }
}

console.log(matchs)

Answer 1

将 var 的声明上移 - 你每次都在恢复它，从而将其清除：

var trackGenre = {username: 'Harry', trackGenre: 'Rock'};

var matchs = [];

// For loop listing usernames of users with genre preference the same as the distributed track
for(i = 0; i < userProfile.length; i++){

 if(userProfile[i].genrePref == trackGenre.trackGenre){

    console.log(userProfile[i].username);

    matchs.push(userProfile[i].username);

    }
}

Answer 2

作为@Montagist 发布的补充答案，我想我会展示两种替代方法来实现您的既定目标，第一种方法是使用Array.prototype.forEach()，而不是for 循环，它也会遍历数组用户数：

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
var mike = {
  username: 'Mike',
  genrePref: 'Rock'
};
var luke = {
  username: 'Luke',
  genrePref: 'House'
};
var james = {
  username: 'James',
  genrePref: 'House'
};
var dave = {
  username: 'Dave',
  genrePref: 'Bass'
};
var sarah = {
  username: 'Sarah',
  genrePref: 'Country'
};
var natalie = {
  username: 'Natalie',
  genrePref: 'Bass'
};

// User database array
var userProfile = [jon, lucy, mike, luke, james, dave, sarah, natalie];


// Object containing username of logged in user and specification of the loaded track's genre
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },
  matches = [];

// iterating over the userProfile Array, using
// Array.prototype.forEach():
userProfile.forEach(function(user) {
  // 'user', the first and only argument, is a
  // reference to the current Array element of
  // the Array over which we're iterating.

  // if the genrePref property of the current
  // user Object is equal to the trackGenre
  // property of the trackGenre Object:
  if (user.genrePref === trackGenre.trackGenre) {

    // we use Array.prototype.push() to add that
    // property to the matches Array:
    matches.push(user.username);
  }
});

console.log(matches) // ["Jon", "Mike"]

JS Fiddle demo.

另一个同时使用Array.prototype.map() 和Array.prototype.filter()：

// User database
var jon = {
  username: 'Jon',
  genrePref: 'Rock'
};
var lucy = {
  username: 'Lucy',
  genrePref: 'Pop'
};
var mike = {
  username: 'Mike',
  genrePref: 'Rock'
};
var luke = {
  username: 'Luke',
  genrePref: 'House'
};
var james = {
  username: 'James',
  genrePref: 'House'
};
var dave = {
  username: 'Dave',
  genrePref: 'Bass'
};
var sarah = {
  username: 'Sarah',
  genrePref: 'Country'
};
var natalie = {
  username: 'Natalie',
  genrePref: 'Bass'
};

// User database array
var userProfile = [jon, lucy, mike, luke, james, dave, sarah, natalie];


// Object containing username of logged in user and specification of the loaded track's genre
var trackGenre = {
    username: 'Harry',
    trackGenre: 'Rock'
  },

  // Array.prototype.map() returns a new Array:
  matches = userProfile.map(function(user) {
    // 'user', the first and only argument here, is
    // a reference to the current Array element of
    // the Array over which we're iterating; here
    // it's an Object.

    // if the genrePref property of the current
    // user Object is exactly equal to the
    // trackGenre property of the trackGenre Object:
    if (user.genrePref === trackGenre.trackGenre) {

      // we return the username of the current
      // user Object
      return user.username;
    }

  // in those situations where the if condition evaluated
  // to false the anonymous function returns undefined; so
  // here we use Array.prototype.filter(), with a Boolean,
  // to retain only those array-elements which are true/truthy:
  }).filter(Boolean);

console.log(matches) // ["Jon", "Mike"]

JS Fiddle demo.

参考资料：

• Array.prototype.filter()。
• Array.prototype.forEach()。
• Array.prototype.map()。