可选链接和 Nullish 合并如何简化 JavaScript 中的 Null 安全属性访问？

EcmaScript 6 中的 NULL 安全属性访问和条件赋值

EcmaScript 6 提供了强大的运算符，可以以简洁高效的方式简化属性访问和条件赋值。

条件赋值

在旧的 JavaScript 版本中，所需的逻辑可以使用 try/catch 块可以实现：

const query = succeed => (succeed ? { value: 4 } : undefined);

let value = 3;
for (let x of [true, false]) {
  try { value = query(x).value; } catch {} // Don´t assign if no .value
}
console.log(value); // Outputs: 4

可选链接

现在，通过可选链接，可以大大简化此逻辑：

const query = succeed => (succeed ? { value: 4 } : undefined);

let value = 3;
for (let x of [true, false]) {
  value = query(x)?.value; // Assign only if `.value` exists
}
console.log(value); // Outputs: 4

？ 。运算符检查 query(x) 是否非 null 且未定义，然后才访问 value 属性。如果 query(x) 为 null 或未定义，则返回 undefined 且不会引发错误。

空值合并

对于可空值，可以使用空值合并运算符 (??)：

const query = succeed => (succeed ? { value: 4 } : undefined);

let value = 3;
for (let x of [true, false]) {
  value ??= query(x).value; // Assign only if `value` is null or undefined
}
console.log(value); // Outputs: 4

??运算符将左侧操作数与 null 或未定义进行比较，如果为 true，则分配右侧操作数。在这种情况下，仅当值最初为 null 或未定义时才会更新。

请注意，现代浏览器支持这些运算符，并且可以与 Babel 一起使用以实现跨浏览器兼容性。

以上是可选链接和 Nullish 合并如何简化 JavaScript 中的 Null 安全属性访问？的详细内容。更多信息请关注PHP中文网其他相关文章！