Javascript中的对象破坏-试图有意义

Question

可能是一个有点傻的问题，但我只是一个初学者，有些事情我正在努力正确理解。

当我们有这样的代码时：

const { userName } = await getUserProfile({ userId });

这里到底发生了什么？我们是否正在从getUserProfile对象中分解userName，以便能够访问该属性？userId是否意味着getUserProfile函数有一个参数，该参数是一个具有userId属性的对象？

对不起，如果这是一个太初学者的问题，但如果有人有时间向我解释，请真的很感激。

Answer 1

我会说这个函数是这样的：

interface Options {
   userId: number;
}

interface ReturnItem {
  userName: string;
}

const getUserProfile = async (options: Options): Promise<ReturnItem> => {
  // make some request with the id
  const response = await axios.get(`/look/up/my/user/${options.userId}`);
  return response.data;
}

析构是基于函数中定义的类型的，因此，您只需将项从返回的对象中拉出来，而不是获取对象，因为类型定义了您可以期望接收的内容。

而不是执行以下操作：

const myId = 1;
const myResult = await getUserProfile({userId: myId});
console.log(myResult.userName);

你可以做：

const userId = 1;
const {userName} = await getUserProfile({userId});
console.log(userName);

另一个例子：

const myReturnData = {
  userName: 'Bjork'
};

现在可以通过以下方式访问用户名：

console.log(myReturnData.userName);

或

const {userName} = myReturnData;
console.log(userName);

析构是在对象中获取这些值并将它们分配给变量。

再远一点...

const myReturnData = {
  userName: 'Bjork',
  coolnessFactor: 10000
};

const {userName, coolnessFactor} = myReturnData;
console.log('My User is: ', userName);
console.log('and my Coolnessfactor is: ', coolnessFactor);