spred vs object assign vs object setPrototypeOf vs reflect setPrototypeOf
window.data = Array.from({ length: 65535 }, (_, index) => index);
var spread = { window.data };
var assign = Object.assign({}, window.data);
var assignNull = Object.assign(Object.create(null), window.data);
var objectSetPrototypeOf = Object.setPrototypeOf({}, window.data);
var objectSetPrototypeOfNull = Object.setPrototypeOf(Object.create(null), window.data);
var reflectSetPrototypeOf = Object.setPrototypeOf({}, window.data);
var reflectSetPrototypeOfNull = Object.setPrototypeOf(Object.create(null), window.data);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
spread | |
assign | |
assign null | |
Object setPrototypeOf | |
Object setPrototypeOf null | |
Reflect setPrototypeOf | |
Reflect setPrototypeOf null |
Test name | Executions per second |
---|---|
spread | 98.1 Ops/sec |
assign | 94.1 Ops/sec |
assign null | 104.3 Ops/sec |
Object setPrototypeOf | 3955041.8 Ops/sec |
Object setPrototypeOf null | 2463769.5 Ops/sec |
Reflect setPrototypeOf | 3549593.2 Ops/sec |
Reflect setPrototypeOf null | 2323514.5 Ops/sec |
Let's break down the provided benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations.
Benchmark Purpose: The MeasureThat.net benchmark is designed to compare the performance of different ways to create and set the prototype chain of an object in JavaScript. The goal is to determine which method is the fastest for creating objects with large amounts of data.
Options Compared:
{ ...window.data }
): This option uses the spread operator to create a new object with the same properties as window.data
.var assign = Object.assign({}, window.data);
): This option uses Object.assign()
to copy all enumerable own properties from window.data
to a new object.var objectSetPrototypeOf = Object.setPrototypeOf({}, window.data);
): This option sets the prototype chain of an object created with Object.create(null)
to point to window.data
.var reflectSetPrototypeOf = Object.setPrototypeOf({}, window.data);
): This option uses the Object.setPrototypeOf()
method with the Reflect
namespace to set the prototype chain of an object created with Object.create(null)
to point to window.data
.Pros and Cons of Each Approach:
{ ...window.data }
):window.data
has non-enumerable properties.var assign = Object.assign({}, window.data);
):var objectSetPrototypeOf = Object.setPrototypeOf({}, window.data);
):Object.create()
and setPrototypeOf()
, and may not work as expected if window.data
has non-enumerable properties.var reflectSetPrototypeOf = Object.setPrototypeOf({}, window.data);
):Object.setPrototypeOf()
, but with a more modern API.Reflect
namespace and may not work as expected if window.data
has non-enumerable properties.Library Used: None
Special JS Feature/ Syntax: The benchmark uses a special JavaScript feature called "Object.create()". This method creates a new object with the specified prototype, allowing you to customize the inheritance chain of an object. It's a low-level API that requires manual management of prototypes, but can be useful in certain scenarios.
Other Considerations:
Alternative Approaches: Other approaches to create objects with large amounts of data could include:
Keep in mind that the benchmark's results may not be representative of all use cases, and the best approach will depend on the specific requirements and constraints of your project.