当前位置：首页 > news >正文

ES6中的解构

news 来源：原创 2025/5/14 5:54:21

在 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

如果你还有关于嵌套解构、默认值、可选链等进阶用法的问题，也可以继续问我 😊