检查 Javascript（或框架）中字段是否存在的正确方法？

Question

我想这通常适用于所有 JS，但是重写此计算方法以确保它在字段不可用时不会失败的正确方法是什么？

computed() {
   isVerified() {
        return this.name.info.is_valid;
   }
}

我可以做到，但会很罗嗦：

computed() {
   isVerified() {
        if (this.name && this.name.info && this.name.info.is_valid) {
           return true;
        } else {
           return false;
        }
   }
}

Answer 1

将可选链接与无效合并运算符相结合似乎适合您的情况。

computed() {
  isVerified() {
    return this.name?.info?.is_valid ?? false;
  }
}

如果this.name 、 this.name.info或this.name.info.is_valid中的任何一个是null或undefined ， isVerified返回false （布尔值）。 否则它返回this.name.info.is_valid的当前值，无论它是什么（包括除null或undefined之外的任何虚假值。即： 0 、 '' 、 NaN ）。

---

请记住，目前，以下浏览器列表不支持这两个运算符：

• 浏览器
• Firefox 为 Android
• 歌剧 Android
• 三星互联网

---

在 caniuse.com 上查看他们当前的实施状态：

• 可选链
• 无效合并运算符，

---

关于最新 Vue 2 ( v2.6.11 ) 用法的注意事项：两个运算符仅在组件（方法、计算、挂钩等）内部工作，但如果直接在模板中使用它们会出错。
尚未在 Vue 3 中进行测试，但我希望它们能够工作（从v3.7开始，它们是有效的 TypeScript 运算符）。

对于纯粹主义者，这里是 output

function isValid(name) {
  return name?.info?.is_valid ?? false;
}

...在巴别塔中：

"use strict";

function isValid(name) {
  var _name$info$is_valid, _name$info;

  return (_name$info$is_valid = name === null || name === void 0
          ? void 0
          : (_name$info = name.info) === null || _name$info === void 0
            ? void 0
            : _name$info.is_valid
         ) !== null && _name$info$is_valid !== void 0
          ? _name$info$is_valid
          : false;
}

Answer 2

javascript 很好，前 2 个变量中的 boolean 很好，但是您是否在 is_valid function 中引用了 django？

    if (this.name && this.name.info && this.name.info.is_valid) {
       return true;
    } else {
       return false;
    }