PROSAGA码农传奇-JS-在2个独立的阵列上执行相同的过滤器和映射功能

<div class =“post-text”itemprop =“text”>
  <P>
    你最好的选择可能只是创建一个单独的功能来做到这一点，就像这样......
  </p>
  <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>
          const arr1 = [ {color: "blue", shape: "triangle"}, {color: "red", shape: "square"}, {color: "green", shape: "circle"} ];
const arr2 = [ {color: "purple", shape: "diamond"}, {color: "yellow", shape: "square"}, {color: "orange", shape: "circle"} ];

const applyFiltersAndMap = (array) => {
  return array.filter(obj => obj.color !== 'red')
              .filter(obj => obj.shape !== 'circle')
              .map(obj => `${obj.color} ${obj.shape}`);
};

console.log(applyFiltersAndMap(arr1));
console.log(applyFiltersAndMap(arr2));
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    也就是说，我知道您指定要将这些方法分开以用于更复杂的逻辑，但我仍然建议使用
     <code>
      reduce()
    </code>
     限制迭代。
  </p>
  <P>
    您可以更改方法以获取过滤器表达式和地图列表，并在其中应用它们
     <code>
      reduce()
    </code>
    。这将保持您的分离/清除过滤器功能，同时仍然使用更有效的数组方法
     <code>
      reduce
    </code>
    。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          const arr1 = [ {color: "blue", shape: "triangle"}, {color: "red", shape: "square"}, {color: "green", shape: "circle"} ];
const arr2 = [ {color: "purple", shape: "diamond"}, {color: "yellow", shape: "square"}, {color: "orange", shape: "circle"} ];

const applyFiltersAndMap = (array, filters, mapper) => {
  return array.reduce((out,e) => {
    if (filters.every(f => f(e))) out.push(mapper(e)); //filter and map
    return out;
  }, []);
};

const filters = [                                  //your filter functions
  obj => obj.color !== 'red',
  obj => obj.shape !== 'circle'
];
const mapper = obj => `${obj.color} ${obj.shape}`; //your map function

console.log(applyFiltersAndMap(arr1, filters, mapper));
console.log(applyFiltersAndMap(arr2, filters, mapper));
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    或者如果你不介意的话
    <a href="https://stackoverflow.com/questions/8859828/javascript-what-dangers-are-in-extending-array-prototype">
      扩展
       <code>
        Array.prototype
      </code>
    </A>
    ...
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          const arr1 = [ {color: "blue", shape: "triangle"}, {color: "red", shape: "square"}, {color: "green", shape: "circle"} ];
const arr2 = [ {color: "purple", shape: "diamond"}, {color: "yellow", shape: "square"}, {color: "orange", shape: "circle"} ];

Array.prototype.applyFiltersAndMap = function(filters, mapper) {
  return this.reduce((out,e) => {
    if (filters.every(f => f(e))) out.push(mapper(e)); //filter and map
    return out;
  }, []);
};

console.log(arr1.applyFiltersAndMap(filters, mapper));
console.log(arr2.applyFiltersAndMap(filters, mapper));
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>