过滤器在循环对象属性（对象数组）时返回空数组

Question

我不明白为什么当我尝试循环对象的数组属性时，过滤器返回一个空数组。

不过，当我试着做控制台的时候。日志（this.users）在getFilteredUsers方法中，我可以在它的原型中看到filter方法。。。

var userService = {
  currentFilter: "active",
  users: [
    { name: "Alex", status: "active" },
    { name: "Nick", status: "deleted" }
  ],
  getFilteredUsers: function() {
    // console.log(this.users);
    return this.users.filter(function(user) {
      return user.status === this.currentFilter;
    });    
  }
};

console.log(userService.getFilteredUsers()); // []

Answer 1

问题是这个对象的作用域。它在Filer（）的回调函数中改变。有两种方法可以尝试：

1. 在过滤器回调函数之前，在函数中创建一个新的过滤器变量，类似：

js prettyprint-override">var userService = {
    currentFilter: "active",
    users: [{
            name: "Alex",
            status: "active"
        },
        {
            name: "Nick",
            status: "deleted"
        }
    ],
    getFilteredUsers: function() {
        const currentStatus = this.currentFilter;
        return this.users.filter(function(user) {
            return user.status === currentStatus;
        });
    }
};

console.log(userService.getFilteredUsers()); //[ { name: 'Alex', status: 'active' } ]

Answer 2

这是因为它的价值

这

在过滤器回调中。使用箭头函数获取正确的值

var userService = {
  currentFilter: "active",
  users: [
    { name: "Alex", status: "active" },
    { name: "Nick", status: "deleted" }
  ],
  getFilteredUsers: function() {
    // console.log(this.users);
    return this.users.filter((user)=> {
      return user.status === this.currentFilter;
    });    
  }
};

console.log(userService.getFilteredUsers()); // []