JavaScript 对象解构技巧

关于 JavaScript，我们得到了一种从对象中提取属性的极其有用的方法。

注意：解构也适用于数组，但我们主要关注对象

假设我们有一个用户对象并想要提取各个变量的属性。

const user = {
  name: 'Chris',
  age: 33,
};

在 ES2015 之前，我们必须像这样显式分配这些变量：

var name = user.name;

这在现代 JavaScript 中仍然有效。但是，它可以被优化。
我们可以省略属性的双重使用绑定name，并像这样解构属性。

const { name, age } = user;

console.log(name);
// Chris

console.log(age);
// 33

等等，什么？
简直太神奇了，对吧？我们不需要重复命名变量，可以直接将它们赋值给它们的变量。

解构并保留剩余对象

假设你有一个包含多个字段的对象。你想提取其中一个字段，并跟踪剩余字段。

您可能认为我们需要分配所有剩余的属性，但这是通过使用扩展运算符内置的。

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
};

const { name, ...rest } = user;

console.log(name);
// Chris

console.log(rest);
// { age: 33, username: 'DailyDevTips' }

解构嵌套对象属性

对象通常会有多层结构。
通过解构，我们还可以定位嵌套属性。

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
  address: {
    country: 'South Africa',
    postalCode: '7700',
  },
};

就拿上面的例子来说，如何一次性提取出国家/地区呢？

const {
  address: { country },
} = user;

console.log(country);
// South Africa

但是如果我们想提取整个地址对象和国家会发生什么？

在上面的例子中，如果我们尝试记录，address它将显示：ReferenceError: address is not defined。

然而，我们可以简单地在解构中传递另一个引用，如下所示：

const {
  address: { country },
  address,
} = user;

console.log(address);
// { country: 'South Africa', postalCode: '7700' }

console.log(country);
// South Africa

用不同的名字解构

也许您想用不同的名称解构一些属性。

让我们以上面的例子为例，说明我们想要接收名为的地址对象shippingAddress。

我们可以使用分号:分隔符来称呼新名字。

const { address: shippingAddress } = user;

console.log(shippingAddress);
// { country: 'South Africa', postalCode: '7700' }

这是创建可直接使用的变量的好方法。

解构可能为空的值

让我们重新获取我们的用户对象，我们已经解构了年龄，但我忘了提到这是一个可选参数。

有些用户可能选择不设置。在这种情况下，我们可以采用默认值。

注意：这对于年龄属性来说有点奇怪，因此请以此为例

const user = {
  name: 'Chris',
  age: 33,
};

const { age } = user;

console.log(age);
// 33

效果很好，但让我们看看没有年龄属性的用户。

const user = {
  name: 'Yaatree',
};

const { age } = user;

console.log(age);
// undefined

如果我们想设置默认年龄，我们可以使用值来解构它。

const { age = 25 } = user;

console.log(age);
// 25

循环内的解构

上述所有示例都是基于平面物体的，但很多时候，您会拥有一系列用户。

const users = [
  {
    name: 'Chris',
    age: 33,
  },
  {
    name: 'Yaatree',
    age: 2,
  },
];

我们可以循环遍历这些项目并在循环内对它们进行解构。

for (let { name, age } of users) {
  console.log(`User: ${name} is ${age} years old 🎉`);
}

// 'User: Chris is 33 years old 🎉'
// 'User: Yaatree is 2 years old 🎉'

动态名称解构

当我们只知道我们想要在运行时解构的变量时会发生什么？

假设用户单击一个按钮，允许他们从对象中提取随机属性。

该处理程序将具有以下属性。

const getProperty = 'name'; // or 'age'

// How do we get this from the user now?

要使用它，我们可以使用方括号注释。

const { [getProperty]: returnValue } = user;

console.log(returnValue);
// Chris

从函数解构

假设我们有一个返回对象的函数。

const getProduct = () => {
  return {
    id: 1,
    name: 'Macbook',
  };
};

如果我们默认调用它，它将看起来像这样。

const product = getProduct();

console.log(product);
// { id: 1, name: 'Macbook' }

但是，我们只想获取此函数的 id。可以吗？

const { id } = getProduct();

console.log(id);
// 1

是的，可以。我们可以简单地解构返回值并分配所需的属性。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/javascript-object-destructuring-tips-154c