es6常见数组、对象中的整合与拆解方法示例
作者：拉不动的猪
在ES6中合并两个数组对象通常指的是将两个数组的内容合并到一个新的数组中,而保持数组内对象的完整性,这篇文章主要介绍了es6常见数组、对象中的整合与拆解的相关资料,需要的朋友可以参考下
一、对象整合优化方案
1. 合并对象（Object.assign/ 展开语法）
场景：合并多个配置项、表单数据更新。
方案：使用 Object.assign 或展开语法（...）。
示例：
// 合并配置项
const defaultConfig = { theme: 'light', fontSize: 14 };
const userConfig = { fontSize: 16, showSidebar: true };
const finalConfig = { ...defaultConfig, ...userConfig };
// 结果: { theme: 'light', fontSize: 16, showSidebar: true }
项目应用：
在 React 项目中，合并 props 和默认值：
const MyComponent = (props) => {
const { name = '默认值', age } = props;
// 等价于: const defaults = { name: '默认值' };
// const { name, age } = { ...defaults, ...props };
};
2. 深度合并对象
场景：嵌套对象的合并（如复杂配置、状态管理）。
方案：使用 lodash.merge 或自定义递归函数。
示例：
import merge from 'lodash/merge';
const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const merged = merge(obj1, obj2);
// 结果: { a: { b: 1, c: 2 } }
项目应用：
在 Vuex/Pinia 中合并状态：
const state = {
user: {
info: { name: '张三', age: 20 },
settings: { theme: 'light' }
}
};
// 更新user.info，保留其他字段
const newUserInfo = { age: 21, gender: '男' };
state.user.info = merge(state.user.info, newUserInfo);
3. 对象属性过滤 / 转换
场景：接口数据清洗（如移除空值、重命名字段）。
方案：使用 Object.fromEntries + Object.entries。
示例：
// 过滤空值
const data = { name: '张三', age: null, email: '' };
const filteredData = Object.fromEntries(
Object.entries(data).filter(([key, value]) => value !== null && value !== '')
);
// 结果: { name: '张三' }
项目应用：
在表单提交前过滤无效数据：
const formData = { username: 'test', password: '', remember: false };
const validData = Object.fromEntries(
Object.entries(formData).filter(([_, value]) => value !== '')
);
二、数组整合优化方案
1. 数组合并与去重
场景：合并分页数据、合并标签列表。
方案：使用 Set 或 Array.reduce。
示例：
// 合并并去重 const arr1 = [1, 2, 3]; const arr2 = [3, 4, 5]; const merged = [...new Set([...arr1, ...arr2])]; // 结果: [1, 2, 3, 4, 5]
项目应用：
在无限滚动加载中合并数据：
const [list, setList] = useState([]);
// 加载更多
const loadMore = (newData) => {
setList([...new Set([...list, ...newData])]);
};
2. 数组对象合并（按 ID）
场景：更新列表中的部分数据（如评论列表更新某条评论）。
方案：使用 Map 或 Array.find。
示例：
const list = [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' }
];
const updatedItem = { id: 2, name: 'B（已更新）' };
const newList = list.map(item =>
item.id === updatedItem.id ? updatedItem : item
);
项目应用：
在 React 中更新列表项：
const updateComment = (commentId, newContent) => {
setComments(prev => prev.map(item =>
item.id === commentId ? { ...item, content: newContent } : item
));
};
3. 数组分组与聚合
场景：按类别分组商品、统计数据。
方案：使用 Array.reduce。
示例：
const products = [
{ id: 1, category: '水果', name: '苹果' },
{ id: 2, category: '蔬菜', name: '胡萝卜' },
{ id: 3, category: '水果', name: '香蕉' }
];
const grouped = products.reduce((acc, item) => {
(acc[item.category] = acc[item.category] || []).push(item);
return acc;
}, {});
// 结果: { 水果: [{...}, {...}], 蔬菜: [{...}] }
项目应用：
在电商项目中按分类展示商品：
const renderProductsByCategory = () => {
const groupedProducts = products.reduce((acc, p) => {
(acc[p.category] = acc[p.category] || []).push(p);
return acc;
}, {});
return Object.entries(groupedProducts).map(([category, items]) => (
<div key={category}>
<h3>{category}</h3>
<ul>
{items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
));
};
三、实战技巧
1. 链式操作简化逻辑
场景：复杂数据处理（如筛选、转换、分组）。
示例：
const data = [
{ id: 1, name: 'A', score: 85 },
{ id: 2, name: 'B', score: 92 },
{ id: 3, name: 'C', score: 78 }
];
// 筛选高分，提取名字，转大写
const highScores = data
.filter(item => item.score >= 80)
.map(item => item.name.toUpperCase());
// 结果: ['A', 'B']
2. 使用工具库提升效率
Lodash：提供
merge、groupBy、keyBy等工具函数。import { groupBy, keyBy } from 'lodash'; const users = [ { id: 1, role: 'admin' }, { id: 2, role: 'user' }, { id: 3, role: 'user' } ]; const usersByRole = groupBy(users, 'role'); // 结果: { admin: [{...}], user: [{...}, {...}] }Ramda：函数式编程工具库，支持管道操作。
import { pipe, filter, map, toUpper } from 'ramda'; const processData = pipe( filter(item => item.score >= 80), map(item => item.name), map(toUpper) ); const result = processData(data);
3. 在状态管理中应用
场景：Redux/MobX 更新嵌套状态。
示例：
// Redux reducer 中不可变更新
const initialState = {
users: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
]
};
const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE_USER':
return {
...state,
users: state.users.map(user =>
user.id === action.payload.id
? { ...user, ...action.payload }
: user
)
};
default:
return state;
}
};
总结
到此这篇关于es6常见数组、对象中的整合与拆解的文章就介绍到这了,更多相关es6数组、对象整合与拆解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！