ES6中的解构

发布于:2025-05-14 ⋅ 阅读:(11) ⋅ 点赞:(0)

在 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

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


网站公告

今日签到

点亮在社区的每一天
去签到