01程序员

如何在JavaScript中使用对象结构

malong 发布于 2021-02-24

解构赋值是JavaScript ES6中引入的一种特殊语法，它允许我们从一个数组或对象中提取多个项，并在一条语句中将它们赋给变量。

1、基本的对象解构

我们可以从一个对象中提取多个属性，并在一条语句中使用对象解构将它们赋给变量。
与我们将属性逐个分配给变量的传统方法相比，对象解构速记语法非常方便。

 const person = { name: "John", age: 18 };  
const { name, age } = person; //对象解构

我们也可以内联声明变量：

 const { name, age } = { name: "John", age: 18 };

2、无声明分配

我们可以不赋值地声明变量。以后可以使用如下对象分解结构来分配值：

 const person = { name: "John", age: 18 };
let name, age;

({ name, age } = person);

请注意，括号（…）；在使用不带声明的对象文字分解结构赋值时，需要在赋值语句周围。

3、变量名

默认情况下，变量名与要提取的对象属性名相同。我们可以随时将变量名更改为以下内容：

 const person = { name: "John", age: 18 };
const { name: f1, age: a1} = person;
console.log(f1);  //"John"
console.log(a1);  //18

请注意，现在我们只能使用foo和bar变量访问这些值。如果我们尝试使用name和age变量访问值，我们将得到未定义的错误。

4、默认值

我们还可以为变量提供默认值，以防提取的对象属性未定义或不存在。

const person = { name: "John", department: undefined };

const { name = "Bob", department = "NA", age = 21 } = person;

我们还可以用新变量名设置默认值：

 const person = { name: "John", department: undefined };

const { name:foo = "Bob", department:bar = "NA", age:baz = 21 } = person;

5、动态属性名称

我们还可以用动态名称提取属性（属性名称在运行时是已知的），如下所示：

 const prop = "name";
const person = { name: "John",  job: "Developer", department: undefined };

const { [prop]:foo } = person;

6、嵌套对象分解

我们还可以执行嵌套对象分解以从嵌套对象的更深层次提取属性：

 const person = {
    name: "John",
    friends : ["Adam", "Bob", "Charlie"],
    hobbies: ["Biking", "Cooking"],    
    location: {
        country: "USA", 
        city: "NY" 
    }, 
};
const { name, friends, hobbies : [firstHobby, secondHobby], location: { country, city } } = person;

malong

关注私信

文章

关注

粉丝