Summary of common Javascript tips_javascript tips

The examples in this article describe common Javascript tips. Share it with everyone for your reference. The specific analysis is as follows:

1. True and False Boolean expressions

The following Boolean expressions all return false:

null
undefined
'' empty string
0 number 0

But be careful with the following, they all return true:

'0' string 0
[] Empty array
{} empty object

The following piece of terrible code:

You can directly write it in the following form (as long as you want x to be other than 0 and an empty string, and false):

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

But this would be better:

Note: There are still many things to pay attention to, 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 (ternary) operator (?:)

The ternary operator is used to replace the following code:

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

You can write:

Three, && and ||

Binary Boolean operators are short-circuitable, and the last item will only be evaluated when necessary.

"||" is called the 'default' operator because it works like this:

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

You can use this to simplify the above code:

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

"&&" can also be a 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 a bit too much:

is usually used like this:

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. You can use the following method:

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 the string constructor, and then convert it into a string through myArray.join(''). However, since the assignment operation is faster than the push() of the array, try to use the assignment operation.

5. Traverse Node List

Node lists are implemented by adding a filter to the node iterator. This means that the time complexity of obtaining its attributes, such as length, is O(n), and traversing the entire list through length requires O(n^2 ).

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

This will be better:

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

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

In the above example, you can also traverse the child nodes through firstChild and nextSibling.

var parentNode = document.getElementByIdx_x('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
 doSomething(child);
}

I hope this article will be helpful to everyone’s JavaScript programming design.