Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Combine multiple Arrays of Objects with Array.prototype.concat vs spread operator vs flat
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
Array.prototype.concat vs spread operator vs Array.prototype.flat
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
Array.prototype.concat
var params = [ {name:"hello", someBool:true, someNum:1}, {name:"hello2", someBool:true, someNum:2}, {name:"hello3", someBool:true, someNum:3}, {name:"hello3", someBool:true, someNum:3},{name:"hello4", someBool:true, someNum:4},{name:"hello5", someBool:true, someNum:5},]; var params2 = [ {name:"hellohello", someBool:true, someNum:21}, {name:"hellohello2", someBool:true, someNum:22}, {name:"hellohello3", someBool:true, someNum:23}, {name:"hellohello3", someBool:true, someNum:23},{name:"hellohello4", someBool:true, someNum:24},{name:"hellohello5", someBool:true, someNum:25},]; var params3 = [ {name:"hellohellohello", someBool:true, someNum:31}, {name:"hellohellohello2", someBool:true, someNum:32}, {name:"hellohellohello3", someBool:true, someNum:33}, {name:"hellohellohello3", someBool:true, someNum:33},{name:"hellohellohello4", someBool:true, someNum:34},{name:"hellohellohello5", someBool:true, someNum:35},]; var params4 = [ {name:"hellohellohellohello", someBool:true, someNum:41}, {name:"hellohellohellohello2", someBool:true, someNum:42}, {name:"hellohellohellohello3", someBool:true, someNum:43}, {name:"hellohellohellohello3", someBool:true, someNum:43},{name:"hellohellohellohello4", someBool:true, someNum:44},{name:"hellohellohellohello5", someBool:true, someNum:45},]; var params5 = [ {name:"hellohellohellohellohello", someBool:true, someNum:51}, {name:"hellohellohellohellohello2", someBool:true, someNum:52}, {name:"hellohellohellohellohello3", someBool:true, someNum:53}, {name:"hellohellohellohellohello3", someBool:true, someNum:53},{name:"hellohellohellohellohello4", someBool:true, someNum:54},{name:"hellohellohellohellohello5", someBool:true, someNum:55},]; var other = params.concat(params2, params3, params4, params5);
spread operator
var params = [ {name:"hello", someBool:true, someNum:1}, {name:"hello2", someBool:true, someNum:2}, {name:"hello3", someBool:true, someNum:3}, {name:"hello3", someBool:true, someNum:3},{name:"hello4", someBool:true, someNum:4},{name:"hello5", someBool:true, someNum:5},]; var params2 = [ {name:"hellohello", someBool:true, someNum:21}, {name:"hellohello2", someBool:true, someNum:22}, {name:"hellohello3", someBool:true, someNum:23}, {name:"hellohello3", someBool:true, someNum:23},{name:"hellohello4", someBool:true, someNum:24},{name:"hellohello5", someBool:true, someNum:25},]; var params3 = [ {name:"hellohellohello", someBool:true, someNum:31}, {name:"hellohellohello2", someBool:true, someNum:32}, {name:"hellohellohello3", someBool:true, someNum:33}, {name:"hellohellohello3", someBool:true, someNum:33},{name:"hellohellohello4", someBool:true, someNum:34},{name:"hellohellohello5", someBool:true, someNum:35},]; var params4 = [ {name:"hellohellohellohello", someBool:true, someNum:41}, {name:"hellohellohellohello2", someBool:true, someNum:42}, {name:"hellohellohellohello3", someBool:true, someNum:43}, {name:"hellohellohellohello3", someBool:true, someNum:43},{name:"hellohellohellohello4", someBool:true, someNum:44},{name:"hellohellohellohello5", someBool:true, someNum:45},]; var params5 = [ {name:"hellohellohellohellohello", someBool:true, someNum:51}, {name:"hellohellohellohellohello2", someBool:true, someNum:52}, {name:"hellohellohellohellohello3", someBool:true, someNum:53}, {name:"hellohellohellohellohello3", someBool:true, someNum:53},{name:"hellohellohellohellohello4", someBool:true, someNum:54},{name:"hellohellohellohellohello5", someBool:true, someNum:55},]; var other = [ ...params, ...params2, ...params3, ...params4, ...params5 ]
Array.prototype.flat
var params = [ {name:"hello", someBool:true, someNum:1}, {name:"hello2", someBool:true, someNum:2}, {name:"hello3", someBool:true, someNum:3}, {name:"hello3", someBool:true, someNum:3},{name:"hello4", someBool:true, someNum:4},{name:"hello5", someBool:true, someNum:5},]; var params2 = [ {name:"hellohello", someBool:true, someNum:21}, {name:"hellohello2", someBool:true, someNum:22}, {name:"hellohello3", someBool:true, someNum:23}, {name:"hellohello3", someBool:true, someNum:23},{name:"hellohello4", someBool:true, someNum:24},{name:"hellohello5", someBool:true, someNum:25},]; var params3 = [ {name:"hellohellohello", someBool:true, someNum:31}, {name:"hellohellohello2", someBool:true, someNum:32}, {name:"hellohellohello3", someBool:true, someNum:33}, {name:"hellohellohello3", someBool:true, someNum:33},{name:"hellohellohello4", someBool:true, someNum:34},{name:"hellohellohello5", someBool:true, someNum:35},]; var params4 = [ {name:"hellohellohellohello", someBool:true, someNum:41}, {name:"hellohellohellohello2", someBool:true, someNum:42}, {name:"hellohellohellohello3", someBool:true, someNum:43}, {name:"hellohellohellohello3", someBool:true, someNum:43},{name:"hellohellohellohello4", someBool:true, someNum:44},{name:"hellohellohellohello5", someBool:true, someNum:45},]; var params5 = [ {name:"hellohellohellohellohello", someBool:true, someNum:51}, {name:"hellohellohellohellohello2", someBool:true, someNum:52}, {name:"hellohellohellohellohello3", someBool:true, someNum:53}, {name:"hellohellohellohellohello3", someBool:true, someNum:53},{name:"hellohellohellohellohello4", someBool:true, someNum:54},{name:"hellohellohellohellohello5", someBool:true, someNum:55},]; var other = [params, params2, params3, params4, params5].flat()
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.prototype.concat
spread operator
Array.prototype.flat
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Based on the provided benchmark results, here's an analysis: 1. **Test Name: "spread operator"**: This test is using the spread operator (`...`) to flatten an array of arrays. The best result is from Chrome 96, with an execution rate of 3213944.5 executions per second. 2. **Test Name: "Array.prototype.concat"**: This test is using `Array.prototype.concat()` to concatenate two arrays. However, the best result is not explicitly provided in the benchmark results, but it's clear that `Array.prototype.concat()` has a higher execution rate than `Array.prototype.flat()`. 3. **Test Name: "Array.prototype.flat()"**: This test is using `Array.prototype.flat()` to flatten an array of arrays. The best result is from Chrome 96, with an execution rate of 257686.6875 executions per second. It appears that the order of operations and the use of spread operators can significantly impact performance in JavaScript. In this case: * Using the spread operator (`...`) results in a faster execution rate compared to `Array.prototype.concat()`. * `Array.prototype.flat()` is also quite fast, with Chrome 96 providing the best result. However, it's essential to note that these benchmark results are specific to the provided code snippets and might not be representative of all use cases. The performance difference between spread operators and `Array.prototype.flat()` or `Array.prototype.concat()` can vary depending on the specific requirements of your application.
Related benchmarks:
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (new try)
Array.prototype.concat vs spread operator real
Array.prototype.concat vs spread operator on large array
Array.prototype.concat vs spread operator on small array
Comments
Confirm delete:
Do you really want to delete benchmark?