解构赋值+扩展运算符在数组和对象上的应用例子

一、数组应用示例
这些示例展示了 ES6 解构赋值和扩展运算符的强大功能，它们让代码更加简洁、可读性更强
1.基本解构+扩展

1. const arr = [1, 2, 3, 4, 5];
3. // 获取前两个元素，剩余元素放入新数组
4. const [first, second, ...rest] = arr;
5. console.log(first);  // 1
6. console.log(second); // 2
7. console.log(rest);   // [3, 4, 5]
9. // 跳过某些元素
10. const [a, , c, ...others] = arr;
11. console.log(a);      // 1
12. console.log(c);      // 3
13. console.log(others); // [4, 5]

复制代码

2.数组合并与插入

1. const arr1 = [1, 2, 3];
2. const arr2 = [4, 5, 6];
4. // 合并数组
5. const merged = [...arr1, ...arr2];
6. console.log(merged); // [1, 2, 3, 4, 5, 6]
8. // 在特定位置插入元素
9. const newArr = [...arr1.slice(0, 1), 99, ...arr1.slice(1)];
10. console.log(newArr); // [1, 99, 2, 3]

复制代码

3.函数参数处理

1. function processNumbers(first, second, ...rest) {
2.   console.log('前两个:', first, second);
3.   console.log('剩余:', rest);
4.   return [...rest, first, second];
5. }
7. const result = processNumbers(1, 2, 3, 4, 5);
8. // 前两个: 1 2
9. // 剩余: [3, 4, 5]
10. console.log(result); // [3, 4, 5, 1, 2]

复制代码

4.数组去重

1. const duplicates = [1, 2, 2, 3, 4, 4, 5];
2. const unique = [...new Set(duplicates)];
3. console.log(unique); // [1, 2, 3, 4, 5]

复制代码

5.数组复制与修改

1. const original = [1, 2, 3];
3. // 浅拷贝
4. const copy = [...original];
5. console.log(copy); // [1, 2, 3]
7. // 添加新元素
8. const withNew = [0, ...original, 4];
9. console.log(withNew); // [0, 1, 2, 3, 4]
11. // 删除第一个元素
12. const [, ...withoutFirst] = original;
13. console.log(withoutFirst); // [2, 3]

复制代码

二、对象应用示例
1.基本解构+扩展

1. const user = {
2.   id: 1,
3.   name: '张三',
4.   age: 25,
5.   email: 'zhang@example.com'
6. };
8. // 提取特定属性，剩余属性放入新对象
9. const { name, age, ...userInfo } = user;
10. console.log(name);     // '张三'
11. console.log(age);      // 25
12. console.log(userInfo); // {id: 1, email: 'zhang@example.com'}

复制代码

2.对象合并与覆盖

1. const baseInfo = { name: '张三', age: 25 };
2. const contactInfo = { email: 'zhang@example.com', phone: '13800138000' };
4. // 合并对象
5. const user = { ...baseInfo, ...contactInfo };
6. console.log(user);
7. // {name: '张三', age: 25, email: 'zhang@example.com', phone: '13800138000'}
9. // 属性覆盖（后面的覆盖前面的）
10. const updatedUser = { ...user, age: 26, city: '北京' };
11. console.log(updatedUser);
12. // {name: '张三', age: 26, email: 'zhang@example.com', phone: '13800138000', city: '北京'}

复制代码

3.排除特定属性

1. const product = {
2.   id: 1,
3.   name: '手机',
4.   price: 2999,
5.   category: '电子产品',
6.   createTime: '2023-01-01'
7. };
9. // 排除敏感信息
10. const { price, createTime, ...publicInfo } = product;
11. console.log(publicInfo); // {id: 1, name: '手机', category: '电子产品'}
13. // 函数参数过滤
14. function createPublicProfile({ password, token, ...profile }) {
15.   return {
16.     ...profile,
17.     public: true
18.   };
19. }
21. const userData = { name: '张三', password: '123', token: 'abc' };
22. const publicProfile = createPublicProfile(userData);
23. console.log(publicProfile); // {name: '张三', public: true}

