解构(Destructuring)是一种在 JavaScript 和 TypeScript 中用来从数组或对象中提取值并赋给变量的语法。它可以使代码更简洁、可读,并且可以方便地访问复杂数据结构中的数据。
数组解构
数组解构允许你通过位置来提取数组中的值,并将它们赋给变量。在 TypeScript 中,你可以选择性地为变量指定类型。
const numbers: number[] = [1, 2, 3];
const [first, second, third]: number[] = numbers;
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(third); // 输出: 3
在这个例子中,我们从 numbers
数组中提取值,并将它们赋给变量 first
、second
和 third
,同时指定了它们的类型为 number
。
对象解构
对象解构允许你从对象中提取属性并赋给变量。同样,在 TypeScript 中,你也可以指定变量的类型。
interface Person {
name: string;
age: number;
}
const person: Person = { name: 'Alice', age: 30 };
const { name, age }: { name: string, age: number } = person;
console.log(name); // 输出: Alice
console.log(age); // 输出: 30
在这个例子中,我们从 person
对象中提取 name
和 age
属性,并将它们赋给变量 name
和 age
,同时指定了它们的类型为 { name: string, age: number }
。
重命名
使用重命名时,可以在解构模式中为提取的属性指定新的变量名。
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName: first, lastName: last } = person;
console.log(first); // 输出: John
console.log(last); // 输出: Doe
在这个例子中,我们从 person
对象中提取 firstName
属性并将其赋给变量 first
,同时提取 lastName
属性并将其赋给变量 last
。
默认值
为解构的变量指定默认值可以在提取的属性值为 undefined
或不存在时使用。
const { a = 1, b = 2 } = { a: 3 };
console.log(a); // 输出: 3
console.log(b); // 输出: 2(使用了默认值)
在这个例子中,b
变量使用了默认值 2
,因为提取的对象中不存在 b
属性。
嵌套解构
嵌套解构允许从嵌套的对象或数组中提取值。
const data = {
person: {
name: 'John',
age: 30
},
scores: [90, 85, 95]
};
const { person: { name, age }, scores: [math, english, science] } = data;
console.log(name); // 输出: John
console.log(age); // 输出: 30
console.log(math); // 输出: 90
console.log(english); // 输出: 85
console.log(science); // 输出: 95
在这个例子中,我们从 data
对象中提取了 person
和 scores
属性,并从中获取相应的值。person
属性是一个对象,我们再次对其进行解构以获取 name
和 age
属性的值;scores
属性是一个数组,我们从中提取了数学、英语和科学的分数。