如何用jQuery Grep过滤数组对象并修改对象属性值？

嘿，这个问题我之前也踩过坑！$.grep的核心作用其实是筛选数组元素，它的回调函数返回值只用来判断要不要保留当前元素（返回true留，false丢），所以你直接在回调里返回新对象是没用的——它会把这个新对象当成true，然后把原数组里的元素塞进结果里，这就是为啥你得到的还是原对象。

那怎么优雅地实现“筛选+转换结构”呢？其实只需要把筛选和结构转换拆成两步，用链式调用就能搞定：

方法一：jQuery链式调用（grep + map） #

先通过$.grep筛选出符合条件的元素，再用$.map把这些元素转换成你想要的新结构：

let array1 = $.grep(data, function(item) {
  // 这里写你的筛选条件，比如 item.temperature > 20 && item.humidity < 60
  return 条件a && 条件b;
}).map(function(item) {
  // 构造你需要的新对象
  return { id: item.id, text: item.temperature };
});

如果你的项目支持ES6箭头函数，还能写得更简洁：

let array1 = $.grep(data, item => 条件a && 条件b)
               .map(item => ({ id: item.id, text: item.temperature }));

方法二：原生JS（filter + map） #

其实现在原生JS数组方法已经足够好用，不需要依赖jQuery也能轻松实现，代码更轻量：

let array1 = data
  .filter(item => 条件a && 条件b)
  .map(item => ({ id: item.id, text: item.temperature }));

这种方式的好处是职责分离，筛选和结构转换各干各的事，代码清晰易懂，完全不用回到原来的$.each循环，绝对算是优雅的实现啦！

内容的提问来源于stack exchange，提问作者J. Doe