复制代码

4.默认值与覆盖

1. const defaultSettings = {
2.   theme: 'light',
3.   language: 'zh-CN',
4.   fontSize: 14
5. };
7. const userSettings = {
8.   theme: 'dark',
9.   notifications: true
10. };
12. // 合并默认设置和用户设置
13. const finalSettings = {
14.   ...defaultSettings,
15.   ...userSettings
16. };
17. console.log(finalSettings);
18. // {theme: 'dark', language: 'zh-CN', fontSize: 14, notifications: true}

复制代码

5.嵌套对象处理

1. const company = {
2.   name: 'ABC公司',
3.   address: {
4.     city: '北京',
5.     street: '朝阳路',
6.     zipcode: '100000'
7.   },
8.   employees: ['张三', '李四']
9. };
11. // 浅拷贝（嵌套对象仍是引用）
12. const shallowCopy = { ...company };
14. // 深拷贝嵌套对象
15. const deepCopy = {
16.   ...company,
17.   address: { ...company.address },
18.   employees: [...company.employees]
19. };
21. // 修改嵌套属性
22. const updatedCompany = {
23.   ...company,
24.   address: {
25.     ...company.address,
26.     city: '上海'  // 只修改city，其他地址属性保持不变
27.   }
28. };

复制代码

三、数组和对象混合应用
1.处理API响应数据

1. // 模拟API响应
2. const apiResponse = {
3.   data: {
4.     users: [
5.       { id: 1, name: '张三', role: 'admin' },
6.       { id: 2, name: '李四', role: 'user' }
7.     ]
8.   },
9.   status: 200,
10.   message: 'success'
11. };
13. // 提取用户数据并添加新用户
14. const { data: { users }, ...responseInfo } = apiResponse;
15. const newUser = { id: 3, name: '王五', role: 'user' };
16. const updatedUsers = [...users, newUser];
18. console.log(updatedUsers);
19. // [{id:1,name:'张三',role:'admin'}, {id:2,name:'李四',role:'user'}, {id:3,name:'王五',role:'user'}]

复制代码

2.函数参数处理

1. function createUser({ password, confirmPassword, ...userData }) {
2.   // 验证密码
3.   if (password !== confirmPassword) {
4.     throw new Error('密码不匹配');
5.   }
6.   
7.   return {
8.     ...userData,
9.     id: Date.now(),
10.     createTime: new Date().toISOString()
11.   };
12. }
14. const formData = {
15.   name: '张三',
16.   email: 'zhang@example.com',
17.   password: '123456',
18.   confirmPassword: '123456'
19. };
21. const newUser = createUser(formData);
22. console.log(newUser);
23. // {name: '张三', email: 'zhang@example.com', id: 1672531200000, createTime: '2023-01-01T00:00:00.000Z'}

复制代码

3.状态更新（Rect/Vue）

1. // React 状态更新示例
2. const [state, setState] = useState({
3.   user: { name: '张三', age: 25 },
4.   loading: false,
5.   data: []
6. });
8. // 更新用户年龄
9. setState(prevState => ({
10.   ...prevState,
11.   user: {
12.     ...prevState.user,
13.     age: 26
14.   }
15. }));
17. // Vue 数据更新
18. this.form = {
19.   ...this.form,
20.   user: {
21.     ...this.form.user,
22.     age: 26
23.   }
24. };

复制代码

4.数据处理管道

1. const products = [
2.   { id: 1, name: '手机', price: 2999, category: 'electronics' },
3.   { id: 2, name: '书本', price: 39, category: 'books' },
4.   { id: 3, name: '电脑', price: 5999, category: 'electronics' }
5. ];
7. // 过滤、映射、排序
8. const processedProducts = products
9.   .filter(({ category }) => category === 'electronics')
10.   .map(({ price, ...product }) => ({
11.     ...product,
12.     price: price * 0.9, // 打9折
13.     discounted: true
14.   }))
15.   .sort((a, b) => a.price - b.price);
17. console.log(processedProducts);

复制代码

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！