一、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合并对象的方法众多,根据实际需求选择合适的方法能够更加高效地完成对象合并的任务。