Typescript 解构对象|极客教程

Typescript 解构对象

在 TypeScript 中，解构（Destructuring）是指将数组或对象中的元素解构出来，赋值给定义的变量。解构对象是一种方便且常用的操作，能够快速获取对象中的属性值，并赋给对应的变量。

解构对象基本语法

解构对象的基本语法由花括号 {} 和赋值操作符 = 组成，如下所示：

const person = {
    name: 'Alice',
    age: 30,
    city: 'New York'
};

const { name, age, city } = person;

console.log(name); // Alice
console.log(age); // 30
console.log(city); // New York

上述代码中，我们定义了一个名为 person 的对象，包含了 name、age 和 city 三个属性。接着我们使用解构赋值操作符将这三个属性分别赋给了变量 name、age 和 city，然后分别输出这三个变量的值。运行结果如下：

Alice
30
New York

解构对象的高级用法

默认值

解构对象时可以指定默认值，即在对象中找不到对应属性时使用的值。示例如下：

const person = {
    name: 'Alice',
    age: 30
};

const { name, age, city = 'New York' } = person;

console.log(name); // Alice
console.log(age); // 30
console.log(city); // New York

上述代码中，我们定义了一个名为 person 的对象，但只包含了 name 和 age 两个属性。在解构对象时，我们为变量 city 指定了默认值为 'New York'，这样当 person 对象中不存在 city 属性时，变量 city 的值将会是 'New York'。运行结果如下：

Alice
30
New York

别名

解构对象时可以使用别名，即将属性值赋给变量时使用不同的变量名。示例如下：

const person = {
    name: 'Alice',
    age: 30,
    city: 'New York'
};

const { name: personName, age: personAge, city: personCity } = person;

console.log(personName); // Alice
console.log(personAge); // 30
console.log(personCity); // New York

上述代码中，我们定义了一个名为 person 的对象，包含了 name、age 和 city 三个属性。在解构对象时，我们使用了别名，将 name 属性赋给了变量 personName，将 age 属性赋给了变量 personAge，将 city 属性赋给了变量 personCity。运行结果如下：

Alice
30
New York

嵌套解构

在 TypeScript 中，解构对象还支持嵌套解构，即在对象中嵌套对象，可以一次性获取多层属性值。示例如下：

const person = {
    name: 'Alice',
    age: 30,
    address: {
        city: 'New York',
        postalCode: '10001'
    }
};

const { name, age, address: { city, postalCode } } = person;

console.log(name); // Alice
console.log(age); // 30
console.log(city); // New York
console.log(postalCode); // 10001

上述代码中，我们定义了一个名为 person 的对象，其中 address 属性为一个嵌套对象，包含了 city 和 postalCode 两个属性。在解构对象时，我们使用嵌套解构的方式，一次性获取了 person 对象中的多层属性值，并将其赋给了对应的变量。运行结果如下：