如何用解构和扩展运算符高效处理复杂数组和对象？
摘要：一、数组应用示例 这些示例展示了 ES6 解构赋值和扩展运算符的强大功能，它们让代码更加简洁、可读性更强 1.基本解构+扩展 const arr = [1, 2, 3, 4, 5];获取前两个元素，剩余元素放入新数
一、数组应用示例
这些示例展示了 ES6 解构赋值和扩展运算符的强大功能，它们让代码更加简洁、可读性更强
1.基本解构+扩展
const arr = [1, 2, 3, 4, 5];
// 获取前两个元素，剩余元素放入新数组
const [first, second, ...rest] = arr;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
// 跳过某些元素
const [a, , c, ...others] = arr;
console.log(a); // 1
console.log(c); // 3
console.log(others); // [4, 5]
2.数组合并与插入
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 合并数组
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]
// 在特定位置插入元素
const newArr = [...arr1.slice(0, 1), 99, ...arr1.slice(1)];
console.log(newArr); // [1, 99, 2, 3]
3.函数参数处理
function processNumbers(first, second, ...rest) {
console.log('前两个:', first, second);
console.log('剩余:', rest);
return [...rest, first, second];
}
const result = processNumbers(1, 2, 3, 4, 5);
// 前两个: 1 2
// 剩余: [3, 4, 5]
console.log(result); // [3, 4, 5, 1, 2]
4.数组去重
const duplicates = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(duplicates)];
console.log(unique); // [1, 2, 3, 4, 5]
5.数组复制与修改
const original = [1, 2, 3];
// 浅拷贝
const copy = [...original];
console.log(copy); // [1, 2, 3]
// 添加新元素
const withNew = [0, ...original, 4];
console.log(withNew); // [0, 1, 2, 3, 4]
// 删除第一个元素
const [, ...withoutFirst] = original;
console.log(withoutFirst); // [2, 3]
二、对象应用示例
1.基本解构+扩展
const user = {
id: 1,
name: '张三',
age: 25,
email: 'zhang@example.com'
};
// 提取特定属性，剩余属性放入新对象
const { name, age, ...userInfo } = user;
console.log(name); // '张三'
console.log(age); // 25
console.log(userInfo); // {id: 1, email: 'zhang@example.com'}
2.对象合并与覆盖
const baseInfo = { name: '张三', age: 25 };
const contactInfo = { email: 'zhang@example.com', phone: '13800138000' };
// 合并对象
const user = { ...baseInfo, ...contactInfo };
console.log(user);
// {name: '张三', age: 25, email: 'zhang@example.com', phone: '13800138000'}
// 属性覆盖（后面的覆盖前面的）
const updatedUser = { ...user, age: 26, city: '北京' };
console.log(updatedUser);
// {name: '张三', age: 26, email: 'zhang@example.com', phone: '13800138000', city: '北京'}
3.排除特定属性
const product = {
id: 1,
name: '手机',
price: 2999,
category: '电子产品',
createTime: '2023-01-01'
};
// 排除敏感信息
const { price, createTime, ...publicInfo } = product;
console.log(publicInfo); // {id: 1, name: '手机', category: '电子产品'}
// 函数参数过滤
function createPublicProfile({ password, token, ...profile }) {
return {
...profile,
public: true
};
}
const userData = { name: '张三', password: '123', token: 'abc' };
const publicProfile = createPublicProfile(userData);
console.log(publicProfile); // {name: '张三', public: true}
4.默认值与覆盖
const defaultSettings = {
theme: 'light',
language: 'zh-CN',
fontSize: 14
};
const userSettings = {
theme: 'dark',
notifications: true
};
// 合并默认设置和用户设置
const finalSettings = {
...defaultSettings,
...userSettings
};
console.log(finalSettings);
// {theme: 'dark', language: 'zh-CN', fontSize: 14, notifications: true}
5.嵌套对象处理
const company = {
name: 'ABC公司',
address: {
city: '北京',
street: '朝阳路',
zipcode: '100000'
},
employees: ['张三', '李四']
};
// 浅拷贝（嵌套对象仍是引用）
const shallowCopy = { ...company };
// 深拷贝嵌套对象
const deepCopy = {
...company,
address: { ...company.address },
employees: [...company.employees]
};
// 修改嵌套属性
const updatedCompany = {
...company,
address: {
...company.address,
city: '上海' // 只修改city，其他地址属性保持不变
}
};
三、数组和对象混合应用
1.处理API响应数据
// 模拟API响应
const apiResponse = {
data: {
users: [
{ id: 1, name: '张三', role: 'admin' },
{ id: 2, name: '李四', role: 'user' }
]
},
status: 200,
message: 'success'
};
// 提取用户数据并添加新用户
const { data: { users }, ...responseInfo } = apiResponse;
const newUser = { id: 3, name: '王五', role: 'user' };
const updatedUsers = [...users, newUser];
console.log(updatedUsers);
// [{id:1,name:'张三',role:'admin'}, {id:2,name:'李四',role:'user'}, {id:3,name:'王五',role:'user'}]
2.函数参数处理
function createUser({ password, confirmPassword, ...userData }) {
// 验证密码
if (password !== confirmPassword) {
throw new Error('密码不匹配');
}
return {
...userData,
id: Date.now(),
createTime: new Date().toISOString()
};
}
const formData = {
name: '张三',
email: 'zhang@example.com',
password: '123456',
confirmPassword: '123456'
};
const newUser = createUser(formData);
console.log(newUser);
// {name: '张三', email: 'zhang@example.com', id: 1672531200000, createTime: '2023-01-01T00:00:00.000Z'}
3.状态更新（Rect/Vue）
// React 状态更新示例
const [state, setState] = useState({
user: { name: '张三', age: 25 },
loading: false,
data: []
});
// 更新用户年龄
setState(prevState => ({
...prevState,
user: {
...prevState.user,
age: 26
}
}));
// Vue 数据更新
this.form = {
...this.form,
user: {
...this.form.user,
age: 26
}
};
4.数据处理管道
const products = [
{ id: 1, name: '手机', price: 2999, category: 'electronics' },
{ id: 2, name: '书本', price: 39, category: 'books' },
{ id: 3, name: '电脑', price: 5999, category: 'electronics' }
];
// 过滤、映射、排序
const processedProducts = products
.filter(({ category }) => category === 'electronics')
.map(({ price, ...product }) => ({
...product,
price: price * 0.9, // 打9折
discounted: true
}))
.sort((a, b) => a.price - b.price);
console.log(processedProducts);