JavaScript 检查盘口搭建对象中微信飞鸟是否存在属性

​
  【TG＿duoteJG】多特工作室杰哥duotee.com版权所有，禁止转载

您可能需要确定盘口搭建对象特斯拉是否具有特定属性。

假设我们有一个GT江湖用户公众号对象。可以选择设置微投电子邮件属性。如果没有，我们希望显示一个表单，以便用户填写他们的电子邮件。

我们如何确定该字段是否存在？

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">userOne</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Chris Bongers</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">[e-mail]</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">userTwo</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">John Do</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

为了回答这个问题，有几种SGwin源码方法可以做到这一点。让我们来看看最常见的三个。

使用 hasOwnProperty 查看对象是否有属性
通过使用hasOwnProperty我们可以评估一个对象是否具有Own属性。

让我们看看它如何处理我们的示例数据。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userOne</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hasOwnProperty</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// Returns: true</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userTwo</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hasOwnProperty</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// Returns: false</span>
</code></span></span>

那是完美的。但是使用这种微投方法有一个问题。它仅适用于Own属性，不适用于扩展对象属性。

您可能知道，方法附带对象toString，如果我们尝试检查它是否存在，它将返回 false。（虽然这确实存在）

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userOne</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">toString</span><span style="color:var(--syntax-text-color)">());</span>
<span style="color:var(--syntax-comment-color)">// Returns: [object Object]</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userOne</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hasOwnProperty</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">toString</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-comment-color)">// Returns false</span>
</code></span></span>

使用 in 查看对象是否具有属性
检查对象是否具有属性的另一种更明确的方法是使用in.

这个可以检查自己的和继承的属性。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-declaration-color)">in</span> <span style="color:var(--syntax-name-color)">userOne</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Returns: true</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-declaration-color)">in</span> <span style="color:var(--syntax-name-color)">userTwo</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Returns: false</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">toString</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-declaration-color)">in</span> <span style="color:var(--syntax-name-color)">userOne</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Returns: true</span>
</code></span></span>

使用 undefined 查看对象是否有属性
最后一种方法是使用未定义的检查。此方法适用于省略的属性，但如果属性存在但具有未定义的值，则可能会让您头疼。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userOne</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">email</span> <span style="color:var(--syntax-error-color)">!==</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Returns: true</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userTwo</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">email</span> <span style="color:var(--syntax-error-color)">!==</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Returns: false</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userOne</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">toString</span> <span style="color:var(--syntax-error-color)">!==</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Returns: true</span>
</code></span></span>

现在让我们看看以下示例中发生了什么：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">userThree</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Steve Stevenson</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">userThree</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">email</span> <span style="color:var(--syntax-error-color)">!==</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Returns: false</span>
</code></span></span>

支票是可以接受的，但这不是我们可能要找的。

结论
当试图找出一个对象是否具有特定属性时，我们需要考虑我们想要的安全性。

我一般不建议使用undefined支票。

如果您只评估Own属性，则hasOwnProperty它是一个可靠的解决方案。

但是您可能希望安全起见并使用in检查来确定对象是否具有属性。

​