使用 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

你可以这样做：

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

Answer 2

~~您的示例没有包含 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 for filter -> map [0] 会做到的！

使用 find() 的结果对象进行三元运算

Use the resulted object by find() to ternary operation

javascript

find

conditional-operator

conditional-statements

ecmascript-6