👋 告别扩展运算符：使用默认 Composer

原文： https: //aralroca.com/blog/default-composer

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

什么是“默认作曲家”？

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

默认作曲家徽标

优于 Spread Operator 和 Object.assign 的优势

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

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

假设我们有这个原始对象：

const original = {
  name: "",
  score: null,
  address: {
    street: "",
    city: "",
    state: "",
    zip: "",
  },
  emails: [],
  hobbies: [],
  another: "anotherValue"
};

这些是默认设置：

const defaults = {
  name: "John Doe",
  score: 5,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
  emails: ["john.doe@example.com"],
  hobbies: ["reading", "traveling"],
};

我们希望合并这些对象，将原始值（即、、和）替换""为null默认[]值undefined。{}因此，我们的想法是：

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"
 **/

也许使用扩展运算符，我们必须做类似这样的事情：

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,
};

像Object.assign这样：

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,
});

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

头痛...

我们defaultComposer只能使用这个：

import defaultComposer from 'default-composer'; // 300B
// ...
const results = defaultComposer(defaults, original);

更容易维护，对吧？😉

更快乐、更轻松

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

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;
  },
});

结论

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

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

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

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

文章来源：https://dev.to/aralroca/say-goodbye-to-spread-operator-use-default-composer-3c2j