I'd like to incorporate whatever shorthand techniques there are in my regular coding habits and also be able to read them when I see them in compacted code.
Anybody know of a reference page or documentation that outlines techniques?
Edit: I had previously mentioned minifiers and it is now clear to me that minifying and efficient JS-typing techniques are two almost-totally-separate concepts.
Updated with ECMAScript 2015 (ES6) goodies. See at the bottom.
The most common conditional shorthands are:
a = a || b // if a is falsy use b as default
a || (a = b) // another version of assigning a default value
a = b ? c : d // if b then c else d
a != null // same as: (a !== null && a !== undefined) , but `a` has to be defined
Object literal notation for creating Objects and Arrays:
obj = {
prop1: 5,
prop2: function () { ... },
...
}
arr = [1, 2, 3, "four", ...]
a = {} // instead of new Object()
b = [] // instead of new Array()
c = /.../ // instead of new RegExp()
Built in types (numbers, strings, dates, booleans)
// Increment/Decrement/Multiply/Divide
a += 5 // same as: a = a + 5
a++ // same as: a = a + 1
// Number and Date
a = 15e4 // 150000
a = ~~b // Math.floor(b) if b is always positive
a = +new Date // new Date().getTime()
// toString, toNumber, toBoolean
a = +"5" // a will be the number five (toNumber)
a = "" + 5 + 6 // "56" (toString)
a = !!"exists" // true (toBoolean)
Variable declaration:
var a, b, c // instead of var a; var b; var c;
String's character at index:
"some text"[1] // instead of "some text".charAt(1);
ECMAScript 2015 (ES6) standard shorthands
These are relatively new additions so don't expect wide support among browsers. They may be supported by modern environments (e.g.: newer node.js) or through transpilers. The "old" versions will continue to work of course.
Arrow functions
a.map(s => s.length) // new
a.map(function(s) { return s.length }) // old
Rest parameters
// new
function(a, b, ...args) {
// ... use args as an array
}
// old
function f(a, b){
var args = Array.prototype.slice.call(arguments, f.length)
// ... use args as an array
}
Default parameter values
function f(a, opts={}) { ... } // new
function f(a, opts) { opts = opts || {}; ... } // old
Destructuring
var bag = [1, 2, 3]
var [a, b, c] = bag // new
var a = bag[0], b = bag[1], c = bag[2] // old
Method definition inside object literals
// new | // old
var obj = { | var obj = {
method() { ... } | method: function() { ... }
}; | };
Computed property names inside object literals
// new | // old
var obj = { | var obj = {
key1: 1, | key1: 5
['key' + 2]() { return 42 } | };
}; | obj['key' + 2] = function () { return 42 }
Bonus: new methods on built-in objects
// convert from array-like to real array
Array.from(document.querySelectorAll('*')) // new
Array.prototype.slice.call(document.querySelectorAll('*')) // old
'crazy'.includes('az') // new
'crazy'.indexOf('az') != -1 // old
'crazy'.startsWith('cr') // new (there's also endsWith)
'crazy'.indexOf('az') == 0 // old
'*'.repeat(n) // new
Array(n+1).join('*') // old
Bonus 2: arrow functions also make self = this capturing unnecessary
// new (notice the arrow)
function Timer(){
this.state = 0;
setInterval(() => this.state++, 1000); // `this` properly refers to our timer
}
// old
function Timer() {
var self = this; // needed to save a reference to capture `this`
self.state = 0;
setInterval(function () { self.state++ }, 1000); // used captured value in functions
}
If by JavaScript you also include versions newer than version 1.5, then you could also see the following:
Expression closures:
JavaScript 1.7 and older:
var square = function(x) { return x * x; }
JavaScript 1.8 added a shorthand Lambda notation for writing simple functions with expression closures:
var square = function(x) x * x;
reduce() method:
JavaScript 1.8 also introduces the reduce() method to Arrays:
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
// total == 6
Destructuring assignment:
In JavaScript 1.7, you can use the destructuring assignment, for example, to swap values avoiding temporary variables:
var a = 1;
var b = 3;
[a, b] = [b, a];
Array Comprehensions and the filter() method:
Array Comprehensions were introduced in JavaScript 1.7 which can reduce the following code:
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [];
for (var i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
evens.push(numbers[i]);
}
}
To something like this:
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for each(i in numbers) if (i % 2 === 0)];
Or using the filter() method in Arrays which was introduced in JavaScript 1.6:
var numbers = [1, 2, 3, 21, 22, 30];
var evens = numbers.filter(function(i) { return i % 2 === 0; });
You're looking for idioms of the JavaScript language.
- A concise but uncomprehensive list: http://ajaxian.com/archives/javascript-idioms-you-need-to-know
- Douglas Crockford's advice: http://javascript.crockford.com/style2.html
It's certainly interesting to peek at what's new in JavaScript 1.6+ but you're not going to be able to use the language features (e.g., list comprehensions or the yield keyword) in the wild due to lack of mainstream support. It is worthwhile to learn about new standard library functions if you haven't had exposure to Lisp or Scheme, however. Many typical pieces of functional programming such as map, reduce, and filter are good to know and often show up in JavaScript libraries like jQuery; another useful function is bind (proxy in jQuery, to an extent), which is helpful when specifying methods as callbacks.
Getting the last value of an array
This is not really a shorthand, but more like a shorter alternative technique to the technique most people use
When I need to get the last value of an array, I usually use the following technique:
var str = 'Example string you actually only need the last word of FooBar';
var lastWord = str.split(' ').slice(-1)[0];
The part of .slice(-1)[0] being the shorthand technique. This is shorter compared to the method I've seen almost everyone else use:
var str = 'Example string you actually only need the last word of FooBar';
var lastWord = str.split(' ');
lastWord = lastWord[lastWord.length-1];
Testing this shorthand's relative computing speed
To test this, I did the following:
var str = 'Example string you actually only need the last word of FooBar';
var start = +new Date();
for (var i=0;i<1000000;i++) {var x=str.split(' ').slice(-1)[0];}
console.log('The first script took',+new Date() - start,'milliseconds');
And then seperately (to prevent possible synchronous running):
var start2 = +new Date();
for (var j=0;j<1000000;j++) {var x=str.split(' ');x=x[x.length-1];}
console.log('The second script took',+new Date() - start,'milliseconds');
The results:
The first script took 2231 milliseconds
The second script took 8565 milliseconds
Conclusion: No disadvantages in using this shorthand.
Debugging shorthands
Most browsers do support hidden global variables for every element with an id. So, if I need to debug something, I usually just add a simple id to the element and then use my console to access it via the global variable. You can check this one yourself: Just open your console right here, type footer and press enter. It will most likely return the <div id="footer> unless you've got that rare browser that doesn't have this (I haven't found any).
If the global variable is already taken up by some other variable I usually use the horrible document.all['idName'] or document.all.idName. I am of course aware this is terribly outdated, and I don't use it in any of my actual scripts, but I do use it when I don't really want to type out the full document.getElementById('idName') since most browsers support it anyway, Yes I am indeed quite lazy.
This github repo is dedicated to byte-saving techniques for Javascript. I find it quite handy!
来源：https://stackoverflow.com/questions/3899495/is-there-a-good-js-shorthand-reference-out-there