JavaScript 对象的 10 个技巧和窍门

JavaScript 对象的 10 个技巧和窍门

#网络开发 #JavaScript的

对象是 JavaScript 中程序的基本构建块，用于构建类和复杂数据，并作为面向对象编程的组成部分。

在过去的五年多里，我每天都以全栈软件开发人员的身份使用 JavaScript。JavaScript 对象发挥了至关重要的作用。

在本文中，我将分享 10 个技巧和技巧，作为 JavaScript 开发人员，您可以使用这些技巧和技巧来操作和高效处理 JavaScript 对象。

使用展开运算符组合两个对象

在许多情况下，您必须合并来自不同源的两个或多个数据集。在这种情况下，在 JavaScript 中有多种方法可以做到这一点。

最常用的方法是使用 Object.assign（）。此方法采用多个参数。第一个是分配的对象，其余的参数是我们需要组合的对象。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">name</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">id</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">1234</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">name</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">Hoa</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">university</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">id</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">1234</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">university</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">Harvard</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">PersonalDetails</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">Object</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">assign</span><span style="color:var(--darkreader-text--syntax-text-color)">({},</span> <span style="color:var(--darkreader-text--syntax-name-color)">name</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">university</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span>

<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">PersonalDetails</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> 
<span style="color:var(--darkreader-text--syntax-comment-color)">// { id: '1234', name: 'Hoa', university: 'Harvard' }</span>
</code></span></span></span>

但是，在不复杂化的情况下，您可以使用点差运算符进行组合。您可以展开任意数量的对象，以将它们组合成一个对象。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">PersonalDetails</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-text-color)">...</span><span style="color:var(--darkreader-text--syntax-name-color)">name</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-text-color)">...</span><span style="color:var(--darkreader-text--syntax-name-color)">university</span> <span style="color:var(--darkreader-text--syntax-text-color)">};</span>

<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">PersonalDetails</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> 
<span style="color:var(--darkreader-text--syntax-comment-color)">// { id: '1234', name: 'Hoa', university: 'Harvard' }</span>
</code></span></span></span>

需要注意的一个重要事实是，在这两种方法中，重复的键将覆盖上述对象的键。

从对象中获取键和值的列表

在开发过程中，有时我们只需要从对象中获取键或值。以下两个内置函数都非常简单：

1. Object.keys（）：用于获取键列表。
2. Object.values（）：用于获取值列表。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">//get keys</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-text-color)">Object</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">keys</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">));</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// [ 'brand', 'year', 'type' ]</span>

<span style="color:var(--darkreader-text--syntax-comment-color)">//get values</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-text-color)">Object</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">values</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">));</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// [ 'BWM', 2023, 'suv' ]</span>
</code></span></span></span>

使用 hasOwnProperty（） 检查项目

使用 for-in 循环时，检查对象的属性对于避免遍历对象原型中的属性非常有用。这里我们可以使用 Object.hasOwnProperty（），而不是使用 if-else 块。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">for</span> <span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-declaration-color)">var</span> <span style="color:var(--darkreader-text--syntax-name-color)">item</span> <span style="color:var(--darkreader-text--syntax-declaration-color)">in</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">)</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span>  
    <span style="color:var(--darkreader-text--syntax-declaration-color)">if</span> <span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">hasOwnProperty</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">item</span><span style="color:var(--darkreader-text--syntax-text-color)">))</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> 
        <span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">item</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span>                 
    <span style="color:var(--darkreader-text--syntax-text-color)">};</span>  
<span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// brand</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// year</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// type</span>
</code></span></span></span>

使用拼接而不是删除

使用 delete 方法时，应用程序会将项替换为 undefined，而不是将其从数组中删除。因此，最好使用 splice（） 从数组中删除项目。

让我们看看使用 delete 时会发生什么。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">var</span> <span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">a</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span> <span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2</span> <span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">b</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">3</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">c</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">4</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">];</span> 
<span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">length</span><span style="color:var(--darkreader-text--syntax-text-color)">;</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// returns 6 </span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">delete</span> <span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-literal-color)">2</span><span style="color:var(--darkreader-text--syntax-text-color)">];</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// returns true </span>
<span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">length</span><span style="color:var(--darkreader-text--syntax-text-color)">;</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// returns 6</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// [ 'a', 2, undefined, '3', 'c', '4' ]</span>
</code></span></span></span>

使用 splice（） 时，会发生以下情况。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">var</span> <span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">a</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span> <span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2</span> <span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">b</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">3</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">c</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">4</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">];</span> 
<span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">length</span><span style="color:var(--darkreader-text--syntax-text-color)">;</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// returns 6 </span>
<span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">splice</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-literal-color)">2</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span><span style="color:var(--darkreader-text--syntax-literal-color)">1</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// returns true </span>
<span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">length</span><span style="color:var(--darkreader-text--syntax-text-color)">;</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// returns 5</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">arrayItems</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// [ 'a', 2, '3', 'c', '4' ]</span>
</code></span></span></span>

