In my JavaScript code, I am working with an array of objects like this:
var arrayObjs = [
{ id:abc123, radius:5.0},
{ id:def235, radius:2.5},...]
I have been using a for loop to search for a specific object with the id 'def235'. I'm curious if it would be more efficient to use an object structure like this:
var objectObjs = {
{ abc123:{ id:abc123, radius:5.0}},
{ def235:{ id:def235, radius:2.5}},...}
Is it more effective to utilize an object like this?
If you're searching by id, then yes, it is likely more efficient. However, in your example, there is an extra layer of {} that should be removed:
var objectObjs = {
abc123:{ id:abc123, radius:5.0},
def235:{ id:def235, radius:2.5},
//...
};
JavaScript objects are optimized for property retrieval by name.
Another option is to use a Map, which is also designed for efficient retrieval by key.
If you decide to use an object, it's best to create it using Object.create(null) to prevent inheriting Object.prototype properties. Although you may not look up ids like toString or valueOf, it's still a good practice:
var objectObjs = Object.assign(Object.create(null), {
abc123:{ id:abc123, radius:5.0},
def235:{ id:def235, radius:2.5},
//...
});
You can easily create this object from your array to avoid duplicating the ids and the potential for mistakes:
var arrayObjs = [
{ id:abc123, radius:5.0},
{ id:def235, radius:2.5},/*...*/];
var objectObjs = Object.create(null);
arrayObjs.forEach(entry => { objectObjs[entry.id] = entry; });
Exploring some interesting results, I decided to give it a shot: https://jsperf.com/accessor-test-loop-vs-object
As T.J. pointed out, accessing by an object property proves to be significantly faster. Surprisingly, the disparity is more pronounced on Chrome compared to Firefox, based on my recent experiment. Feel free to conduct the test on Chrome, Firefox, or Edge.
var arrayObjs = [
{ id:'abc123', radius:5.0},
{ id:'def235', radius:2.5}
];
for (var i = 0; i < arrayObjs.length; i++) {
if (arrayObjs[i].id == 'def235') {
// Found it
break;
}
}
..VERSUS..
var objectObjs = {
abc123:{ id: 'abc123', radius: 5.0},
def235:{ id: 'def235', radius: 2.5}
}
var found = !!objectObjs.def235;
if (found) {
// ..
}
I've implemented a like/unlike button along with a field displaying the number of likes. The code below uses PHP and HTML to echo the variable that represents the total number of likes: PHP-HTML: <span>likes: <?php echo $row['likes&apo ...
I've been tackling a recursive function that retrieves breadcrumb information from subcategories up to the main category across multiple levels. While I am successful in extracting this data, I encounter an issue when trying to display the contents us ...
I have a RESTful API built with Node.JS and ExpressJS. I want to retrieve a JSON array from the FrontEnd and pass it into my API. api.post('/save_pg13_app_list', function (req, res) { var app_list = { list_object: req.body.li ...
I encountered an issue during the installation of react-router-dom. D:\react\routeingreact>npm i react-router-dom npm ERR! Cannot read property 'match' of undefined npm ERR! A complete log of this run can be found in: npm ERR! ...
I'm encountering an issue with retrieving a value using an id. In my code, I have it set up like this: view <input type="text" value="<?php echo $add->class;?>" name="cls_<?php echo $add->id;?>" id="cls_<?php echo $add->id ...
My goal is to have two dialog boxes, one for the sign-up page and another for the login page. When a user clicks on the sign-up button on the top page, the sign-up screen should appear. Likewise, when they click on the login button on the sign-up page, the ...
I am new to JavaScript and want to enhance my page's functionality using jQuery. Here is my current HTML: <div class="input_fields_wrap"> <div><ul class="inputList"></ul></div> </div> My goal ...
Is there a way to search through an array for specific values to retrieve their corresponding keys? I am working with the $_GET variable containing values c and 3 that I need to match against two arrays. Here is the code snippet in question: <?php $a ...
Currently, I am utilizing the Raphael JS library on the client-side to generate a chart in SVG format. However, my goal is to make this chart downloadable, which poses a challenge since SVG does not natively support this feature. Initially, I attempted to ...
Here's a helpful resource on Creating a Custom Filter Selector with jQuery for your reference. A Quick Overview: If you're unfamiliar with jQuery's Custom Filter Selectors, they allow you to extend jQuery’s selector expressions by addi ...
Just dipping my toes into the world of knockoutjs, I've got this viewmodel set up: var Testing = function(){ this.Username = ko.observable(""); this.Password = ko.observable(""); this.email = ko.observable(""); } I'm tasked with ...
Is there a way to manage the chosen value in a v-modeled select tag using vue.js? I created a jsFiddle demonstration, but unfortunately, it is not functioning correctly. This leads to my inquiry: vm.$set('selected', '1') // does not wo ...
What is the best way to terminate the socket connection on the client side? I am currently utilizing: socket.io 0.9 node.js 0.10.15 express 3.3.4 For example, when calling localhost/test -- server side var test = io .of('/test') .on(&apos ...
I am facing a challenge in updating the style of a specific element after ng-repeat has finished changing the DOM. The directive I have implemented for triggering ng-repeat works perfectly fine when adding items to the model, but it does not get called whe ...
Currently, I am facing an issue with my MVC application while trying to integrate Bootstrap 5 using Webpack. Despite attempting various workarounds with stage-0, stage-2, and stage-3, none have proven successful for me. I suspect that the problem lies wit ...
I'm currently working with Nodejs and I have a query that retrieves a count. I need to check if the count > 0 in order to return true, otherwise false. However, I am facing difficulties handling this in Nodejs. Below is the code snippet I am strugg ...
While working on developing an API in Asp.Net Core 3.1, everything seemed to be functioning properly. However, I encountered CORS-related errors when attempting to send requests via ajax. Interestingly, these errors were not present when sending GET reques ...
I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...
To set up a new Gatsby starter blog, I executed the following commands: gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen cd blog gatsby develop However, while running gatsby develop, I encountered numerous errors labeled as ERROR # ...
I integrated the ag-grid-vue into my project and added a separate component to one of the columns for user actions, such as Edit, View, or Delete. Editing and deleting records work fine, but when a record is deleted, I want the table to re-render by fetchi ...