wondering if I can make my javascript more efficient.
I have a var JSP = "the jsp's name"
And I have statements in a javascript validation file:
if(( JSP == "test.html" ) || ( JSP == "test1.html") || ( JSP == "test2.html" )) then blah blah blah.
Is there a more efficient way to do this?
If you know that JSP contains a string, it's slightly more efficient to use === rather than ==. Also note that you don't need all those parens:
if (JSP === "test.html" || JSP === "test1.html" || JSP === "test2.html") {
// do something
}
You could also use a regular expression:
if (/^test[12]?\.html$/.test(JSP)) {
// do something
}
...but it depends what you mean by "efficient." The series of === will be very efficient at runtime.
Separately, you could use a switch:
switch (JSP) {
case "test.html":
case "test1.html":
case "test2.html":
// Do it
break;
}
...but I wouldn't call it more efficient.
I definitely would not put the options in an array, because searching through the array will not be efficient. But you can use a map:
var pages = {
"test.html": true,
"test1.html": true,
"test2.html": true
};
...and then this test:
if (pages[JSP] === true) {
// do something
}
...which results in a fairly efficient property lookup. That's only reasonable if you create the object once and reuse it.
(You might have people say "Or just use if (pages[JSP]) { ... }. But that fails if JSP happens to contain "toString" or "valueOf" or any of several other inherited properties blank objects get from Object.prototype. It's fine if you're certain it won't have any of those values, though.)
You could create an object with those keys:
var theThings = { "test.html": true, "test1.html": true, "test2.html": true };
if (theThings[JSP]) { /* whatever */ }
If there are only three or four, it might not be worth it, but if there are dozens it'd definitely be faster, especially if the test gets made several times.
edit — wow I'm crying a little inside here, guys. Property name lookups are going to be way faster than linear searches through an array.
var arr = ['test.html', 'test1.html', 'test2.html'];
if (arr.indexOf(JSP)) != -1) {
alert("found it!");
}
relevant docs here.
if( JSP in {"test.html":0, "test2.html":0, "test3.html":0} ) {
...
}
It doesn't get any closer to SQL's IN( 1, 2, 3) than this in javascript :-)
if (["test.html", "test1.html", "test2.html"].indexOf(JSP) > -1)
For browsers that don't support indexOf on arrays, MDC suggests short piece of code that adds missing functionality.
Probably not more efficient, but you got cleaner ways to do it. You could for instance use a switch-case like this:
switch(JSP) {
case 'test.html':
case 'test1.html':
case 'test2.html':
blablabla; break;
}
Or you could create an array out of the urls and see if your string is in the array like this
var arr = [
'test.html', 'test1.html',
'test2.html'
];
if(arr.indexOf(JSP) != -1) { blablabla; }
The last one will not work in all browsers.
A way of doing it in jQuery is to use the inArray method, e.g.:
if ($.inArray(JSP, ["test.html", "test1.html", "test2.html"]) > -1) {
// your code
}
The inArray method works in a similar manner to String.indexOf so -1 is returned if no match.
Use a regular expression?
if (/^test\d?\.html$/.test(JSP)) { ... }
I can't promise that will be more efficient though, just tidier code-wise.
Or if you're already using jQuery, you could use jQuery.inArray():
var names = ['test.html', 'test2.html', 'test3.html'];
if ($.inArray(JSP, names)) { ... }
Or with underscore.js
var names = ['test.html', 'test2.html', 'test3.html'];
if (_.indexOf(names, JSP) !== -1) { ... }
Related
I already searched for similar issues but I didn't find anything that could help me yet.
I'm trying to reach a picture path (using JSON format) depending on the material type of the picked element. Actually, my code is built like this:
if (globalData.Material.Mat_type == "OSCILLOSCOPE") {
var picture = (globalData.Material.Oscilloscope.picture);
}
if (globalData.Material.Mat_type == "ALIMENTATION") {
var picture = (globalData.Material.Alim.picture);
}
But not optimized at all, so Im trying to make it this way :
var mat_type = (globalData.Material.Mat_type);
var picture = (globalData.Material[mat_type].picture);
But it doesn't work... Got some exception:
TypeError : globalData.Material[mat_type] is undefined.
I already tried a lot of things, have you got any idea? Thanks!
I outlined the issue with character case in the comment under the question, so presumably adjusting value of globalData.Material.Mat_type could do the trick:
var mat_type =
globalData.Material.Mat_type.charAt(0).toUpperCase() +
globalData.Material.Mat_type.substr(1).toLowerCase();
I can also see that this general rule may not be applicable in all cases. If it's not a typo, it won't work for the second case where Mat_type == "ALIMENTATION", because then you try to access Alim property of Material instead of Alimentation. In this case you could access property by prefix:
function pictureOf(material) {
if (!material || !String(material.Mat_type)) {
return null;
}
let mat_type = String(material.Mat_type).toUpperCase();
for (var propertyName in material) {
if (mat_type.startsWith(propertyName.toUpperCase())) {
return material[propertyName].picture || null;
}
}
return null;
}
console.log(pictureOf({
Mat_type: "OSCILLOSCOPE",
Oscilloscope: {
picture: "picture of oscilloscope"
}
}));
console.log(pictureOf({
Mat_type: "ALIMENTATION",
Alim: {
picture: "picture of alimentation"
}
}));
But this kind of approach can be error prone, if multiple properties share the same prefix. There's also a hidden issue with case-insensitive prefix matching in case you use some special unicode characters in property names. Lastly this method is not efficient, because it has to iterate over all properties of the object (worst case scenario). It can be replaced with much safer property mapping:
const matTypeMapping = {
"ALIMENTATION": "Alim"
};
function pictureOf(material) {
if (!material || !String(material.Mat_type)) {
return null;
}
let matType = String(material.Mat_type);
// find property mapping or apply general rule, if mapping not defined
let propertyName = matTypeMapping[matType] ||
matType.charAt(0).toUpperCase() + matType.substr(1).toLowerCase();
return material[propertyName].picture || null;
}
console.log(pictureOf({
Mat_type: "OSCILLOSCOPE",
Oscilloscope: {
picture: "picture of oscilloscope"
}
}));
console.log(pictureOf({
Mat_type: "ALIMENTATION",
Alim: {
picture: "picture of alimentation"
}
}));
NB: To avoid headaches, maybe you should prefer strict equality operator over loose equality operator.
Problem Solved
Peter Wolf was right ! It was a case-sensitive issue
I actually don't know how to promote his comment, sorry for this..
Anyway, thank you guys !
var mat_type = (globalData.Material.Mat_type);
if(mat_type!==undefined)
var picture = (globalData.Material[mat_type].picture)
Just do an existential check before accessing the value, for keys that may not be present.
PS: I have already searched the forums and have seen the relevant posts for this wherein the same post exists but I am not able to resolve my issue with those solutions.
I have 2 json objects
var json1 = [{uid:"111", addrs:"abc", tab:"tab1"},{uid:"222", addrs:"def", tab:"tab2"}];
var json2 = [{id:"tab1"},{id:"new"}];
I want to compare both these and check if the id element in json2 is present in json1 by comparing to its tab key. If not then set some boolean to false. ie by comparing id:"tab1" in json2 to tab:"tab1 in json1 .
I tried using below solutions as suggested by various posts:
var o1 = json1;
var o2 = json2;
var set= false;
for (var p in o1) {
if (o1.hasOwnProperty(p)) {
if (o1[p].tab!== o2[p].id) {
set= true;
}
}
}
for (var p in o2) {
if (o2.hasOwnProperty(p)) {
if (o1[p].tab!== o2[p].id) {
set= true;
}
}
}
Also tried with underscore as:
_.each(json1, function(one) {
_.each(json2, function(two) {
if (one.tab!== two.id) {
set= true;
}
});
});
Both of them fail for some test case or other.
Can anyone tell any other better method or outline the issues above.
Don't call them JSON because they are JavaScript arrays. Read What is JSON.
To solve the problem, you may loop over second array and then in the iteration check if none of the objects in the first array matched the criteria. If so, set the result to true.
const obj1 = [{uid:"111", addrs:"abc", tab:"tab1"},{uid:"222",addrs:"def", tab:"tab2"}];
const obj2 = [{id:"tab1"},{id:"new"}];
let result = false;
for (let {id} of obj2) {
if (!obj1.some(i => i.tab === id)) {
result = true;
break;
}
}
console.log(result);
Unfortunately, searching the forums and reading the relevant posts is not going to replace THINKING. Step away from your computer, and write down, on a piece of paper, exactly what the problem is and how you plan to solve it. For example:
Calculate for each object in an array whether some object in another array has a tab property whose value is the same as the first object's id property.
There are many ways to do this. The first way involves using array functions like map (corresponding to the "calculate for each" in the question, and some (corresponding to the "some" in the question). To make it easier, and try to avoid confusing ourselves, we'll do it step by step.
function calculateMatch(obj2) {
return obj2.map(doesSomeElementInObj1Match);
}
That's it. Your program is finished. You don't even need to test it, because it's obviously right.
But wait. How are you supposed to know about these array functions like map and some? By reading the documentation. No one help you with that. You have to do it yourself. You have to do it in advance as part of your learning process. You can't do it at the moment you need it, because you won't know what you don't know!
If it's easier for you to understand, and you're just getting started with functions, you may want to write this as
obj2.map(obj1Element => doesSomeElementInObj1Match(obj1Element))
or, if you're still not up to speed on arrow functions, then
obj2.map(function(obj1Element) { return doesSomeElementInObj1Match(obj1Element); })
The only thing left to do is to write doesSomeElementInObj2Match. For testing purposes, we can make one that always returns true:
function doesSomeElementInObj2Match() { return true; }
But eventually we will have to write it. Remember the part of our English description of the problem that's relevant here:
some object in another array has a tab property whose value is the same as the first object's id property.
When working with JS arrays, for "some" we have the some function. So, following the same top-down approach, we are going to write (assuming we know what the ID is):
In the same way as above, we can write this as
function doesSomeElementInObj2Match(id) {
obj2.some(obj2Element => tabFieldMatches(obj2Element, id))
}
or
obj2.some(function(obj2Element) { return tabFieldMatches(obj2Element, id); })
Here, tabFieldMatches is nothing more than checking to make sure obj2Element.tab and id are identical.
We're almost done! but we still have to write hasMatchingTabField. That's quite easy, it turns out:
function hasMatchingTabField(e2, id) { return e2.tab === id; }
In the following, to save space, we will write e1 for obj1Element and e2 for obj2Element, and stick with the arrow functions. This completes our first solution. We have
const tabFieldMatches = (tab, id) { return tab === id; }
const hasMatchingTabField = (obj, id) => obj.some(e => tabFieldMatches(e.tab, id);
const findMatches = obj => obj.some(e => hasMatchingTabField(e1, obj.id));
And we call this using findMatches(obj1).
Old-fashioned array
But perhaps all these maps and somes are a little too much for you at this point. What ever happened to good old-fashioned for-loops? Yes, we can write things this way, and some people might prefer that alternative.
top: for (e1 of obj1) {
for (e2 of (obj2) {
if (e1.id === e2.tab) {
console.log("found match");
break top;
}
}
console.log("didn't find match);
}
But some people are sure to complain about the non-standard use of break here. Or, we might want to end up with an array of boolean parallel to the input array. In that case, we have to be careful about remembering what matched, at what level.
const matched = [];
for (e1 of obj1) {
let match = false;
for (e2 of obj2) {
if (e1.id === e2.tab) match = true;
}
matched.push(match);
}
We can clean this up and optimize it bit, but that's the basic idea. Notice that we have to reset match each time through the loop over the first object.
I have an array that looks something like this.
Users : {
0 : { BidderBadge: "somestuff", Bidders: 6, }
1 : { BidderBadge: "somemorestuff", Bidders: 7,}
}
I want to search the array using lodash to find a value inside of each of the user objects.
Specifically, I want to use values from another similar array of objects to find the value.
var bidArray = [];
_.each(this.vue.AllUsers, function(user) {
_.each(this.vue.Bids, function(bid) {
if(user.BidderBadge == bid.Badge) {
bidArray.push(user);
}
});
});
This is what I have and it works, but I want to do it using only one loop instead of two. I want to use something like _.indexOf. Is that possible?
If you want to avoid nesting, you just have to modify Azamantes' solution a bit
var bidders = this.vue.Bids.reduce(function(acc, bid) {
return acc[bid.BidderBadge] = true;
}, {});
var bidArray = this.vue.AllBidders.filter(function(bidder) {
return !!bidders[bidder.Badge];
});
It is difficult to give an accurate answer with an example that doesn't coincide with the input that your provide.
Anyway, supposing your data structures were more or less like this ones, you could solve the problem with lodash _.intersectionWith.
Intersect both arrays using a comparator that checks the correct object properties. Also, take into account that users must go first in the intersection due to the fact that you're interested in its values.
function comparator(user, bid) {
return user.BidderBadge === bid.Badge;
}
console.log(_.intersectionWith(users, bids, comparator));
Here's the fiddle.
Consider an example:
food : {
cheese: { taste: "delicious", smell: "smelly" },
bacon: { taste: "godly", smell: "godly" }
}
I would like a loop-less test to see if any of "food"'s properties (cheese and/or bacon ) have a "taste" that is "godly".
In this case, it would be yes. Testing for "disgusting" should result in false as there is none to have taste : "disgusting"
My question really revolves around a loopless solution, as a hundred property json within several layers of loops is bad :(
I would like a loop-less test to see if any of "food"'s properties (cheese and/or bacon ) have a "taste" that is "godly".
You can't. Assuming you've deserialized the JSON into an object graph, you have to have a loop, because you have to test the objects individually.
If you haven't deserialized the JSON into an object graph (or if you want to feed that graph back into JSON.stringify, though I'm not recommending it — as that would involve a loop), if you still have text, then it may be possible with a regular expression, e.g.:
if (jsontext.match(/\b"taste"\s*:\s*"godly"/) {
// ...something has a taste that is "godly"
}
Note that in the above, I've assumed valid JSON. Your question doesn't have valid JSON, because taste isn't in double quotes, which is required in JSON.
My question really revolves around a loopless solution, as a hundred property json within several layers of loops is bad :(
Well, then you need to get whoever is responsible for the JSON to redesign it.
You could pre-index all the data by looping over them once:
var tastes = {}, smells = {};
for (var prop in food) {
if (food.hasOwnProperty(prop) {
var item = food[prop];
if (!tastes[item.taste]) { tastes[item.taste] = [] };
tastes[item.taste].push(prop);
if (!smells[item.smell]) { smells[item.smell] = [] };
tastes[item.smell].push(prop);
}
}
And then, in future, you can just:
if (tests.godly) { ... }
… which will save you having to loop over the data every time you want to query it, but you can't eliminate the loop entirely.
Loops are necessary, in this case.
function checkTaste(obj, keyToCheck, valToCheck) {
for (var key in obj) {
if (key === keyToCheck && obj[key] === valToCheck) {
return true;
}
}
return false;
}
checkKey(food, 'taste', 'godly');
Is there a short way to write the following using either JavaScript or jQuery?
if (this.id==="a" || this.id==="b" || this.id==="c" || this.id==="d")
How about this?
if ( this.id in { "a":1, "b":1, "c":1, "d":1 } ) {
...
}
... or this?
if("abcd".indexOf(this.id) > -1) {
...
}
if ( ['a','b','c','d'].indexOf( this.id ) >= 0 ) { ... }
or
if ( this.id in {'a':0,'b':0,'c':0,'d':0} ) { ... }
One possibility is a switch statement.
switch(this.id){case"a":case"b":case"c":case"d":
//do something
}
You can try the following code. Especially when you have more than four test values.
if (/^[abcdef]$/.test(this.id)) {
...
}
The inline anonymous hash (d in o) performance was misrepresented in the tests as originally written, because the hash wasn't inline in the test.
Oddly enough, the true inline hash case, compared to the predefined hash case, is much slower in Firefox 4, but 50% faster in Chrome 12.
But a more important point is that d in o misses the point of a hash—that you don't have to iterate to find things.
Two lines, but still pretty short, and by far the fastest:
var o = {a:1,b:1,c:1,d:1};
if(o[this.id]){...}