delete 方法应用于删除对象属性。

正确克隆对象

假设您有一个对象，需要复制它以更改其值，但原始对象应该保持不变。有两种方法可以做到这一点。

第一种方法是使用 Object.assign（），它将所有可枚举属性的值从一个对象复制到另一个对象。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">var</span> <span style="color:var(--darkreader-text--syntax-name-color)">initialVehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">var</span> <span style="color:var(--darkreader-text--syntax-name-color)">secondaryVehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">Object</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">assign</span><span style="color:var(--darkreader-text--syntax-text-color)">({},</span> <span style="color:var(--darkreader-text--syntax-name-color)">initialVehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">secondaryVehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// { brand: 'BWM', year: 2023, type: 'suv'};</span>
</code></span></span></span>

第二种方法是使用 JSON.parse（） 复制对象。

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">var</span> <span style="color:var(--darkreader-text--syntax-name-color)">initialVehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">var</span> <span style="color:var(--darkreader-text--syntax-name-color)">secondaryVehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-name-color)">JSON</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">parse</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">JSON</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">stringify</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">initialVehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">));</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">secondaryVehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// { brand: 'BWM', year: 2023, type: 'suv'};</span>

</code></span></span></span>

Selecting specific data from an object

There are a few methods to select keys from an object. The method you choose depends on what you want to do with the values. The following example shows an organized way of selecting data from an object.

Here, you can select the keys you need and pull them into a new object.

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">selectObj</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">obj</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">items</span><span style="color:var(--darkreader-text--syntax-text-color)">)</span> <span style="color:var(--darkreader-text--syntax-error-color)">=></span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> 
  <span style="color:var(--darkreader-text--syntax-declaration-color)">return</span> <span style="color:var(--darkreader-text--syntax-name-color)">items</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">reduce</span><span style="color:var(--darkreader-text--syntax-text-color)">((</span><span style="color:var(--darkreader-text--syntax-name-color)">result</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">item</span><span style="color:var(--darkreader-text--syntax-text-color)">)</span> <span style="color:var(--darkreader-text--syntax-error-color)">=></span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span>
    <span style="color:var(--darkreader-text--syntax-name-color)">result</span><span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-name-color)">item</span><span style="color:var(--darkreader-text--syntax-text-color)">]</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-name-color)">obj</span><span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-name-color)">item</span><span style="color:var(--darkreader-text--syntax-text-color)">];</span> 
    <span style="color:var(--darkreader-text--syntax-declaration-color)">return</span> <span style="color:var(--darkreader-text--syntax-name-color)">result</span><span style="color:var(--darkreader-text--syntax-text-color)">;</span>
  <span style="color:var(--darkreader-text--syntax-text-color)">},</span> <span style="color:var(--darkreader-text--syntax-text-color)">{});</span>
<span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">selected</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-name-color)">selectObj</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">brand</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">type</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">]);</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">selected</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// { brand: 'BWM', type: 'suv' }</span>
</code></span></span></span>

Removing keys from an object

Sometimes it is necessary to remove specific keys and their values from an object.

This might be necessary for a scenario where you are building an API and want to remove sensitive data.

The most suitable method is to write a reusable remove method that takes an object and a list of keys to be removed as inputs. You can then loop through each key to be removed and delete it from the object.

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">remove</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">object</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">removeList</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">[])</span> <span style="color:var(--darkreader-text--syntax-error-color)">=></span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span>
  <span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">result</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-text-color)">...</span><span style="color:var(--darkreader-text--syntax-name-color)">object</span> <span style="color:var(--darkreader-text--syntax-text-color)">};</span>
  <span style="color:var(--darkreader-text--syntax-name-color)">removeList</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">forEach</span><span style="color:var(--darkreader-text--syntax-text-color)">((</span><span style="color:var(--darkreader-text--syntax-name-color)">item</span><span style="color:var(--darkreader-text--syntax-text-color)">)</span> <span style="color:var(--darkreader-text--syntax-error-color)">=></span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span>
    <span style="color:var(--darkreader-text--syntax-declaration-color)">delete</span> <span style="color:var(--darkreader-text--syntax-name-color)">result</span><span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-name-color)">item</span><span style="color:var(--darkreader-text--syntax-text-color)">];</span>
  <span style="color:var(--darkreader-text--syntax-text-color)">});</span>
  <span style="color:var(--darkreader-text--syntax-declaration-color)">return</span> <span style="color:var(--darkreader-text--syntax-name-color)">result</span><span style="color:var(--darkreader-text--syntax-text-color)">;</span>
<span style="color:var(--darkreader-text--syntax-text-color)">}</span>

<span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">}</span>

<span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">itemRemoved</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-name-color)">remove</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">year</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">]);</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">itemRemoved</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">// Result { brand: 'BWM', type: 'suv' }</span>

