<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
var arr = [];
var object = {
type: 'aaa',
subtype: 'bbb',
card_last4:'bbb',
card_type:'bbb',
card_exp_month:'bbb',
card_exp_year:'bbb',
card_country:'bbb',
foo: 'bar'
};
for (var i = 0; i <= 100000; i++) { arr.push(object); }
arr.map(function (element) {
return _.pick(
element,
'type',
'subtype',
'card_last4',
'card_type',
'card_exp_month',
'card_exp_year',
'card_country',
'something'
);
});
arr.map(function ({
type,
subtype,
card_last4,
card_type,
card_exp_month,
card_exp_year,
card_country,
something
} ) {
return {
type,
subtype,
card_last4,
card_type,
card_exp_month,
card_exp_year,
card_country,
something
};
});
const props = [
"type",
"subtype",
"card_last4",
"card_type",
"card_exp_month",
"card_exp_year",
"card_country",
"something"
];
arr.map(function (element) {
const res = {};
for(let prop of props){
res[prop] = element[prop]
}
return res;
});
arr.map(function (element) {
return {
type: element.type,
subtype: element.subtype,
card_last4: element.card_last4,
card_type: element.card_type,
card_exp_month: element.card_exp_month,
card_exp_year: element.card_exp_year,
card_country: element.card_country,
something: element.something
};
});
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash | |
Native | |
Manual pick with property names | |
Manual pick |
Test name | Executions per second |
---|---|
Lodash | 3.3 Ops/sec |
Native | 144.9 Ops/sec |
Manual pick with property names | 30.8 Ops/sec |
Manual pick | 264.7 Ops/sec |
Let's break down the provided benchmark definitions and explain what each test case is measuring.
Benchmark Overview
The benchmark compares the performance of three approaches to extract specific properties from an object:
pick
function from the Lodash library to select specific properties from the object.Lodash (_.pick
)
The Lodash pick
function is used to select a subset of properties from an object. It takes two arguments: the object and an array of property names to include. In this benchmark, _.pick
is used with the entire object
array, which contains 8 properties. The test measures how long it takes to apply _pick
to each element in the array.
Native Destructuring
The native JavaScript syntax uses destructuring and spread operators ({ ... }
) to extract specific properties from an object. In this benchmark, { type, subtype, card_last4, card_type, card_exp_month, card_exp_year, card_country, something }
is used as the destructured object, which corresponds to the same 8 properties in the object
array.
Manual Pick with Property Names
This approach uses an array of property names (props
) and iterates through it to extract each corresponding property from the object
. The test measures how long it takes to apply this manual process for all elements in the array.
Manual Pick
This is a simpler approach that extracts all properties without specifying any. It simply returns the entire object, which contains 8 properties.
Library: Lodash
The Lodash library provides various utility functions, including pick
, which is used in this benchmark. The library simplifies the process of extracting specific properties from objects and can be useful for developers who need to perform such operations frequently.
Special JavaScript Feature/Syntax: Destructuring
Destructuring syntax ({ ... }
) is a modern JavaScript feature that allows you to extract specific properties from an object in a concise way. It's used in both the Native and Manual pick with Property Names test cases.
Alternatives
For performance-critical applications, developers might consider using alternative approaches or optimizations, such as:
Object.fromEntries()
(available in modern browsers) for manual picking.Keep in mind that these alternatives might not be supported by all browsers or platforms, and their performance benefits may depend on specific use cases and requirements.