ES6 中的对象解构

这是我上一篇关于数组解构的文章的后续。如果你对解构有所了解，那么你应该读一读。

首先，我们来看一下为什么需要对象解构。我们想从对象中提取数据并赋值给新的变量。在 ES6 之前，该如何实现呢？

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var name = person.name;
    var country = person.country;
    var job = person.job;

    console.log(name);//"Sarah"
    console.log(country);//"Nigeria"
    console.log(job);//Developer"

看看提取这些数据有多繁琐。我们必须重复做同样的事情。ES6 的解构功能可以解决这个问题。让我们直接开始吧。

让我们用 ES6 重复上面的例子。我们不需要逐个赋值，而是可以使用左侧的对象来提取数据。


    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name, country, job} = person;

    console.log(name);//"Sarah"
    console.log(country);//"Nigeria"
    console.log(job);//Developer"

您将获得相同的结果。将变量赋值给未声明的对象也是有效的。

    var {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"};

    console.log(name);//"Sarah"
    console.log(country);//"Nigeria"
    console.log(job);//Developer"

赋值前声明的变量
对象中的变量可以通过解构在赋值前声明。我们来试试看。

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"}; 
    var name, country, job;

    {name, country, job} = person;

    console.log(name);// Error : "Unexpected token ="

()等等！！刚才发生了什么？哦，我们忘了在花括号前面加了。在没有声明的情况下使用对象字面量解构赋值时，赋值语句周围的是必需的语法。这是因为
左侧的被视为一个代码块，而不是一个对象字面量。所以，我们现在就来解决这个问题。( ){}

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};
    var name, country, job;

    ({name, country, job} = person);

    console.log(name);//"Sarah"
    console.log(job);//"Developer"

还需要注意的是，使用此语法时，()前面应该有一个分号。否则，它可能会被用来执行上一行的函数。

请注意，左侧对象中的变量应与对象中的属性键同名person。如果名称不同，我们将得到undefined。看这个。

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name, friends, job} = person;

    console.log(name);//"Sarah"
    console.log(friends);//undefined

如果我们想使用一个新的变量名……好吧，我们可以。

使用新的变量名

如果我们想将对象的值分配给新变量而不是使用属性的名称，我们会这样做。

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name: foo, job: bar} = person;

    console.log(foo);//"Sarah"
    console.log(bar);//"Developer"

因此提取的值将传递给新变量foo和bar。
使用默认值

默认值也可以用于对象解构，以防变量位于undefined要从中提取数据的对象中。

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name = "myName", friend = "Annie"} = person;

    console.log(name);//"Sarah"
    console.log(friend);//"Annie"

因此，如果值不是 undefined，则变量会像的情况一样存储从对象中提取的值name。否则，它会像一样使用默认值friend。

当我们为新变量赋值时，我们也可以设置默认值。

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name:foo = "myName", friend: bar = "Annie"} = person;

    console.log(foo);//"Sarah"
    console.log(bar);//"Annie"

因此name从中提取person并分配给不同的变量。friend另一方面，在undefined中person，因此新变量bar被分配了默认值。

计算属性名称

计算属性名是另一个对象字面量特性，也适用于解构。你可以用表达式指定属性名，只要将其放在方括号中即可。

    var prop = "name";

    var {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"};

    console.log(foo);//"Sarah"

将数组与对象组合

在对象解构中，数组也可以与对象一起使用。下面给出了一个示例。

    var person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]};

    var {name:foo, friends: bar} = person;

    console.log(foo);//"Sarah"
    console.log(bar);//["Annie", "Becky"]

对象解构中的嵌套

解构时对象也可以嵌套。

    var person = {
        name: "Sarah",
        place: {
            country: "Nigeria", 
            city: "Lagos" }, 
        friends : ["Annie", "Becky"]
        };

    var {name:foo,
         place: {
             country : bar,
             city : x}
          } = person;

    console.log(foo);//"Sarah"
    console.log(bar);//"Nigeria"

对象解构中的 Rest

剩余语法也可以用来获取那些尚未被解构模式获取的属性键。这些键及其值会被复制到一个新对象上。请看下面的例子。

    var person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]};

    var {name, friends, ...others} = person;

    console.log(name);//"Sarah"
    console.log(friends);//["Annie", "Becky"]
    console.log(others);// {country: "Nigeria", job: "Developer"}

在这里，其余属性的键不是列出的变量名称的一部分，而是分配给变量的others。其余语法是...others。others可以重命名为您想要的任何变量。

最后一件事，让我们看看如何在函数中使用对象析构。

对象解构和函数

对象解构可以用来给函数赋值。我们可以在这里举个例子。

    function person({name: x, job: y} = {}) {
        console.log(x);
    }

    person({name: "Michelle"});//"Michelle"
    person();//undefined
    person(friend);//Error : friend is not defined

注意{}参数对象右侧的。它使我们能够在不传递参数的情况下调用函数。这就是我们得到的原因undefined。如果我们删除它，则会收到一条错误消息。
我们也可以为参数分配默认值。

    function person({name: x = "Sarah", job: y = "Developer"} = {}) {
        console.log(x);
    }

    person({name});//"Sarah"

正如我们在上面的例子中看到的，我们可以使用对象解构来做很多事情。

有任何疑问或补充？欢迎留言。

感谢您的阅读。:)

文章来源：https://dev.to/sarah_chima/object-destructuring-in-es6-3fm