使用find()到三元操作的结果对象

Question

有这样一个数组:

const rows = [{name: "john", color: "blue", height: 177, weight: 82},
{name: "anna", color: "red", height: 167, weight: 62},
{name: "mike", color: "green", height: 181, weight: 78},
{name: "sue", color: "red", height: 164, weight: 57}];

我需要找到满足条件的第一个元素，并在三元制中使用它，例如:

{rows.find(a => a.color === "red" && a.name === "anna") ? ... : ... } 

是否有一种方法可以将条件的结果转化为中间的三元项?如:

{rows.find(a => a.color === "red" && a.name === "anna") ? a.height * a.width : null } 

Answer 1

对于您的color,width和height的示例，没有一行代码。 (实际上，有，¹但是…)您需要再次搜索(通常会很好，但是…)或将搜索结果存储在一个变量中，以便您可以使用它两次。

看起来您在JSX表达式中使用了这个。一般来说，在表达式之前，你可以抓取局部变量，然后使用这些局部变量:

const entry = rows.find(a => a.color === "red" && a.name === "anna");
const result = entry ? a.height * a.width : null;
// ...later in your JSX...
{result} 

如果这是一个常见的操作，另一个选择是(一如既往)将其放在可重用的函数中:

// Somewhere it can be reused:
function areaOfOptionalObject(obj) {
return obj ? obj.width * obj.height : null;
}
// In your JSX:
{areaOfOptionalObject(rows.find(a => a.color === "red" && a.name === "anna"))}

你画的线是一个判断。例如，您可以将find放在函数中:

// Somewhere it can be reused:
function areaOfMatchingObject(array, predicate) {
const obj = array.find(predicate);
return obj ? obj.width * obj.height : null;
}
// In your JSX:
{areaOfMatchingObject(rows, a => a.color === "red" && a.name === "anna")}

---

¹这一行是:

{rows.filter(a => a.color === "red" && a.name === "anna").map(a => a.weight * a.height)[0] ?? null}

…但是它完全遍历rows(而不是在发现某些内容时停止)，创建两个不必要的临时数组，并且有点……笨拙。尽管如此，它仍然可以工作，rows可能不是那么大，临时数组也不是什么大问题。

感谢@VLAZ指出filter->map[0]会做的!

Answer 2

您可以这样做:

const found = rows.find(a => a.color === "red" && a.name === "anna");
const res = found ? found.height * found.width : null;