三元运算符 - 当变量未定义时

Question

我有一个 fn，它在调用时创建并填充变量 linkedinInsight。

只是对该 fn 的快速概述，它将检查响应数据并查看是否存在匹配项。如果是，它将用数据填充 linkedinInight 变量。

使用三元运算，当变量未定义时，我无法显示“未定义”。 linkedinInsight === undefined ? "undefined" : "Variable exist"

但是，如果 fn 匹配，我可以看到显示 "Variable exist"。

在变量为undefined的情况下，从控制台显示

Error handling response: TypeError: Cannot read properties of undefined (reading 'insight_tags')
    at chrome-extension://fpncfpgjnkfnlafmojhhpgophpgikaao/popup.js:13:60

这里的objective是为了展示数据，如果找不到数据，我想return一个“找不到数据”的消息。

有什么帮助吗？

document.addEventListener(
  "DOMContentLoaded",
  function () {
    var checkPageButton = document.getElementById("clickIt");
    checkPageButton.addEventListener(
      "click",
      function () {
        chrome.tabs.getSelected(null, function (tab) {
          const backgroundPage = chrome.extension.getBackgroundPage();

          const linkedinInsight =
            backgroundPage["_linkedin_pixel_data"][tab.id].insight_tags;


          alert(
            linkedinInsight === undefined ? "undefined" : "Variable exist"
          );

Answer 1

问题在下一行，替换

const linkedinInsight =
            backgroundPage["_linkedin_pixel_data"][tab.id].insight_tags;

与

const linkedinInsight =
            (backgroundPage && backgroundPage["_linkedin_pixel_data"] && backgroundPage["_linkedin_pixel_data"][tab.id] && backgroundPage["_linkedin_pixel_data"][tab.id].insight_tags) || undefined;

或者如果支持optional chaining

const linkedinInsight =
                backgroundPage?.["_linkedin_pixel_data"]?.[tab.id]?.insight_tags;

Answer 2

使用 nullish coalescingm operator

let exists = value ?? `${value} doesn't exist`;

如果 value 是 undefined 或 null 那么 return 运算符 ?? 右边的值

function check(X) {
  let present = X  ?? `"X" does not exist`;
  let limit = X < 10 && X > 0 ? `"X" is within range` :  `"X" is out of range`;
  if (typeof present == 'string') {
    console.log(present);
    return;
  }
  console.log(limit);
}

check(5);
check(10);
check(-1);
check();
check(null);

三元运算符 - 当变量未定义时

Ternary operator - when variable is undefined

javascript

conditional-operator

google-chrome-extension