javascript - 了解代码片段中的条件运算符和条件赋值

Question

我试图理解此代码片段中的第三行(条件表达式的条件中的赋值 value = f)是如何工作的:

someProp(propName, f) {
  let prop = this._props && this._props[propName], value
  if (prop != null && (value = f ? f(prop) : prop)) return value
  ...
}

在此示例中，value 在 console.log(value) 语句中未定义:

let f = 42;
value = f ? console.log('true') : console.log('false');
console.log(value);

在我看来，第一个片段第三行返回的 value 变量始终是未定义的。我缺少什么？该代码片段来 self 正在研究的一个开源项目的生产代码。

此外，this._props 是一个对象。为什么作者使用 if (prop != null && ... 来测试 props 对象是否存在，而不是仅仅使用 if (prop && ... 之类的东西？我是否正确地认为这是更有经验的开发人员的典型代码，或者其他人会以不同的方式编写它？

Answer 1

条件运算符有 higher precedence比赋值运算符，所以它被解析

if (prop != null && (value = (f ? f(prop) : prop))) return value
//                           ^                  ^

不是

if (prop != null && ((value = f) ? f(prop) : prop)) return value
//                   ^         ^

正如你所期待的那样。所以，是的，在您的演示示例中，您总是会得到 undefined 因为这是 console.log 调用的返回值。但这里它被分配为 f(prop) 或 prop。

Also, why is the author using prop != null && ... rather than just prop && ...?

因为他喜欢露骨。

And am I right in thinking that this is typical code of more experienced developers?

没有。可能是曾经被虚假值所困扰的开发人员的典型代码。