javascript过滤数组多个条件

IT技术 javascript arrays filter
2021-02-01 05:03:27

我想简化一组对象。让我们假设我有以下数组：

var users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
    },
    {
        name: 'Tom',
        email: 'tom@mail.com',
        age: 35,
        address: 'England'
    },
    {
        name: 'Mark',
        email: 'mark@mail.com',
        age: 28,
        address: 'England'
}];

和过滤对象：

var filter = {address: 'England', name: 'Mark'};

例如，我需要按地址和名称过滤所有用户，所以我循环过滤器对象属性并检查它：

function filterUsers (users, filter) {
    var result = [];
    for (var prop in filter) {
        if (filter.hasOwnProperty(prop)) {

            //at the first iteration prop will be address
            for (var i = 0; i < filter.length; i++) {
                if (users[i][prop] === filter[prop]) {
                    result.push(users[i]);
                }
            }
        }
    }
    return result;
}

因此，在第一次迭代中，何时prop - address将等于'England'两个用户将添加到数组结果中（名称为 Tom 和 Mark），但在第二次迭代中，当prop name将相等时，Mark只有最后一个用户应添加到数组结果中，但我最终得到了两个数组中的元素。

我对它为什么会发生有了一点想法，但仍然坚持下去并且找不到解决它的好方法。任何帮助都是可观的。谢谢。

6个回答

你可以这样做

var filter = {
  address: 'England',
  name: 'Mark'
};
var users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];


users= users.filter(function(item) {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});

console.log(users)

很好的答案。当您想根据多个条件进行过滤时怎么办，例如： var filter_address = ['England', 'UK']; var filter_name = ['Tom','Anne']; ?
2021-03-22 05:03:27
如果过滤条件是一个数组呢？
2021-03-23 05:03:27
您应该为过滤器变量选择不同的名称。为变量提供受保护的名称是一种糟糕的编码习惯。特别是因为您在几行之后最终使用该受保护的名称来调用 Array.prototype.filter 方法。
2021-03-26 05:03:27
这是一个很好的，但实际上我得到了 Uncaught ReferenceError: filter is not defined
2021-03-27 05:03:27
@andrussk var country = ["England", "UK"], names = ["Tom", "Anne"]; users.filter(el => (country.indexOf(el.address) >= 0 && names.indexOf(el.name) >=0 ) );
2021-04-07 05:03:27

如果您知道过滤器的名称，则可以在一行中完成。

users = users.filter(obj => obj.name == filter.name && obj.address == filter.address)
@EddieFreeman 如果您不知道您将拥有哪些过滤器，您将如何解决这个问题？
2021-03-14 05:03:27
这假设您有姓名和地址作为过滤器
2021-04-03 05:03:27

对于那些喜欢简洁代码的人来说，这是另一种选择。

注意：FILTER方法可以使用额外的this参数，然后使用 E6 箭头函数我们可以重用正确的this来获得一个不错的单行。

var users = [{name: 'John',email: 'johnson@mail.com',age: 25,address: 'USA'},
             {name: 'Tom',email: 'tom@mail.com',age: 35,address: 'England'},
             {name: 'Mark',email: 'mark@mail.com',age: 28,address: 'England'}];

var query = {address: "England", name: "Mark"};

var result = users.filter(search, query);

function search(user){
  return Object.keys(this).every((key) => user[key] === this[key]);
}




// |----------------------- Code for displaying results -----------------|
var element = document.getElementById('result');

function createMarkUp(data){
  Object.keys(query).forEach(function(key){
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(
    key.toUpperCase() + ': ' + result[0][key]));
    element.appendChild(p);
  });
}

createMarkUp(result);
<div id="result"></div>

这是在过滤器中使用箭头函数的 ES6 版本。将此作为答案发布，因为我们大多数人现在都在使用 ES6，并且可以帮助读者使用箭头函数、let 和 const 以高级方式进行过滤。

const filter = {
  address: 'England',
  name: 'Mark'
};
let users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];


users= users.filter(item => {
  for (let key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});

console.log(users)

使用Array.Filter()和箭头函数，我们可以使用

users = users.filter(x => x.name == 'Mark' && x.address == 'England');

这是完整的片段

// initializing list of users
var users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];

//filtering the users array and saving 
//result back in users variable
users = users.filter(x => x.name == 'Mark' && x.address == 'England');


//logging out the result in console
console.log(users);

比较 x.name == 'Mark' 可能会导致意外的类型强制
2021-04-10 05:03:27
其它你可能感兴趣的问题
上一篇浏览器会话存储。在标签之间共享？ 下一篇JavaScript 数学，四舍五入到小数点后两位