http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly - by David Walsh
Javascript String's "replace" method only replace the first occurence. To replace all, us a regular expression and the global flag "/g":
To ignore case, use the "/i" flag:
Convert Array-like objects like arguments, NodeLists, and attributes into true array:
Cloning an array with splice: < br/>
Noraml sort use:
More powerful use of sort:
JavaScript's pass-objects-by-reference nature can be confusing, therefore to remove an array:
Merging array with push:
How we normally detect a browser feature:
While that works correctly, it isn't always efficient, as that method of object detection can initialize resources in the browser. In the past, the snippet above caused memory leaks in some browsers. The better and more efficient route is checking for a key within an object:
A bad way to stop the behaviour when clicking on a link:
It's best to simply use preventDefault:
1. String.prototype.replace: /g and /i Flags
Javascript String's "replace" method only replace the first occurence. To replace all, us a regular expression and the global flag "/g":
// Mistake
var str = "David is an Arsenal fan, which means David is great";
str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great"
// Desired
str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"
To ignore case, use the "/i" flag:
str.replace(/david/gi, "Darren") // "Darren will always be an Arsenal fan, which means Darren will always be great"
2. Array-Like Objects and Array.prototype.slice
Convert Array-like objects like arguments, NodeLists, and attributes into true array:
var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div")); // "true" array of DIVs
var argsArr = Array.prototype.slice.call(arguments); // changes arguments to "true" array
Cloning an array with splice: < br/>
var clone = myArray.slice(0); // naive clone
3. Array.prototype.sort
Noraml sort use:
var clone = myArray.slice(0); // naive clone
More powerful use of sort:
[
{ name: "Robin Van PurseStrings", age: 30 },
{ name: "Theo Walcott", age: 24 },
{ name: "Bacary Sagna", age: 28 }
].sort(function(obj1, obj2) {
// Ascending: first age less than the previous
return obj1.age - obj2.age;
});
// Returns:
// [
// { name: "Theo Walcott", age: 24 },
// { name: "Bacary Sagna", age: 28 },
// { name: "Robin Van PurseStrings", age: 30 }
// ]
4. Array Length for Truncation
JavaScript's pass-objects-by-reference nature can be confusing, therefore to remove an array:
var myArray = yourArray = [1, 2, 3]; // :( myArray = []; // "yourArray" is still [1, 2, 3] // The right way, keeping reference myArray.length = 0; // "yourArray" and "myArray" both []
5. Array Merging with push
Merging array with push:
var mergeTo = [4,5,6], var mergeFrom = [7,8,9]; Array.prototype.push.apply(mergeTo, mergeFrom); mergeTo; // is: [4, 5, 6, 7, 8, 9]
6. Efficient Feature/Object Property Detection
How we normally detect a browser feature:
if(navigator.geolocation) {
// Do some stuff
}
While that works correctly, it isn't always efficient, as that method of object detection can initialize resources in the browser. In the past, the snippet above caused memory leaks in some browsers. The better and more efficient route is checking for a key within an object:
if("geolocation" in navigator) {
// Do some stuff
}
7. Event preventDefault and stop Propagation
A bad way to stop the behaviour when clicking on a link:
$("a.trigger").on("click", function(e) {
e.stop();
// Do more stuff
});
It's best to simply use preventDefault:
$("a.trigger").on("click", function(e) {
e.preventDefault();
// Do more stuff
});
