Javascript对象解构和默认参数相结合

Question

今天我遇到了以下我不认识的语法：

 const createUser = ({ age = 1, name = 'Anonymous', }) => ({ age, name, }); const defaultP = createUser({ age: 5 }); console.log(defaultP); 

我认为它使用Object destructuring和default参数来设置作为参数发送的对象的默认值。

语法让我有点失望，因为通常我只能通过以下方式看到对象解构：

 let obj = { prop1: 1 } const {prop1} = obj; console.log(prop1); 

题：

这种语法如何正常工作？

Answer 1

该语法确实使用对象解构来从参数对象中提取默认值。 Mozilla文档中有一些示例可以帮助我们理解这个技巧，请查看：

var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

您的示例的一个可能的缺点是createUser方法忽略参数对象的所有其他值，并始终返回仅包含age和name的对象。 如果你想让它更灵活，我们可以像这样使用Object.assign() ：

const createUser = (o) => Object.assign({ age: 1, name: 'Anonymous' }, o);

在这种情况下，创建的用户将是一个将参数对象与默认值合并的对象。 现在请注意，默认值位于方法体中。 使用此方法，我们可以创建包含其他属性的用户，例如：

const superman = createUser({ name: 'Superman', type: 'superhero' });
console.log(superman);
// output: {age: 1, name: "Superman", type: "Superhero"}

Answer 2

如果您使用babel并将代码转换为ES5，它将如下所示：

function createUser(params) {
  return {
    age: typeof params.age === 'undefined' ? 1 : params.age,
    name: typeof params.name === 'undefined' ? 'Anonymous' : params.name,
  };
}

---

只是注意：函数参数的默认值以相同的方式工作：

const multiply = (a, optionalB) => {
  const b = typeof optionalB !== 'undefined' ? optionalB : 2;
  return a * b;
}

与以下相同：

const multiply = (a, b = 2) => {
  return a * b;
}

它增加了可读性，主要是在多次使用参数的情况下。

Answer 3

您的代码使用了Object Destructuring和default function props 。

const createUser = ({
  age = 1,
  name = 'Anonymous',
}) => ({
  age,
  name,
});

函数createUser接受Object类型的单个参数。 函数正在返回同一个对象，如果你在参数中定义了两个对象属性，那么它将返回你传递的对象。 否则它将用默认值替换它，分别为1和Anonymous 。

你可以在这里进一步阅读：

https://wesbos.com/destructuring-renaming/

https://wesbos.com/destructuring-default-values/