blocks|key|4445808|text|使用reduce，Luke！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445809|function+renderOptions(options)+{
++++return+options.reduce(function+(res,+option)+{
++++++++if+(!option.assigned)+{
++++++++++++res.push(someNewObject);
++++++++}
++++++++return+res;
++++},+[]);+++
}|code-block|syntax|javascript|4445810|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use reduce, Luke!</p>

<pre><code>function renderOptions(options) {
    return options.reduce(function (res, option) {
        if (!option.assigned) {
            res.push(someNewObject);
        }
        return res;
    }, []);   
}
</code></pre>


blocks|key|4445880|text|使用ES6，您可以非常简短地完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445881|options.filter(opt+=>+!opt.assigned).map(opt+=>+someNewObject)|offset|length|style|CODE|4445882|entityMap^0|0|0|1Q|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>With ES6 you can do it very short:</p>

<p><code>options.filter(opt =&gt; !opt.assigned).map(opt =&gt; someNewObject)</code></p>


blocks|key|4445984|text|这里有一行带有ES6花式spread+syntax的reduce！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445985|​|4445986|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);|code-block|syntax|javascript|4445987|4445988|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax^0|Q|6|C|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>One line <code>reduce</code> with ES6 fancy <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" rel="noreferrer">spread syntax</a> is here! </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, {name, assigned}) =&gt; [...result, ...assigned ? [name] : []], []);

console.log(filtered);</code></pre>
</div>
</div>
</p>


blocks|key|4445927|text|在某种程度上，使用forEach不是更容易(或同样容易)吗|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445928|​|4445929|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);|code-block|syntax|javascript|4445930|<h1>Only+assigned+options</h1>
<pre+id="output">+</pre>|4445931|4445932|但是，如果有一个结合了map和filter函数的malter()或fap()函数就更好了。它的工作原理与过滤器类似，只是它不会返回true或false，而是返回任何对象或null/undefined。|4445933|entityMap^0|9|7|0|0|0|0|0|B|3|F|6|O|8|X|5|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|S|$]]

<p>At some point, isn't it easier(or just as easy) to use a <code>forEach</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Only assigned options&lt;/h1&gt;
&lt;pre id="output"&gt; &lt;/pre&gt;</code></pre>
</div>
</div>
</p>

<p>However it would be nice if there was a <code>malter()</code> or <code>fap()</code> function that combines the <code>map</code> and <code>filter</code> functions. It would work like a filter, except instead of returning true or false, it would return any object or a null/undefined.</p>


blocks|key|4445558|text|使用reduce，您可以在一个Array.prototype函数中完成此操作。这将从数组中获取所有偶数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4445559|​|4445560|var+arr+=+[1,2,3,4,5,6,7,8];

var+brr+=+arr.reduce((c,+n)+=>+{
++if+(n+%25+2+!==+0)+{
++++return+c;
++}
++c.push(n);
++return+c;
},+[]);

document.getElementById('mypre').innerHTML+=+brr.toString();|code-block|syntax|javascript|4445561|<h1>Get+all+even+numbers</h1>
<pre+id="mypre">+</pre>|4445562|4445563|您可以使用相同的方法，并将其泛化为您的对象，如下所示。|4445564|var+arr+=+options.reduce(function(c,n){
++if(somecondition)+{return+c;}
++c.push(n);
++return+c;
},+[]);|4445565|arr现在将包含已过滤的对象。|offset|length|style|CODE|4445566|entityMap^0|0|0|0|0|0|0|0|0|3|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|P|3|Q|5|6|7|14|8|@$R|15|S|16|T|U]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>Using reduce, you can do this in one Array.prototype function. This will fetch all even numbers from an array.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var arr = [1,2,3,4,5,6,7,8];

var brr = arr.reduce((c, n) =&gt; {
  if (n % 2 !== 0) {
    return c;
  }
  c.push(n);
  return c;
}, []);

