如何使用Lodash过滤对象数组的数据

Question

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];

现在我想获取id为3的名称。 我尝试过

var data = _.filter(brands, { 'id': 3 });
console.log(data.name);

但是它会报错，无法读取未定义的属性。假设只有一条记录的id = 3，有人可以帮我吗？如何从上面的结构中获取给定id的名称。

如果有更好的方法来获得相同的结果，也将受到赞赏。

- Devesh Agrawal

Answer 1

使用原生JavaScript的Array#find方法。

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];

var data = brands.find(function(v) {
  return v && v.id == "3";
});

console.log(data.name);

如果您需要在旧浏览器中使用，请检查find方法的polyfill选项。

---

如果您想要过滤数组，则可以使用Array#filter方法。

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];

var data = brands.filter(function(v) {
  return v && v.id == "3";
});

console.log(data[0].name);

---

更新： 根据文档，您的第二个参数会提供一个对象，它使用_.matches来比较属性值。在您的数组中，id属性保存为字符串，但是您在过滤器中却将其作为数字提供，只需将其更改为字符串即可使其正常工作，或者像@Satpal答案中那样使用回调函数。

var brands = [];
brands = [null, {
  "id": "1",
  "image": "/images/brands/surf_excel.png",
  "name": "Surf Excel",
  "productCount": "6"
}, {
  "id": "2",
  "image": "/images/brands/rin.png",
  "name": "Rin",
  "productCount": "5"
}, {
  "id": "3",
  "image": "/images/brands/ariel.png",
  "name": "Ariel",
  "productCount": "4"
}];
var data = _.filter(brands, {
  'id': "3"
});
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>

- Pranav C Balan

---

在我看来，如果楼主在询问“filter”，那么很可能存在多个元素具有相同的“id”。 - Rayon

@Rayon：那他就不会使用 data.name :) - Pranav C Balan

@Rayon：无论如何，我刚刚也添加了过滤方法 :) - Pranav C Balan

Answer 2

您已经指定了lodash并使用它的_.filter()方法。您可以传递谓词，它可以是一个函数，每次迭代都会调用该函数。请注意，它将返回一个数组。

var data = _.filter(brands, function(brand){
   return brand != null && brand.id == 3;
});
console.log(data[0].name);

如果您只想要一个元素，则使用 _.find()。

var data = _.find(brands, function(brand){
   return brand != null && brand.id == 3;
});
console.log(data.name);

- Satpal

Answer 3

除了使用filter()代替find()之外，你的代码已经非常接近正确了。你没有看到任何结果的原因是，你可以传递给find()/filter()的对象谓词执行严格的相等比较。也就是说，3 === '3'将会被评估为false。

- Adam Boduch