在 JavaScript(包括 TypeScript)中,数组解构和对象解构是 ES6 引入的两个非常实用的语法特性,它们可以帮助我们更方便地从数组或对象中提取数据。
一、数组解构(Array Destructuring)
???? 基本用法:
js
深色版本
const colors = [‘red’, ‘green’, ‘blue’];
// 解构赋值
const [first, second] = colors;
console.log(first); // “red”
console.log(second); // “green”
✅ 特点:
按照顺序取出元素。
可以跳过某些元素:
js
深色版本
const [a, , c] = [‘apple’, ‘banana’, ‘cherry’];
console.log(a); // “apple”
console.log©; // “cherry”
可以设置默认值:
js
深色版本
const [name = 'Guest'] = [];
console.log(name); // "Guest"
二、对象解构(Object Destructuring)
???? 基本用法:
js
深色版本
const user = {
name: ‘Alice’,
age: 25,
gender: ‘female’
};
// 解构赋值
const { name, age } = user;
console.log(name); // “Alice”
console.log(age); // 25
✅ 特点:
按属性名匹配,不依赖顺序。
可以为变量重命名:
js
深色版本
const { name: fullName } = user;
console.log(fullName); // “Alice”
可以设置默认值:
js
深色版本
const { city = 'Unknown' } = user;
console.log(city); // "Unknown"
三、结合使用:函数返回值 + 解构
你提到的例子就是对象解构与数组解构的结合使用:
ts
深色版本
const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({…});
分解一下:
useForm() 返回一个 数组,第一个元素是 registerForm 函数;
第二个元素是一个包含多个方法的对象,如 setFieldsValue, setProps, getFieldsValue;
这里用了:
数组解构来获取 [0] 和 [1];
然后对第二个元素(是个对象)进行对象解构,抽取出你需要的方法。
四、完整示例对比
类型 示例代码 输出结果
数组解构 const [a, b] = [10, 20]; a=10, b=20
对象解构 const { name, age } = { name: ‘Tom’, age: 30 }; name=‘Tom’, age=30
混合解构 const [{ title }, { author: writer }] = [{ title: ‘Book A’ }, { author: ‘John’ }]; title=‘Book A’, writer=‘John’
如果你想深入理解,还可以试试:
js
深色版本
function getUser() {
return {
id: 1,
info: {
name: ‘Bob’,
email: ‘bob@example.com’
},
roles: [‘admin’, ‘user’]
};
}
const {
id,
info: { name },
roles: [primaryRole]
} = getUser();
console.log(id); // 1
console.log(name); // Bob
console.log(primaryRole); // admin
如果你还有关于嵌套解构、默认值、可选链等进阶用法的问题,也可以继续问我 ????