Javascript过滤器功能：如何使这个过滤掉绿色水果？答案

【问题标题】：Javascript Filter Function: How do I make this filter out the green fruits?Javascript过滤器功能：如何使这个过滤掉绿色水果？
【发布时间】：2015-10-12 08:08:36
【问题描述】：

var fruits = [
    {name: 'nectarine',   color: 'orange'},
    {name: 'grape',       color: 'purple'},
    {name: 'banana',      color: 'yellow'},
    {name: 'grapefruit',  color: 'orange'},
    {name: 'watermelon',  color: 'green'},
    {name: 'strawberry',  color: 'red'},
    {name: 'apple',       color: 'red'},
    {name: 'pear',        color: 'green'},
    {name: 'pineapple',   color: 'yellow'},
    {name: 'kiwi',        color: 'green'},
    ];

    var green = [];
    for(var i=0; i<fruits.length; i++){
        if(fruits[i].color ==='green')
        green.push(fruits[i]);
    }

如何在使用 for 循环的同时过滤掉绿色水果？

非常感谢您的帮助！

【问题讨论】：

过滤掉是什么意思...你想从fruits中删除那些
jsfiddle.net/sandenay/j8nzasqh
我要过滤掉绿色水果。我想打印西瓜、梨、猕猴桃。
jsfiddle.net/arunpjohny/gz09med3/1 ?
您的代码已经过滤了绿色水果。它出什么问题了？你的意思是过滤 OUT（意思是删除、排除），还是过滤 IN，意思是保留、保留？

标签： javascript filter

【解决方案1】：

你可以像这样在你的 fruits 数组上使用 JavaScript filter：

var fruits = [{
  name: 'nectarine',
  color: 'orange'
}, {
  name: 'grape',
  color: 'purple'
}, {
  name: 'banana',
  color: 'yellow'
}, {
  name: 'grapefruit',
  color: 'orange'
}, {
  name: 'watermelon',
  color: 'green'
}, {
  name: 'strawberry',
  color: 'red'
}, {
  name: 'apple',
  color: 'red'
}, {
  name: 'pear',
  color: 'green'
}, {
  name: 'pineapple',
  color: 'yellow'
}, {
  name: 'kiwi',
  color: 'green'
}, ];

var green = [];


var green = fruits.filter(function(fruit) {
  return fruit.color === "green";
});

console.log(green);

【讨论】：

【解决方案2】：

var fruits = [
    {name: 'nectarine',   color: 'orange'},
    {name: 'grape',       color: 'purple'},
    {name: 'banana',      color: 'yellow'},
    {name: 'grapefruit',  color: 'orange'},
    {name: 'watermelon',  color: 'green'},
    {name: 'strawberry',  color: 'red'},
    {name: 'apple',       color: 'red'},
    {name: 'pear',        color: 'green'},
    {name: 'pineapple',   color: 'yellow'},
    {name: 'kiwi',        color: 'green'},
    ];
    
    // only the name   
    var green_Names = [];
    fruits.map(function(fruit){ 
        if(fruit.color === 'green') green_Names.push( fruit.name );
    });
    var notGreen_Names = [];
    fruits.map(function(fruit){ 
         if(fruit.color !== 'green')  notGreen_Names.push( fruit.name )
    });

    // the full Objects
    var green = fruits.filter(function(fruit){ 
        return fruit.color === 'green'
    });
    var notGreen = fruits.filter(function(fruit){ 
        return fruit.color !== 'green'
    });
  
  
  var el = document.getElementById('el'); 
  el.innerHTML = 'Only the names : <br><br>';
  el.innerHTML += 'green_Names : <pre>' + JSON.stringify(green_Names ,null, ' ') + '</pre>';
  
  
  el.innerHTML += 'notGreen_Names : <pre>' + JSON.stringify(notGreen_Names ,null, ' ') + '</pre>';
  
  el.innerHTML += 'The full objects : <br><br>';
  
  el.innerHTML += 'Green : <pre>' + JSON.stringify(green ,null, ' ') + '</pre>';
  el.innerHTML+= 'NotGreen : <pre>' + JSON.stringify(notGreen ,null, ' ') + '</pre>';

&lt;div id='el'&gt;&lt;/div&gt;

    // only the names
    var green_Names = [];
    fruits.map(function(fruit){ 
        if(fruit.color === 'green') green_Names.push( fruit.name );
    });
    var notGreen_Names = [];
    fruits.map(function(fruit){ 
         if(fruit.color !== 'green')  notGreen_Names.push( fruit.name )
    });

    // the full Objects
    var green = fruits.filter(function(fruit){ 
        return fruit.color === 'green'
    });
    var notGreen = fruits.filter(function(fruit){ 
        return fruit.color !== 'green'
    });

这就是诀窍！

【讨论】：

【解决方案3】：

过滤器示例：

const notGreen1 = fruits.filter(fruit => fruit.color !== 'green');

console.log(notGreen1);

for 循环示例：

function removeColor(originalArray, color) {
   const newArray = [];

   for(let i = 0; i < originalArray.length; i++) {
      if(originalArray[i].color !== color) {
         newArray.push(originalArray[i]);
      }
   }
   return newArray;
}

const notGreen2 = removeColor(fruits, 'green');
console.log(notGreen2);

【讨论】：