Question

根据上下文，我开始养成习惯，将部分for loops转换为使用array.find()。这样做，我想知道是否有一种方法可以限制.find()之后的另一个运算符，以限制我从该对象获取的数量。

例如，请参见以下内容：

currentStage = customerDoc.history.find(h => h.completed === false);
currentStageName = currentStage.name;

因为我真正想要的是“ currentStage.name”的值，所以有没有办法通过在find()之后链接以指定我只想要此属性来获取此值？如果没有，还有另一种方法可以在一排中做到这一点吗？

Answer 1

是的，您喜欢这样，请注意使用|| {}来避免在查找返回未定义的情况下发生异常

currentStage = (customerDoc.history.find(h => h.completed === false) || {}).name

但是IMO，您应该像现在一样保持它的可读性，并且易于维护

currentStage = customerDoc.history.find(h => h.completed === false);
currentStageName = currentStage && currentStage.name;

Answer 2

使用short-circuit evaluation拥有一个默认对象，以防万一没有找到，并使用destructuring获取所需的属性。如果未找到任何内容，则结果将为undefined：

const { name: currentStageName } = customerDoc.history.find(h => h.completed === false) || {};

Answer 3

您可以使用可选的链接（目前是TC39的第3阶段建议，尚未在浏览器中实现），但现在可以使用babel's插件并按如下方式使用：

const currentStageName = customerDoc.history.find(h => !h.completed)?.name;

Answer 4

您还可以将 .map 链接到查找结果上，以限制和/或重塑通过将其包装在数组中（如果未找到结果则使用过滤器）返回的内容，例如

currentStage = [customerDoc.history.find(h => h.completed === false)].filter(h => h != undefined).map(h => ({'name':h.name}))[0]