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

傷城~ 2024-05-02 20:09 1阅读 0赞

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

### 什么是“默认作曲家”？ ###

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

![72ce667e0ee5083c44e7ecb19016773f.png][]

[默认作曲家徽标][Link 1]

### 优于 Spread 运算符和 Object.assign ###

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

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

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

这些是默认值：

`""`我们想要合并这些对象，将、`null`、`[]`和`undefined`的原始值替换`{}`为默认值。所以这个想法是得到：

<code>console.log(results)
 /**
 * {
 * "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"
 **/
 </code>

可能使用传播运算符我们将不得不做这样的事情：

<code>const results = {
 ...defaults,
 ...original,
 name: original.name || defaults.name,
 score: original.score ?? defaults.score, // "??" beacause 0 is valid
 address: {
 ...defaults.address,
 ...original.address,
 street: original.address.street || defaults.address.street,
 city: original.address.city || defaults.address.city,
 state: original.address.state || defaults.address.state,
 zip: original.address.zip || defaults.address.zip,
 },
 emails: original.emails.length ? original.emails : defaults.emails,
 hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies,
 };
 </code>

和`Object.assign`这样的事情：

<code>const results = Object.assign({}, defaults, original, {
 name: original.name || defaults.name,
 score: original.score ?? defaults.score, // "??" beacause 0 is valid
 address: Object.assign({}, defaults.address, original.address, {
 street: original.address.street || defaults.address.street,
 city: original.address.city || defaults.address.city,
 state: original.address.state || defaults.address.state,
 zip: original.address.zip || defaults.address.zip,
 }),
 emails: original.emails.length ? original.emails : defaults.emails,
 hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies,
 });
 </code>

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

头痛...

我们`defaultComposer`只能使用这个：

更容易维护，对吧？😉

![ddeb9a96872e71fef6ac08d7c74835af.jpeg][]

越快乐越容易

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

<code>import { defaultComposer, setConfig } from 'default-composer';
 
 setConfig({
 // This function is executed for each value of each key that exists in 
 // both the original object and the defaults object.
 isDefaultableValue: (
 // - key: key of original or default object
 // - value: value in the original object
 // - defaultableValue: pre-calculed boolean, you can use or not, 
 // depending if all the rules of the default-composer library are correct
 // for your project or you need a totally different ones.
 { key, value, defaultableValue }
 ) => {
 if (key === 'rare-key') {
 return defaultableValue || value === 'EMPTY'
 } 
 
 return defaultableValue;
 },
 });
 </code>

### 结论 ###

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

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

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

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

[default-composer]: http://telegeram1.com
[72ce667e0ee5083c44e7ecb19016773f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/68e1ea522eb04bdf8f17907f8ea65681.png
[Link 1]: https://github.com/aralroca/default-composer
[...spread]: https://zhifj.com
[ddeb9a96872e71fef6ac08d7c74835af.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/a5fbc9acf0cc4921b3dcdf576ad17e8a.jpeg