一、js對象合併方法
js對象合併是指將多個對象合併成一個對象。其中一個對象是基礎對象,其他對象的屬性會被合併到該基礎對象中。下面是一個基礎的js對象合併方法:
/** * 合併一個或多個對象到第一個對象 * @param target 目標對象,最終被修改的對象 * @param source 要合併的對象 * @returns {*} */ function extend(target, source) { for (let key in source) { if (source.hasOwnProperty(key)) { target[key] = source[key]; } } return target; }
以上代碼展示了一個簡單的對象合併方法,遍歷傳入的所有對象,將其屬性添加到目標對象中。如果屬性名稱相同,則會覆蓋目標對象的屬性。
可以將該方法用於合併任意數量的對象。
二、js對象合併並去重
在前面提到的js對象合併方法中,如果屬性名稱相同,會覆蓋目標對象的屬性。如果希望保留重複的屬性,則需要在合併時進行去重。下面是一個帶有去重功能的js對象合併方法:
/** * 合併一個或多個對象到第一個對象並去重 * @param target 目標對象,最終被修改的對象 * @param sources 要合併的對象 * @returns {*} */ function merge(target, ...sources) { sources.forEach(function (source) { for (let key in source) { if (source.hasOwnProperty(key)) { if (!target.hasOwnProperty(key)) { target[key] = source[key]; } else if (Array.isArray(target[key]) && Array.isArray(source[key])) { target[key] = [...new Set([...target[key], ...source[key]])]; } else if (typeof target[key] === 'object' && typeof source[key] === 'object') { merge(target[key], source[key]); } else { target[key] = source[key]; } } } }); return target; }
該方法除了遍歷要合併的對象外,還增加了一個去重的功能。對於重複的屬性,如果是兩個數組,則進行並集去重;如果是兩個對象,則進行遞歸遍歷。
三、js兩個對象合併成一個數組
除了將多個對象合併成一個對象外,有時也需要將兩個對象合併成一個數組。下面是一個將兩個對象合併成一個數組的js方法:
/** * 兩個對象合併成一個數組 * @param a 對象A * @param b 對象B * @returns {Array} 合併後的數組 */ function mergeToArray(a, b) { let arr = []; for (let key in a) { if (a.hasOwnProperty(key)) { arr.push(a[key]); } } for (let key in b) { if (b.hasOwnProperty(key)) { arr.push(b[key]); } } return arr; }
該方法簡單直接,將兩個對象的所有屬性值放入一個數組中返回。
四、js對象合併指定屬性
有時候只需要合併指定的屬性,而不是所有屬性。下面是一個合併指定屬性的js對象合併方法:
/** * 合併指定屬性到目標對象中 * @param target 目標對象 * @param source 來源對象 * @param keys 合併的屬性 */ function mergeKeys(target, source, keys) { keys.forEach(function (key) { if (source.hasOwnProperty(key)) { target[key] = source[key]; } }); }
上述代碼中,只有指定的屬性會被合併到目標對象中。
五、js深度合併對象
有時候需要同時合併對象中嵌套的對象,實現深度合併,下面是一個深度合併對象的方法:
/** * 深度合併對象 * @param target 目標對象 * @param source 來源對象 * @returns {*} */ function mergeDeep(target, source) { const isObject = (obj) => typeof obj === 'object' && obj !== null; if (!isObject(target) || !isObject(source)) { return source; } for (let key in source) { if (source.hasOwnProperty(key)) { const targetValue = target[key]; const sourceValue = source[key]; if (Array.isArray(targetValue) && Array.isArray(sourceValue)) { target[key] = [...targetValue, ...sourceValue]; } else if (isObject(targetValue) && isObject(sourceValue)) { target[key] = mergeDeep({...targetValue}, sourceValue); } else { target[key] = sourceValue; } } } return target; }
該方法會進行遞歸遍歷,合併所有嵌套的對象。
六、js對象合併並返回新的對象
上面的大多數方法都是在原有對象上進行合併,如果需要返回一個新對象,可以使用以下方法:
/** * 新對象合併 * @param sources 要合併的對象 * @returns {*|{}} 合併後的新對象 */ function mergeNew(...sources) { return sources.reduce(function (acc, obj) { return Object.assign(acc, obj); }, {}); }
該方法會將所有傳入的對象合併為一個新的對象並返回。
七、js合併對象
除了上述方法外,還有其他方法可以合併對象。
例如,使用ES6語法可以通過以下方式合併對象:
let a = {a: 1, b: 2}; let b = {b: 3, c: 4}; let c = {...a, ...b}; // {a: 1, b: 3, c: 4}
使用lodash庫可以通過以下方式合併對象:
const _ = require('lodash'); let a = {a: 1, b: 2}; let b = {b: 3, c: 4}; let c = _.merge({}, a, b); // {a: 1, b: 3, c: 4}
八、js對象合併成為一個對象
除了將多個對象合併成一個對象外,還有一種情況是將一組具有相同鍵的對象合併成一個對象。下面是一個將一組對象合併成一個對象的js方法:
let arr = [{name: "Tom", age: 20}, {name: "Jack", age: 25}]; let obj = arr.reduce((acc, cur) => { acc[cur.name] = cur.age; return acc; }, {}); console.log(obj); // {Tom: 20, Jack: 25}
該方法通過迭代傳入的數組,將具有相同鍵的對象合併為一個對象並返回。
九、對象合併的幾種方法
以上介紹了常見的js對象合併方法,除此之外還有其他一些方法。
使用jQuery庫可以通過以下方式合併對象:
let a = {a: 1, b: 2}; let b = {b: 3, c: 4}; let c = $.extend({}, a, b); // {a: 1, b: 3, c: 4}
使用Object.assign方法可以將多個對象合併為一個對象:
let a = {a: 1, b: 2}; let b = {b: 3, c: 4}; let c = Object.assign({}, a, b); // {a: 1, b: 3, c: 4}
在ES8中可以使用對象展開符(…)來簡單地合併對象:
let a = {a: 1, b: 2}; let b = {b: 3, c: 4}; let c = {...a, ...b}; // {a: 1, b: 3, c: 4}
綜上所述,JS合併對象的方法眾多,根據實際需求選擇合適的方法能夠更加高效地完成對象合併的任務。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/297737.html