Question

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

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

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

语法让我有些不安，因为通常我只能以以下方式看到对象的分解：

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

问题：

此语法如何完全起作用？

Answer 1

该语法确实使用Object Destructuring以便从参数对象中提取默认值。 the Mozilla documentation中有一些示例可以帮助我们理解窍门，请查看以下内容：

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

该示例的一个可能的缺点是createUser方法将忽略参数对象的所有其他值，并且始终返回仅包含age和{{1 }}。如果您想使其更加灵活，我们可以像这样使用name：

Object.assign()

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

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

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/

Javascript对象解构和默认参数组合

问题：

3 个答案: