Javascript often summarizes tips

  • 2020-06-22 23:45:20
  • OfStack

This article illustrates some common Javascript tips. Share to everybody for everybody reference. The specific analysis is as follows:

1. True and False Boolean expressions

The following Boolean expressions all return false:

null
undefined
An empty string
0 0

But be careful with the following, return true:

'0' string 0
[] an empty array
An empty object {}

Here's some bad code:

while (x != null) {

You can simply write it as follows (as long as you want x not to be 0 and empty strings, and false):

while (x) {

If you want to check if the string is null or empty:

if (y != null && y != '') {

But it's better:

if (y) {

Note: There are many other things to note, such as:

Boolean('0') == true
'0' != true
0 != null
0 == []
0 == false
Boolean(null) ==false
null != true
null != false
Boolean(undefined) ==false
undefined != true
undefined != false
Boolean([]) == true
[] != true
[] == false
Boolean({}) == true
{} != true
{} != false

2. Conditional (3 yuan) operator (? :)

The 3-yuan operator is used instead of the following code:


if (val != 0) {
 return foo();
} else {
 return bar();
}

You can write it as:

return val ? foo() : bar();

It is also useful when generating HTML code:
var html = '';

3. & & And | |

The 2-dollar Boolean operator is short-circuited and is calculated to the last entry only if necessary.

"||" is referred to as the 'default' operator because it can:


function foo(opt_win) {
 var win;
 if (opt_win) {
  win = opt_win;
 } else {
  win = window;
 }
 // ...
}

You can use it to simplify the above code:


function foo(opt_win) {
 var win = opt_win || window;
 // ...
}

" & & "Can also be short code. For example:


if (node) {
 if (node.kids) {
  if (node.kids[index]) {
   foo(node.kids[index]);
  }
 }
}

You can use it like this:


if (node && node.kids && node.kids[index]) {
 foo(node.kids[index]);
}

Or:


var kid = node && node.kids && node.kids[index];
if (kid) {
 foo(kid);
}

But this is going too far:

node && node.kids && node.kids[index] && foo(node.kids[index]);


4. Use join() to create strings

It is usually used as follows:


function listHtml(items) {
 var html = '';
 for (var i = 0; i < items.length; ++i) {
 if(i > 0) { html += ', ';
 }
 html += itemHtml(items[i]);
 }
 html +='';
 return html;
}

But this is very slow under IE and can be done in the following way:


function listHtml(items) {
 var html = [];
 for (var i = 0; i < items.length; ++i) {
  html[i] = itemHtml(items[i]);
 }
 return '' + html.join(', ') + '';
}

You can also use an array as a string constructor and convert it to a string via myArray.join ("), but since assignment is faster than push(), try to use it.

5. Iterate Node List

Node lists is implemented by adding a filter to the node iterator. This means that to get its attributes, for example, length has a time complexity of O(n), and O(n^2) is required to traverse the entire list via length.


var paragraphs = document.getElementsByTagName_r('p');
for (var i = 0; i < paragraphs.length; i++) {
 doSomething(paragraphs[i]);
}

This is even better:


var paragraphs = document.getElementsByTagName_r('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
 doSomething(paragraph);
}

This works for all collections and arrays (as long as the array does not contain the falsy value).

In the above example, the child nodes can also be traversed through firstChild and nextSibling.


function foo(opt_win) {
 var win;
 if (opt_win) {
  win = opt_win;
 } else {
  win = window;
 }
 // ...
}

0

I hope this article has been helpful for your javascript programming.


Related articles: