如何在JavaScript数组中筛选mode属性含color为green的对象

你需要从给定的JavaScript数组中提取所有mode属性里存在color值为"green"的对象，但当前代码仅能获取第一个符合条件对象的索引，无法得到所有匹配项。

原代码 #

let arr = [
  {
    "type": "One",
    "mode": [{ 
        "color": "blue", 
        "size": "L"
      }
    ]
  }, {
    "type": "Two",
    "mode": [{ 
        "color": "green", 
        "size": "M"
      }
    ]
  },{
    "type": "Three",
    "mode": [{ 
        "color": "green", 
        "size": "L"
      }
    ]
  },{
    "type": "Four",
    "mode": [{ 
        "color": "red", 
        "size": "XS" 
      }
    ]
  }
];
    
    
let result = arr.indexOf(arr.find(function(el,index){
  return el['mode'][0].color === 'green';
}))

console.log(result);

期望输出 #

[
  {
    "type": "Two",
    "mode": [{ 
        "color": "green", 
        "size": "M"
      }
    ]
  },{
    "type": "Three",
    "mode": [{ 
        "color": "green", 
        "size": "L"
      }
    ]
  }
]

解决方案 #

原代码中find()方法仅返回第一个符合条件的元素，indexOf()只能拿到该元素的索引，无法获取所有匹配项。要实现需求，应该使用Array.filter()方法，它会返回所有满足条件的元素组成的新数组。

同时为了代码更健壮（比如mode数组中存在多个对象的情况），可以用Array.some()检查mode数组里是否有任意一个对象的color为"green"：

let arr = [
  {
    "type": "One",
    "mode": [{ 
        "color": "blue", 
        "size": "L"
      }
    ]
  }, {
    "type": "Two",
    "mode": [{ 
        "color": "green", 
        "size": "M"
      }
    ]
  },{
    "type": "Three",
    "mode": [{ 
        "color": "green", 
        "size": "L"
      }
    ]
  },{
    "type": "Four",
    "mode": [{ 
        "color": "red", 
        "size": "XS" 
      }
    ]
  }
];

// 筛选所有mode数组中存在color为green的对象
let result = arr.filter(el => {
  return el.mode.some(item => item.color === 'green');
});

console.log(result);

运行这段代码后，输出结果就会和你期望的一致。

内容的提问来源于stack exchange，提问作者Kroshandowski