告别 Spread 运算符：使用默认 Composer

在 JavaScript 中处理对象时，通常需要为空的strings// objects、或属性设置默认值。在处理嵌套对象时，这会变得更加复杂并且需要复杂的编程逻辑。然而，有了“ default-composer ”库，这项任务变得简单易行。arraysnullundefined 
 

什么是“默认作曲家”？

“ default-composer ” 是一个轻量级 (~300B) JavaScript 库，它允许您为嵌套对象设置默认值。该库将现有对象中的空字符串/数组/对象、null 或未定义值替换为已定义的默认值，这有助于简化编程逻辑并减少设置默认值所需的代码量。

 

默认作曲家徽标

 

优于 Spread 运算符和 Object.assign

虽然...spread运算符andObject.assign()也可用于设置对象的默认值，但 " default-composer" 提供了优于这些方法的几个好处。

• 适用于嵌套对象，而展开运算符和Object.assign()仅适用于浅层对象。
• 比扩展运算符或更简洁易读Object.assign()。使用这些方法设置默认值所需的代码可能会变得非常冗长且难以阅读，尤其是在处理嵌套对象时。
• 更精细地控制哪些属性应设置为默认值。与传播运营商和Object.assign()。

想象一下我们有这个原始对象：

<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)">original</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-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">street</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">city</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">state</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">zip</span><span style="color:var(--syntax-text-color)">:</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-name-color)">emails</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[],</span>
  <span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[],</span>
  <span style="color:var(--syntax-name-color)">another</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">anotherValue</span><span style="color:var(--syntax-string-color)">"</span>
<span style="color:var(--syntax-text-color)">};</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)">defaults</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 Doe</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">street</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">123 Main St</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">city</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Anytown</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">state</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">CA</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">zip</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">12345</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-name-color)">emails</span><span style="color:var(--syntax-text-color)">:</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.doe@example.com</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">],</span>
  <span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">reading</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">traveling</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>

""我们想要合并这些对象，将、null、[]和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)">results</span><span style="color:var(--syntax-text-color)">)</span>
<span style="color:var(--syntax-comment-color)">/**
 * {
 * "name": "John Doe",
 * "score": 5,
 * "address": {
 *   "street": "123 Main St",
 *   "city": "Anytown",
 *   "state": "CA",
 *   "zip": "12345"
 * },
 * "emails": [
 *   "john.doe@example.com"
 * ],
 * "hobbies": [
 *   "reading",
 *   "traveling"
 * ],
 * "another": "anotherValue"
 **/</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)">results</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">original</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-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</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-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">score</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-comment-color)">// "??" beacause 0 is valid</span>
  <span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">street</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">street</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">street</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">city</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">city</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">city</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">state</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">state</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">state</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">zip</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">zip</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">zip</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">emails</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">emails</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">emails</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">emails</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hobbies</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

和Object.assign这样的事情：

<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)">results</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">Object</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">assign</span><span style="color:var(--syntax-text-color)">({},</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-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-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</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-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">score</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-comment-color)">// "??" beacause 0 is valid</span>
  <span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Object</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">assign</span><span style="color:var(--syntax-text-color)">({},</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">street</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">street</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">street</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">city</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">city</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">city</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">state</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">state</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">state</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">zip</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">zip</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">address</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">zip</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">}),</span>
  <span style="color:var(--syntax-name-color)">emails</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">emails</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">emails</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">emails</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hobbies</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">hobbies</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>

维护它可能非常繁琐，尤其是对于巨大的、嵌套很深的对象。

头痛...

我们defaultComposer只能使用这个：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">defaultComposer</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">default-composer</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// 300B</span>
<span style="color:var(--syntax-comment-color)">// ...</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">results</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">defaultComposer</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">defaults</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">original</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span>

更容易维护，对吧？😉

越快乐越容易

如果在我们的项目中有一个与其他属性不同的特殊属性，并且我们想要另一个替换逻辑，会发生什么情况？好吧，虽然defaultComposer默认情况下有一个配置来检测默认值，但您可以根据需要配置它。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">defaultComposer</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setConfig</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">default-composer</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-name-color)">setConfig</span><span style="color:var(--syntax-text-color)">({</span>
  <span style="color:var(--syntax-comment-color)">// This function is executed for each value of each key that exists in </span>
  <span style="color:var(--syntax-comment-color)">// both the original object and the defaults object.</span>
  <span style="color:var(--syntax-name-color)">isDefaultableValue</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-comment-color)">// - key: key of original or default object</span>
    <span style="color:var(--syntax-comment-color)">// - value: value in the original object</span>
    <span style="color:var(--syntax-comment-color)">// - defaultableValue: pre-calculed boolean, you can use or not, </span>
    <span style="color:var(--syntax-comment-color)">//   depending if all the rules of the default-composer library are correct</span>
    <span style="color:var(--syntax-comment-color)">//   for your project or you need a totally different ones.</span>
    <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">defaultableValue</span> <span style="color:var(--syntax-text-color)">}</span>
    <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">key</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">rare-key</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)">return</span> <span style="color:var(--syntax-name-color)">defaultableValue</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">EMPTY</span><span style="color:var(--syntax-string-color)">'</span>
    <span style="color:var(--syntax-text-color)">}</span> 

    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">defaultableValue</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>

结论

我引入了“ default-composer ”库作为在 JavaScript 中为嵌套对象设置默认值的解决方案。

Object.assign该库是轻量级的，提供了比扩展运算符和方法更简洁、更易于阅读的代码。它还可以更精细地控制哪些属性应设置为默认值。

在本文中，我提供了有关如何使用该库以及它如何简化用于维护嵌套对象的代码的示例。

最后，我解释了如何配置该库来处理需要不同替换逻辑的特殊情况。总的来说，“ default-composer ”是一个有用的库，可以简化为 JavaScript 中的嵌套对象设置默认值的任务。