document.getElementById('mypre').innerHTML = brr.toString();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Get all even numbers&lt;/h1&gt;
&lt;pre id="mypre"&gt; &lt;/pre&gt;</code></pre>
</div>
</div>
</p>

<p>You can use the same method and generalize it for your objects, like this.</p>

<pre><code>var arr = options.reduce(function(c,n){
  if(somecondition) {return c;}
  c.push(n);
  return c;
}, []);
</code></pre>

<p><code>arr</code> will now contain the filtered objects.</p>


blocks|key|4445784|text|直接使用.reduce可能很难读懂，所以我建议创建一个函数来为您生成reducer：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445785|function+mapfilter(mapper)+{
++return+(acc,+val)+=>+{
++++const+mapped+=+mapper(val);
++++if+(mapped+!==+false)
++++++acc.push(mapped);
++++return+acc;
++};
}|code-block|syntax|javascript|4445786|像这样使用它：|4445787|const+words+=+"Map+and+filter+an+array+#javascript+#arrays";
const+tags+=+words.split('+')
++.reduce(mapfilter(word+=>+word.startsWith('#')+&&+word.slice(1)),+[]);
console.log(tags);++//+['javascript',+'arrays'];|4445788|entityMap^0|4|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Direct use of <code>.reduce</code> can be hard to read, so I'd recommend creating a function that generates the reducer for you:</p>
<pre class="lang-js prettyprint-override"><code>function mapfilter(mapper) {
  return (acc, val) =&gt; {
    const mapped = mapper(val);
    if (mapped !== false)
      acc.push(mapped);
    return acc;
  };
}
</code></pre>
<p>Use it like so:</p>
<pre class="lang-js prettyprint-override"><code>const words = &quot;Map and filter an array #javascript #arrays&quot;;
const tags = words.split(' ')
  .reduce(mapfilter(word =&gt; word.startsWith('#') &amp;&amp; word.slice(1)), []);
console.log(tags);  // ['javascript', 'arrays'];
</code></pre>


blocks|key|4445843|text|你可以使用带箭头的Array.reduce函数是单行代码|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4445844|​|4445845|const+options+=+[
++{+name:+'One',+assigned:+true+},+
++{+name:+'Two',+assigned:+false+},+
++{+name:+'Three',+assigned:+true+},+
];

const+reduced+=+options.reduce((result,+option)+=>+option.assigned+?+result.concat({+name:+option.name,+newProperty:+'Foo'+})+:+result,+[]);

document.getElementById('output').innerHTML+=+JSON.stringify(reduced);|code-block|syntax|javascript|4445846|<h1>Only+assigned+options</h1>
<pre+id="output">+</pre>|4445847|4445848|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce^0|9|C|9|C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce" rel="nofollow noreferrer"><code>Array.reduce</code></a> with an arrow function is a single line of code</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const reduced = options.reduce((result, option) =&gt; option.assigned ? result.concat({ name: option.name, newProperty: 'Foo' }) : result, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Only assigned options&lt;/h1&gt;
&lt;pre id="output"&gt; &lt;/pre&gt;</code></pre>
</div>
</div>
</p>


<p>I have an array of objects that I want to iterate over to produce a new filtered array. But also, I need to filter out some of the objects from the new array depending of a parameter. I'm trying this:</p>

<pre><code>function renderOptions(options) {
    return options.map(function (option) {
        if (!option.assigned) {
            return (someNewObject);
        }
    });   
}
</code></pre>

<p>Is that a good approach? Is there a better method? I'm open to use any library such as lodash.</p>


Map and filter an array at the same time

我有一个要迭代的对象数组，以生成一个新的过滤数组。但是，我还需要根据参数从新数组中过滤出一些对象。我试着这样做：function renderOptions(options) {    return options.map(function (option) {        if (!option.assigned) {            return (someNewObject);   

问同时映射和过滤一个数组
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同时映射和过滤一个数组EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同时映射和过滤一个数组
EN