快捷導(dǎo)航

es6常見數(shù)組、對象中的整合與拆解方法示例

更新時(shí)間：2025年06月14日 10:57:56 作者：拉不動(dòng)的豬

在ES6中合并兩個(gè)數(shù)組對象通常指的是將兩個(gè)數(shù)組的內(nèi)容合并到一個(gè)新的數(shù)組中,而保持?jǐn)?shù)組內(nèi)對象的完整性,這篇文章主要介紹了es6常見數(shù)組、對象中的整合與拆解的相關(guān)資料,需要的朋友可以參考下

一、對象整合優(yōu)化方案

1. 合并對象（Object.assign/ 展開語法）

場景：合并多個(gè)配置項(xiàng)、表單數(shù)據(jù)更新。

方案：使用 Object.assign 或展開語法（...）。

示例：

// 合并配置項(xiàng)
const defaultConfig = { theme: 'light', fontSize: 14 };
const userConfig = { fontSize: 16, showSidebar: true };
const finalConfig = { ...defaultConfig, ...userConfig };
// 結(jié)果: { theme: 'light', fontSize: 16, showSidebar: true }

項(xiàng)目應(yīng)用：

在 React 項(xiàng)目中，合并 props 和默認(rèn)值：

const MyComponent = (props) => {
  const { name = '默認(rèn)值', age } = props;
  // 等價(jià)于: const defaults = { name: '默認(rèn)值' };
  // const { name, age } = { ...defaults, ...props };
};

2. 深度合并對象

場景：嵌套對象的合并（如復(fù)雜配置、狀態(tài)管理）。

方案：使用 lodash.merge 或自定義遞歸函數(shù)。

示例：

import merge from 'lodash/merge';

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const merged = merge(obj1, obj2);
// 結(jié)果: { a: { b: 1, c: 2 } }

項(xiàng)目應(yīng)用：

在 Vuex/Pinia 中合并狀態(tài)：

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. 對象屬性過濾 / 轉(zhuǎn)換

場景：接口數(shù)據(jù)清洗（如移除空值、重命名字段）。

方案：使用 Object.fromEntries + Object.entries。

示例：

// 過濾空值
const data = { name: '張三', age: null, email: '' };
const filteredData = Object.fromEntries(
  Object.entries(data).filter(([key, value]) => value !== null && value !== '')
);
// 結(jié)果: { name: '張三' }

項(xiàng)目應(yīng)用：

在表單提交前過濾無效數(shù)據(jù)：

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

二、數(shù)組整合優(yōu)化方案

1. 數(shù)組合并與去重

場景：合并分頁數(shù)據(jù)、合并標(biāo)簽列表。

方案：使用 Set 或 Array.reduce。

示例：

// 合并并去重
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const merged = [...new Set([...arr1, ...arr2])];
// 結(jié)果: [1, 2, 3, 4, 5]

項(xiàng)目應(yīng)用：

在無限滾動(dòng)加載中合并數(shù)據(jù)：

const [list, setList] = useState([]);

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

2. 數(shù)組對象合并（按 ID）

場景：更新列表中的部分?jǐn)?shù)據(jù)（如評論列表更新某條評論）。

方案：使用 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
);

項(xiàng)目應(yīng)用：

在 React 中更新列表項(xiàng)：

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

3. 數(shù)組分組與聚合

場景：按類別分組商品、統(tǒng)計(jì)數(shù)據(jù)。

方案：使用 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;
}, {});
// 結(jié)果: { 水果: [{...}, {...}], 蔬菜: [{...}] }

項(xiàng)目應(yīng)用：

在電商項(xiàng)目中按分類展示商品：

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>
  ));
};

三、實(shí)戰(zhàn)技巧

1. 鏈?zhǔn)讲僮骱喕壿?/h3>

場景：復(fù)雜數(shù)據(jù)處理（如篩選、轉(zhuǎn)換、分組）。

示例：

const data = [
  { id: 1, name: 'A', score: 85 },
  { id: 2, name: 'B', score: 92 },
  { id: 3, name: 'C', score: 78 }
];

// 篩選高分，提取名字，轉(zhuǎn)大寫
const highScores = data
  .filter(item => item.score >= 80)
  .map(item => item.name.toUpperCase());
// 結(jié)果: ['A', 'B']

2. 使用工具庫提升效率

Lodash：提供 merge、groupBy、keyBy 等工具函數(shù)。

import { groupBy, keyBy } from 'lodash';

const users = [
  { id: 1, role: 'admin' },
  { id: 2, role: 'user' },
  { id: 3, role: 'user' }
];

const usersByRole = groupBy(users, 'role');
// 結(jié)果: { admin: [{...}], user: [{...}, {...}] }

Ramda：函數(shù)式編程工具庫，支持管道操作。

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. 在狀態(tài)管理中應(yīng)用

場景：Redux/MobX 更新嵌套狀態(tài)。

示例：

// 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;
  }
};