</code></span></span></span>

Pulling object data into an array

There are scenarios where you need to pull your object data into an array, such as a dropdown menu. You can use the Object.entries() function, which takes an object as its first argument and returns an array.

The returned object is an array of an array. The inner arrays will have two values: the first is the key, and the second is the value.

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">}</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-text-color)">Object</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">entries</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">));</span> 
<span style="color:var(--darkreader-text--syntax-comment-color)">// [ [ 'brand', 'BWM' ], [ 'year', 2023 ], [ 'type', 'suv' ] ]</span>
</code></span></span></span>

Looping through a JavaScript object

There are several methods in JavaScript that can be used to loop through an object. I will compare two of the best methods I use.

The first method is to use Object.entries(), a function that avoids looking up each value in the original object.

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">}</span>
<span style="color:var(--darkreader-text--syntax-text-color)">Object</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">entries</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">).</span><span style="color:var(--darkreader-text--syntax-name-color)">forEach</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span>
    <span style="color:var(--darkreader-text--syntax-text-color)">([</span><span style="color:var(--darkreader-text--syntax-name-color)">key</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">value</span><span style="color:var(--darkreader-text--syntax-text-color)">])</span> <span style="color:var(--darkreader-text--syntax-error-color)">=></span> <span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">key</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">value</span><span style="color:var(--darkreader-text--syntax-text-color)">)</span>
<span style="color:var(--darkreader-text--syntax-text-color)">);</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// brand BWM</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// year 2023</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// type suv</span>

</code></span></span></span>

As a much better and clearer method, you can use object destructuring with Object.entries().

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BWM</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">}</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">for</span> <span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-text-color)">[</span><span style="color:var(--darkreader-text--syntax-name-color)">key</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">value</span><span style="color:var(--darkreader-text--syntax-text-color)">]</span> <span style="color:var(--darkreader-text--syntax-declaration-color)">of</span> <span style="color:var(--darkreader-text--syntax-text-color)">Object</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">entries</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">))</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span>
    <span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">key</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span> <span style="color:var(--darkreader-text--syntax-name-color)">value</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span>
<span style="color:var(--darkreader-text--syntax-text-color)">}</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// brand BWM</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// year 2023</span>
<span style="color:var(--darkreader-text--syntax-comment-color)">// type suv</span>

</code></span></span></span>

有条件地向对象添加属性

通常，开发人员使用 if-else 条件作为有条件地向对象添加新元素的更长的方法。但是，最简单的方法是使用对象解构和扩展运算符

<span style="color:#d5d2cd"><span style="color:var(--darkreader-text--syntax-text-color)"><span style="color:var(--darkreader-text--syntax-text-color)"><code><span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">suv</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span> <span style="color:var(--darkreader-text--syntax-text-color)">};</span>
<span style="color:var(--darkreader-text--syntax-declaration-color)">const</span> <span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span> <span style="color:var(--darkreader-text--syntax-error-color)">=</span> <span style="color:var(--darkreader-text--syntax-text-color)">{</span>
  <span style="color:var(--darkreader-text--syntax-name-color)">brand</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-string-color)">BMW</span><span style="color:var(--darkreader-text--syntax-string-color)">'</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span>
  <span style="color:var(--darkreader-text--syntax-name-color)">year</span><span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-literal-color)">2023</span><span style="color:var(--darkreader-text--syntax-text-color)">,</span>
  <span style="color:var(--darkreader-text--syntax-text-color)">...(</span><span style="color:var(--darkreader-text--syntax-error-color)">!</span><span style="color:var(--darkreader-text--syntax-name-color)">type</span> <span style="color:var(--darkreader-text--syntax-text-color)">?</span> <span style="color:var(--darkreader-text--syntax-text-color)">{}</span> <span style="color:var(--darkreader-text--syntax-text-color)">:</span> <span style="color:var(--darkreader-text--syntax-name-color)">type</span><span style="color:var(--darkreader-text--syntax-text-color)">)</span>
<span style="color:var(--darkreader-text--syntax-text-color)">}</span>
<span style="color:var(--darkreader-text--syntax-name-color)">console</span><span style="color:var(--darkreader-text--syntax-text-color)">.</span><span style="color:var(--darkreader-text--syntax-name-color)">log</span><span style="color:var(--darkreader-text--syntax-text-color)">(</span><span style="color:var(--darkreader-text--syntax-name-color)">vehicle</span><span style="color:var(--darkreader-text--syntax-text-color)">);</span> <span style="color:var(--darkreader-text--syntax-comment-color)">//{ brand: 'BMW', year: 2023, type: 'suv' }</span>
</code></span></span></span>

同样，使用不同的条件，您可以向对象添加任意数量的元素。

结论

像任何其他编程语言一样，JavaScript 有许多处理对象的技巧，让我们可以更简单、更漂亮地编写程序。本文讨论了我在处理对象时最常用的 10 个技巧和窍门。