Trong các bài viết trước jsB@nk đã giới thiệu với bạn rất nhiều kĩ thuật lập trình JavaScript hữu ích:
- Các kĩ thuật viết mã JavaScript giản lược thiết yếu
- Các thủ thuật JavaScript và jQuery hữu ích
- Vài hướng dẫn JavaScript cơ bản để tối ưu hóa hiệu suất trang web

Hôm nay trong bài viết này, jsB@nk muốn đề cập đến các kĩ thuật lập trình JavaScript giản lược (shorthand); các kĩ thuật này cực kì hữu ích trong việc cải thiện hiệu suất ứng dụng JavaScript, nâng cao kĩ năng lập trình JavaScript mà mỗi lập trình viên JavaScript cần nắm vững.

Bạn đã sẵn sàng để đọc thêm chưa? Hãy để lại bất cứ đề nghị nào trong phần bình luận.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

This really is a must read for any JavaScript based developer. I have made this post as a vital source of reference for learning shorthand JavaScript coding techniques. I have shown you the longhanded versions as well to give some coding perspective.

• Step 1 – Learn the JavaScript shorthand techniques.
• Step 2 – Save valuable coding time by keeping your code to a minimum.
• Step 3 – Impress your colleagues with your awesome coding skills.

It’s as easy as 1,2,3. Here they are.

1. If true … else Shorthand

This is a great code saver for when you want to do something if the test is true, else do something else by using the ternary operator.

Longhand:

var big;
if (x > 10) {
    big = true;
}
else {
    big = false;
}

Shorthand:

var big = (x > 10) ? true : false;

If you rely on some of the weak typing characteristics of JavaScript, this can also achieve more concise code. For example, you could reduce the preceding code fragment to this:

var big = (x > 10);

2. Null, Undefined, ” Checks Shorthand

When creating new variables sometimes you want to check if the variable your referencing for it’s value isn’t null or undefined. I would say this is a very common check for JavaScript coders.

Longhand:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     var variable2 = variable1;
}

Shorthand:

var variable2 = variable1  || '';

Don’t believe me? Test it yourself (paste into Firebug and click run):

//null value example
var variable1 = null;
var variable2 = variable1  || '';
console.log(variable2);
//output: '' (an empty string)

//undefined value example
var variable1 = undefined;
var variable2 = variable1  || '';
console.log(variable2);
//output: '' (an empty string)

//normal value example
var variable1 = 'hi there';
var variable2 = variable1  || '';
console.log(variable2);
//output: 'hi there'

3. Object Array Notation Shorthand

Useful way of declaring small arrays on one line.

Longhand:

var a = new Array();
a[0] = "myString1";
a[1] = "myString2";
a[2] = "myString3";

Shorthand:

var a = ["myString1", "myString2", "myString3"];

4. Associative Array Notation Shorthand

The old school way of setting up an array was to create a named array and then add each named element one by one. A quicker and more readable way is to add the elements at the same time using the object literal notation.

Longhand:

var skillSet = new Array();
skillSet['Document language'] = 'HTML5';
skillSet['Styling language'] = 'CSS3';
skillSet['Javascript library'] = 'jQuery';
skillSet['Other'] = 'Usability and accessibility';

Shorthand:

var skillSet = {
    'Document language' : 'HTML5',
    'Styling language' : 'CSS3',
    'Javascript library' : 'jQuery',
    'Other' : 'Usability and accessibility'
};

Don�t forget to omit the final comma otherwise certain browsers will complain (not naming any names, IE).

5. charAt() Shorthand

You can use the eval() function to do this but this bracket notation shorthand technique is much cleaner than an evaluation, and you will win the praise of colleagues who once scoffed at your amateur coding abilities!

Longhand:

"myString".charAt(0);

Shorthand:

"myString"[0]; // Returns 'm'

6. Assignment Operators Shorthand

Assignment operators are used to assign values to JavaScript variables and no doubt you use arithmetic everyday without thinking (no matter what programming language you use Java, PHP, C++ it’s essentially the same principle).

Longhand:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

Shorthand:

x++;
minusCount --;
y*=10;

Other shorthand operators, given that x=10 and y=5, the table below explains the assignment operators:

x += y //result x=15
x -= y //result x=5
x *= y //result x=50
x /= y //result x=2
x %= y //result x=0

7. Regex Object Shorthand

In Javascript, a Regex object can be called like a function like so:

/test/("is test in here")

As opposed to the more verbose(but sometimes more appropriate in cases that you are reusing the Regex).

Longhand:

searchText = "padding 1234 rocket str austin TX 78704 more padding"
/\d+.+\n{0,2}.+\s+[A-Z]{2}\s+\d{5}/m(searchText)
//returns: ["1234 rocket str austin TX 78704"]

Shorthand:

var re = new RegExp(/\d+.+\n{0,2}.+\s+[A-Z]{2}\s+\d{5}/m);
re.exec(searchText);
//returns: ["1234 rocket str austin TX 78704"]

8. If Presence Shorthand

This might be trivial, but worth a mention. When doing “if checks” assignment operators can sometimes be ommited.

Longhand:

if (likeJavaScript == true)

Shorthand:

if (likeJavaScript)

Here is another example. If “a” is NOT equal to true, then do something.

Longhand:

var a;
if ( a != true ) {
// do something...
}

Shorthand:

var a;
if ( !a ) {
// do something...
}

9. Function Variable Arguments Shorthand

Object literal shorthand can take a little getting used to, but seasoned developers usually prefer it over a series of nested functions and variables. You can argue which technique is shorter, but I enjoy using object literal notation as a clean substitute to functions as constructors.

Longhand:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
	// do something...
}
myFunction( "String", 1, [], {}, true );

Shorthand (looks long but only because I have console.log’s in there!):

function myFunction() {
	console.log( arguments.length ); // Returns 5
	for ( i = 0; i < arguments.length; i++ ) {
		console.log( typeof arguments[i] ); // Returns string, number, object, object, boolean
	}
}
myFunction( "String", 1, [], {}, true );

10. JavaScript foreach Loop Shorthand

This little tip is really useful if you want plain JavaScript and hence can’t use the awesome jQuery.each.

Longhand:

for (var i = 0; i < allImgs.length; i++)

Shorthand:

for(var i in allImgs)

11. Suggest one?

I really do love these and would love to find more, please leave a comment!

• Mã nguồn
• In

• Lời bình (1)
• Viết

bởi Juan Mendes, 04/10/2012 06:10 AM
Lots of bad advice Phản hồi

Most of these examples have flaws.

10. Don't ever use for in to loop over arrays http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays

9. Unclear what you're showing, are you just showing how to use arguments?

7. What you suggested is not shorter.

5. bracket access instead of charAt is not cross browser.

4. Associative Array is not a JS object, JS has objects, that are hash maps, they are not like PHP's associative array, therefore, you shouldn't use new Array()

2. The two pieces of code are not equivalent: in the first one, variable2 will be undefined if variable1 is null; in the second case, it will become the empty string

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới