我有一个对象数组，想要循环迭代来生成一个新的过滤数组。但同时，我需要根据一个参数过滤掉新数组中的某些对象。我正在尝试这样做：
function renderOptions(options) {
return options.map(function (option) {
if (!option.assigned) {
return (someNewObject);
}
});
}
这是一种好方法吗？还有更好的方法吗？我愿意使用任何库，比如lodash。
你应该使用Array.reduce来完成此任务。
var options = [
{ name: 'One', assigned: true },
{ name: 'Two', assigned: false },
{ name: 'Three', assigned: true },
];
var reduced = options.reduce(function(filtered, option) {
if (option.assigned) {
var someNewValue = { name: option.name, newProperty: 'Foo' }
filtered.push(someNewValue);
}
return filtered;
}, []);
document.getElementById('output').innerHTML = JSON.stringify(reduced);<h1>Only assigned options</h1>
<pre id="output"> </pre>另外，reducer也可以是一个纯函数，像这样：
var reduced = options.reduce(function(result, option) {
if (option.assigned) {
return result.concat({
name: option.name,
newProperty: 'Foo'
});
}
return result;
}, []);
filtered 是一个对象。因此，filtered.push 对我来说是未定义的。 - Rahmathullah Mfiltered是对象的问题。这是因为在reduce函数之后，我没有传入“初始值”——空数组（[]）。例如不正确的方式：var reduced = options.reduce(function(filtered, option) { ... });正确的方式是：var reduced = options.reduce(function(filtered, option) { ... }, []); - Jon HigginsflatMap，因为它不允许我们进行过滤。除非我们在这种情况下返回一个空数组。但我认为这并不方便读者。 - thefourtheyeoptions.flatMap(o => o.assigned ? [o.name] : []);
来自上面链接的 MDN 页面：
flatMap可以用作一种在映射过程中添加和删除项目（修改项目数量）的方法。换句话说，它允许您将许多项目映射到许多项目（通过单独处理每个输入项目），而不总是一对一。从这个意义上讲，它的工作方式类似于 filter 的相反操作。只需返回一个包含1个元素的数组以保留该项，返回包含多个元素的数组以添加项目，或返回一个空数组以删除该项。
options.flatMap(({assigned, name}) => assigned ? [name] : []); - davetapley使用ES6可以非常简洁地实现：
options.filter(opt => !opt.assigned).map(opt => someNewObject)
options.reduce(res,options....。回答@Zuker。 - hassan khademi使用 reduce，卢克！
function renderOptions(options) {
return options.reduce(function (res, option) {
if (!option.assigned) {
res.push(someNewObject);
}
return res;
}, []);
}
我想留下评论，但是我没有足够的声望。对 Maxim Kuzmin 很好的回答进行一点小改进，以使其更加高效：
const options = [
{ name: 'One', assigned: true },
{ name: 'Two', assigned: false },
{ name: 'Three', assigned: true },
];
const filtered = options
.reduce((result, { name, assigned }) => assigned ? result.push(name) && result : result, []);
console.log(filtered);解释
与其在每次迭代中反复传递整个结果，我们只是将其附加到数组中，并且仅在实际插入值时才这样做。
在这里，使用ES6的精巧的扩展语法进行一行reduce的操作！
var options = [
{ name: 'One', assigned: true },
{ name: 'Two', assigned: false },
{ name: 'Three', assigned: true },
];
const filtered = options
.reduce((result, {name, assigned}) => [...result, ...assigned ? [name] : []], []);
console.log(filtered);result中的所有元素扩展开来...就像filter(assigned).map(name)解决方案。 - 0zkr PM...assigned ? [name] : [] 的含义 - 如果写成 ...(assigned ? [name] : []) 可能更易读。 - johansenja在某些情况下，使用forEach更容易（或同样容易）。
var options = [
{ name: 'One', assigned: true },
{ name: 'Two', assigned: false },
{ name: 'Three', assigned: true },
];
var reduced = []
options.forEach(function(option) {
if (option.assigned) {
var someNewValue = { name: option.name, newProperty: 'Foo' }
reduced.push(someNewValue);
}
});
document.getElementById('output').innerHTML = JSON.stringify(reduced);<h1>Only assigned options</h1>
<pre id="output"> </pre>然而，如果有一个将 map 和 filter 函数结合起来的 malter() 或 fap() 函数会更好。它将像一个过滤器一样工作，但不是返回 true 或 false，而是返回任何对象或 null/undefined。
Array.prototype.filter 方法：function renderOptions(options) {
return options.filter(function(option){
return !option.assigned;
}).map(function (option) {
return (someNewObject);
});
}
if (cond) { stmt; } 重写为 cond && stmt;forEach 迭代每个元素来工作。 然后，在 forEach 循环的主体中，我们有条件作为过滤器，它确定我们是否要向结果数组附加内容。
const options = [
{ name: 'One', assigned: true },
{ name: 'Two', assigned: false },
{ name: 'Three', assigned: true },
];
const reduced = [ ];
options.forEach(o => {
o.assigned && reduced.push( { name: o.name, newProperty: 'Foo' } );
} );
console.log(reduced);解决方案2：使用reduce
这个解决方案使用Array.prototype.reduce而不是forEach来迭代数组。它认识到reduce既有初始化器又有内置的循环机制。除此之外，这个解决方案和forEach的解决方案基本相同，所以，区别在于语法上的差异。
const options = [
{ name: 'One', assigned: true },
{ name: 'Two', assigned: false },
{ name: 'Three', assigned: true },
];
const reduced = options.reduce((a, o) => {
o.assigned && a.push( { name: o.name, newProperty: 'Foo' } );
return a;
}, [ ] );
console.log(reduced);我让你自己决定采用哪个解决方案。
cond && stmt;？这种写法更难阅读，而且没有任何好处。 - jlhconst inputArray = [1, 2, 3, 4, 5];
const filterOddPlusOne = inputArray.filter((item) => item % 2).map((item) => item + 1); // [ 2, 4, 6 ]
const filterMap = <TSource, TTarget>(
items: TSource[],
filterFn: (item: TSource) => boolean,
mapFn: (item: TSource) => TTarget
) =>
items.reduce((acc, cur): TTarget[] => {
if (filterFn(cur)) return [...acc, mapFn(cur)];
return acc;
}, [] as TTarget[]);
flatMapconst filterMap = <TSource, TTarget>(
items: TSource[],
filterFn: (item: TSource) => boolean,
mapFn: (item: TSource) => TTarget
) => items.flatMap((item) => (filterFn(item) ? [mapFn(item)] : []));
reduce和flatMap解决方案相同）：const inputArray = [1, 2, 3, 4, 5];
const filterOddPlusOne = filterMap(
inputArray,
(item) => item % 2, // Filter only odd numbers
(item) => item + 1 // Increment each number
); // [ 2, 4, 6 ]
上述代码为 TypeScript，但问题要求使用 JavaScript。因此，我已经为您删除了所有泛型和类型：
const filterMap = (items, filterFn, mapFn) =>
items.reduce((acc, cur) => {
if (filterFn(cur)) return [...acc, mapFn(cur)];
return acc;
}, []);
const filterMap = (items, filterFn, mapFn) =>
items.flatMap((item) => (filterFn(item) ? [mapFn(item)] : []));
.reduce()比.filter(...).map(...)更快，这一点已经被其他人提出来了。我设置了一个JSPerf测试来证明 https://dev59.com/ol8d5IYBdhLWcg3wiSnI#47877054 - Justin L.