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/