es6常见数组、对象中的整合与拆解

一、对象整合优化方案

1. 合并对象(Object.assign/ 展开语法)

场景 :合并多个配置项、表单数据更新。
方案 :使用 Object.assign 或展开语法(...)。
示例

javascript

ini 复制代码
// 合并配置项
const defaultConfig = { theme: 'light', fontSize: 14 };
const userConfig = { fontSize: 16, showSidebar: true };
const finalConfig = { ...defaultConfig, ...userConfig };
// 结果: { theme: 'light', fontSize: 16, showSidebar: true }

项目应用

在 React 项目中,合并 props 和默认值:

javascript

ini 复制代码
const MyComponent = (props) => {
  const { name = '默认值', age } = props;
  // 等价于: const defaults = { name: '默认值' };
  // const { name, age } = { ...defaults, ...props };
};

2. 深度合并对象

场景 :嵌套对象的合并(如复杂配置、状态管理)。
方案 :使用 lodash.merge 或自定义递归函数。
示例

javascript

css 复制代码
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 中合并状态:

javascript

ini 复制代码
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
示例

javascript

javascript 复制代码
// 过滤空值
const data = { name: '张三', age: null, email: '' };
const filteredData = Object.fromEntries(
  Object.entries(data).filter(([key, value]) => value !== null && value !== '')
);
// 结果: { name: '张三' }

项目应用

在表单提交前过滤无效数据:

javascript

ini 复制代码
const formData = { username: 'test', password: '', remember: false };
const validData = Object.fromEntries(
  Object.entries(formData).filter(([_, value]) => value !== '')
);

二、数组整合优化方案

1. 数组合并与去重

场景 :合并分页数据、合并标签列表。
方案 :使用 SetArray.reduce
示例

javascript

ini 复制代码
// 合并并去重
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const merged = [...new Set([...arr1, ...arr2])];
// 结果: [1, 2, 3, 4, 5]

项目应用

在无限滚动加载中合并数据:

javascript

ini 复制代码
const [list, setList] = useState([]);

// 加载更多
const loadMore = (newData) => {
  setList([...new Set([...list, ...newData])]);
};

2. 数组对象合并(按 ID)

场景 :更新列表中的部分数据(如评论列表更新某条评论)。
方案 :使用 MapArray.find
示例

javascript

ini 复制代码
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 中更新列表项:

javascript

ini 复制代码
const updateComment = (commentId, newContent) => {
  setComments(prev => prev.map(item => 
    item.id === commentId ? { ...item, content: newContent } : item
  ));
};

3. 数组分组与聚合

场景 :按类别分组商品、统计数据。
方案 :使用 Array.reduce
示例

javascript

ini 复制代码
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;
}, {});
// 结果: { 水果: [{...}, {...}], 蔬菜: [{...}] }

项目应用

在电商项目中按分类展示商品:

javascript

javascript 复制代码
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. 链式操作简化逻辑

场景 :复杂数据处理(如筛选、转换、分组)。
示例

javascript

ini 复制代码
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 :提供 mergegroupBykeyBy 等工具函数。

    javascript

    ini 复制代码
    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:函数式编程工具库,支持管道操作。

    javascript

    ini 复制代码
    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 更新嵌套状态。
示例

javascript

go 复制代码
// 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;
  }
};
相关推荐
前端小巷子20 分钟前
Webpack 5模块联邦
前端·javascript·面试
前端双越老师21 分钟前
为何前端圈现在不关注源码了?
面试·前端框架·源码
玲小珑23 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了24 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆30 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆36 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan39 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack