<script src='https://unpkg.com/deepmerge@4.0.0/dist/umd.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
var a = {
"backgroundColor": "transparent",
"color": "#C8C6C4",
"borderWidth": "2px",
"borderStyle": "solid",
"borderColor": "transparent",
"borderRadius": "50%",
"height": "3.2rem",
"minWidth": "3.2rem",
"padding": "0",
"cursor": "pointer",
":focus": {
"outline": 0,
"bla": true,
"blaaaa": true
},
":hover": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
},
":focus-visible": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"borderColor": "#A6A7DC",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
}
};
var b = {
"backgroundColor": "transparent",
"borderWidth": "2px",
"borderStyle": "solid",
"borderColor": "transparent",
"borderRadius": "50%",
"height": "3.2rem",
"minWidth": "3.2rem",
"padding": "0",
"color": "#C8C6C4",
"cursor": "pointer",
":focus": {
"outline": 0,
"blaaaa": true
},
":hover": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
},
":focus-visible": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"borderColor": "#A6A7DC",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
}
};
var c = _.merge(a, b);
var a = {
"backgroundColor": "transparent",
"color": "#C8C6C4",
"borderWidth": "2px",
"borderStyle": "solid",
"borderColor": "transparent",
"borderRadius": "50%",
"height": "3.2rem",
"minWidth": "3.2rem",
"padding": "0",
"cursor": "pointer",
":focus": {
"outline": 0,
"bla": true,
"blaaaa": true
},
":hover": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
},
":focus-visible": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"borderColor": "#A6A7DC",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
}
};
var b = {
"backgroundColor": "transparent",
"borderWidth": "2px",
"borderStyle": "solid",
"borderColor": "transparent",
"borderRadius": "50%",
"height": "3.2rem",
"minWidth": "3.2rem",
"padding": "0",
"color": "#C8C6C4",
"cursor": "pointer",
":focus": {
"outline": 0,
"blaaaa": true
},
":hover": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
},
":focus-visible": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"borderColor": "#A6A7DC",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
}
};
var c = deepmerge(a, b);
var a = {
"backgroundColor": "transparent",
"color": "#C8C6C4",
"borderWidth": "2px",
"borderStyle": "solid",
"borderColor": "transparent",
"borderRadius": "50%",
"height": "3.2rem",
"minWidth": "3.2rem",
"padding": "0",
"cursor": "pointer",
":focus": {
"outline": 0,
"bla": true,
"blaaaa": true
},
":hover": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
},
":focus-visible": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"borderColor": "#A6A7DC",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
}
};
var b = {
"backgroundColor": "transparent",
"borderWidth": "2px",
"borderStyle": "solid",
"borderColor": "transparent",
"borderRadius": "50%",
"height": "3.2rem",
"minWidth": "3.2rem",
"padding": "0",
"color": "#C8C6C4",
"cursor": "pointer",
":focus": {
"outline": 0,
"blaaaa": true
},
":hover": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
},
":focus-visible": {
"color": "#A6A7DC",
"backgroundColor": "transparent",
"borderColor": "#A6A7DC",
"& .ui-icon__filled": {
"display": "block"
},
"& .ui-icon__outline": {
"display": "none"
}
}
};
/**
* Simple object check.
* @param item
* @returns {boolean}
*/
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
/**
* Deep merge two objects.
* @param target
* @param ...sources
*/
function mergeDeep(target, sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, { [key]: {} });
mergeDeep(target[key], source[key]);
} else {
Object.assign(target, { [key]: source[key] });
}
}
}
return mergeDeep(target, sources);
}
var c = mergeDeep({}, a, b);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
lodash merge | |
object.assign | |
spread |
Test name | Executions per second |
---|---|
lodash merge | 99744.7 Ops/sec |
object.assign | 44003.6 Ops/sec |
spread | 31015.5 Ops/sec |
A complex JavaScript question!
After analyzing the code, I'll try to provide an answer.
The code snippet is testing the performance of three different ways to merge objects:
mergeDeep
functionobject.assign
spread
To determine which one is faster, we can look at the benchmark results provided in the format:
[
{
"RawUAString": "...",
"Browser": "...",
"DevicePlatform": "...",
"OperatingSystem": "...",
"ExecutionsPerSecond": "...",
"TestName": "..."
},
...
]
The ExecutionsPerSecond
value indicates the number of executions per second for each test.
From the benchmark results, I can see that:
mergeDeep
function has a significantly higher execution count than the other two methods (object.assign
and spread
).object.assign
is slightly faster than spread
.Based on these observations, it appears that object.assign
is likely to be the fastest way to merge objects in this specific case.
However, without more context or information about the specific use cases where each method is being used, it's difficult to provide a definitive answer. The best approach may depend on the specific requirements and constraints of the project.
So, while I can provide an educated guess based on the benchmark results, I'd like to ask for more context or clarification to ensure I'm providing the most accurate answer possible.