Question

我有一个来自API响应的对象，如下所示：

{
  // ...
  customerName: 'Jake',
  customerUserName: 'jak3',
  customerEmail: 'some@email.com',
  // ...
}

我希望声明一个新的对象名为 apiUser，以便在我的应用中使用，如下所示：

{
  name: 'Jake',
  userName: 'jak3',
  email: 'some@email.com'
}

我知道我可以使用Object.assign()这样做：

let apiUser = {};
Object.assign(apiUser, {
  name: response.customerName || 'John Doe', // customerName may be an empty string
  userName : response.customerUserName,
  email: response.customerEmail
});

最后问题是：我可以通过对象解构来做到这一点吗？我已经尝试过了：

let apiUser = {};
{customerName: apiUser.name, customerUserName: apiUser.userName, customerEmail: apiUser.email} = response;

但是扔了SyntaxError: Unexpected token :是否有正确的语法或者我应该坚持使用Object.assign()？请不要忘记＆＃34; John Doe＆＃34;条件。

Answer 1

为什么不直接分配给一个新变量，用let去掉前面的赋值，然后修改变量：

const apiUser = {
  name: response.customerName || 'John Doe',
  userName : response.customerUserName,
  email: response.customerEmail
};

或者，如果您想添加到现有字段：

const apiUser = Object.assign({}, originalObject, {
  name: response.customerName || 'John Doe',
  userName : response.customerUserName,
  email: response.customerEmail
}

这也应该有效：

const { customerName: name, customerUserName: userName, customerEmail: email } = originalObject;
const apiUser = {
  name,
  userName,
  customerEmail
};

Answer 2

你的最后一个例子是好的，你只需要围绕这样的陈述包裹parens：

({customerName: apiUser.name, customerUserName: apiUser.userName, customerEmail: apiUser.email} = response)

然而，这不会让你做条件值。为此，您需要执行Object.assign或您讨论过的其他方法之一。

修改

原来你可以做条件值！

({customerName: apiUser.name = "John Doe", customerUserName: apiUser.userName, customerEmail: apiUser.email} = response)

Answer 3

它的运作方式如你所愿：

＆＃13;

let response = {
  // ...
  customerName: 'Jake',
  customerUserName: 'jak3',
  customerEmail: 'some@email.com',
  // ...
};


// Destructuring Assignment (w/ default value)
let apiUser = {};
({ customerName:     apiUser.name = 'John Doe', //<-- default value with '='
   customerUserName: apiUser.userName, 
   customerEmail:    apiUser.email
 } = response );


// Assign Prototype Method
/*
let apiUser = {};
Object.assign(apiUser, {
  name: response.customerName || 'John Doe', // customerName may be an empty string
  userName : response.customerUserName,
  email: response.customerEmail
});
*/

console.log(apiUser);

＆＃13;

根据MDN documentation of Assignment without declaration：

当使用没有声明的对象文字解构赋值时，赋值语句周围的( .. )是必需的语法。

{a, b} = {a: 1, b: 2}不是有效的独立语法，因为左侧的{a, b}被视为块而不是对象文字。

但是，({a, b} = {a: 1, b: 2})有效，var {a, b} = {a: 1, b: 2}
也是如此
注意：您的( ..)表达式前面必须有分号，或者它可能用于执行上一行的函数。

注意： Object.Assign和destructured分配在Internet Explorer中都不可用（Edge是另一回事）。请考虑您的实施。

Answer 4

您可以执行以下操作：

let response = {
    CustomerName: '',
    CustomerUsername: 'jak3',
    CustomerEmail: 'some@email.com',
};
let apiUser = {
    Name: '',
    Username: '',
    Email: '',
};

(
    [
        apiUser.Name,
        apiUser.Username,
        apiUser.Email
    ] = [
        response.CustomerName || 'John Doe',
        response.CustomerUsername,
        response.CustomerEmail
    ]
);
console.log(apiUser);

但是，我不确定与不使用任何花哨功能相比，可读性有何提高，而只是做了：

let response = {
    CustomerName: '',
    CustomerUsername: 'jak3',
    CustomerEmail: 'some@email.com',
};
let apiUser = {
    Name: response.CustomerName || 'John Doe',
    Username: response.CustomerUsername,
    Email: response.CustomerEmail,
};
console.log(apiUser);

当然这更容易阅读和理解？您是否有任何具体原因试图使用更深奥的语法来实现这一目标？

用于构造新对象的对象解构

4 个答案: