es6常見(jiàn)數(shù)組、對(duì)象中的整合與拆解方法示例
一、對(duì)象整合優(yōu)化方案
1. 合并對(duì)象（Object.assign/ 展開(kāi)語(yǔ)法）
場(chǎng)景：合并多個(gè)配置項(xiàng)、表單數(shù)據(jù)更新。
方案：使用 Object.assign 或展開(kāi)語(yǔ)法（...）。
示例：
// 合并配置項(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. 深度合并對(duì)象
場(chǎng)景：嵌套對(duì)象的合并（如復(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. 對(duì)象屬性過(guò)濾 / 轉(zhuǎn)換
場(chǎng)景：接口數(shù)據(jù)清洗（如移除空值、重命名字段）。
方案：使用 Object.fromEntries + Object.entries。
示例：
// 過(guò)濾空值
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)用：
在表單提交前過(guò)濾無(wú)效數(shù)據(jù)：
const formData = { username: 'test', password: '', remember: false };
const validData = Object.fromEntries(
Object.entries(formData).filter(([_, value]) => value !== '')
);
二、數(shù)組整合優(yōu)化方案
1. 數(shù)組合并與去重
場(chǎng)景：合并分頁(yè)數(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)用：
在無(wú)限滾動(dòng)加載中合并數(shù)據(jù)：
const [list, setList] = useState([]);
// 加載更多
const loadMore = (newData) => {
setList([...new Set([...list, ...newData])]);
};
2. 數(shù)組對(duì)象合并（按 ID）
場(chǎng)景：更新列表中的部分?jǐn)?shù)據(jù)（如評(píng)論列表更新某條評(píng)論）。
方案：使用 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ù)組分組與聚合
場(chǎng)景：按類(lèi)別分組商品、統(tǒng)計(jì)數(shù)據(jù)。
方案：使用 Array.reduce。
示例：
const products = [
{ id: 1, category: '水果', name: '蘋(píng)果' },
{ 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)目中按分類(lèi)展示商品：
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)讲僮骱?jiǎn)化邏輯
場(chǎng)景：復(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)大寫(xiě)
const highScores = data
.filter(item => item.score >= 80)
.map(item => item.name.toUpperCase());
// 結(jié)果: ['A', 'B']
2. 使用工具庫(kù)提升效率
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ù)式編程工具庫(kù)，支持管道操作。
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)用
場(chǎ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;
}
};
總結(jié)
到此這篇關(guān)于es6常見(jiàn)數(shù)組、對(duì)象中的整合與拆解的文章就介紹到這了,更多相關(guān)es6數(shù)組、對(duì)象整合與拆解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
講兩件事:1.this指針的用法小探. 2.ie的attachEvent和firefox的addEventListene
講兩件事:1.this指針的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件處理上的區(qū)別...2007-04-04
JavaScript的setTimeout與setInterval是兩個(gè)很容易欺騙別人感情的方法,因?yàn)槲覀冮_(kāi)始常常以為調(diào)用了就會(huì)按既定的方式執(zhí)行, 我想不少人都深有同感2010-10-10
javascript之textarea打字機(jī)效果提示代碼推薦
非常不錯(cuò)的提示輸入內(nèi)容，動(dòng)態(tài)的提示，給人親切感2008-09-09
比較常用到的一些字符驗(yàn)證函數(shù)，里面有正則等好東西，推薦大家保存即可直接調(diào)用。2009-03-03
各種頁(yè)面定時(shí)跳轉(zhuǎn)(倒計(jì)時(shí)跳轉(zhuǎn))代碼總結(jié)
下面對(duì)實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)（也稱(chēng)倒計(jì)時(shí)跳轉(zhuǎn)）做一下總結(jié)，以備不時(shí)之需，經(jīng)常使用的朋友可以參考下2013-10-10
TypeScript是一種強(qiáng)大的編程語(yǔ)言,它在JavaScript的基礎(chǔ)上添加了靜態(tài)類(lèi)型檢查,使得代碼更加可維護(hù)和類(lèi)型安全,在TypeScript中,類(lèi)和接口是構(gòu)建復(fù)雜應(yīng)用程序的關(guān)鍵組成部分,本文將深入探討TypeScript中類(lèi)與接口的使用,需要的朋友可以參考下2023-09-09
微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
微信小程序里面的自帶彈窗icon只有兩種，success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實(shí)現(xiàn)代碼 ,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
微信小程序怎么加入JavaScript腳本，做出動(dòng)態(tài)效果
這篇文章主要介紹了教大家為小程序加入?JavaScript?腳本，做出動(dòng)態(tài)效果，以及如何跟用戶(hù)互動(dòng)。學(xué)會(huì)了腳本，就能做出復(fù)雜的頁(yè)面了。需要的朋友可以參考下2022-12-12
javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
項(xiàng)目中不需要加載jquery這種龐大的js插件要使用到ajax這種功能該如何辦呢？下面和大家分享幾種利用javascript實(shí)現(xiàn)原生ajax的方法2013-09-09