Javascript常用小技巧汇总

标签:业务范围    日期:2019-02-16 22:40    录入:美娱国际平台注册    浏览:

  

[Javascript,技巧]Javascript常用小技巧汇总

  

本文实例讲述了Javascript常用小技巧。分享给大家供大家参考。具体分析如下:  

  

一、True 和 False 布尔表达式  

  

下面的布尔表达式都返回 false:  

  

null  
  undefined  
  '' 空字符串  
  0 数字0  

  

但小心下面的, 可都返回 true:  

  

'0' 字符串0  
  [] 空数组  
  {} 空对象  

  

下面段比较糟糕的代码:  
   代码如下:

while (x != null) {
  

  

你可以直接写成下面的形式(只要你希望 x 不是 0 和空字符串, 和 false):  
   代码如下:

while (x) {
  

  

如果你想检查字符串是否为 null 或空:  
   代码如下:

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

  

但这样会更好:  
   代码如下:

if (y) {
  

  

注意: 还有很多需要注意的地方, 如:  

  

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  
  
  二、条件(三元)操作符 (?:)  

  

三元操作符用于替代下面的代码:  

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

你可以写成:  
   代码如下:

return val ? foo() : bar();
  
  在生成 HTML 代码时也是很有用的:  
   代码如下:
var html = '';
  

  

三、&& 和 ||  

  

二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项.

  

  

"||" 被称作为 'default' 操作符, 因为可以这样:  

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

  }  

  
  

你可以使用它来简化上面的代码:  

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

  }  

  
  

"&&" 也可简短代码.比如:  

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

你可以像这样来使用:  

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

或者:  

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

不过这样就有点儿过头了:  
   代码如下:

node && node.kids && node.kids[index] && foo(node.kids[index]);
  
  
  四、使用 join() 来创建字符串  

  

通常是这样使用的:  

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

但这样在 IE 下非常慢, 可以用下面的方式:  

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

你也可以是用数组作为字符串构造器, 然后通过 myArray.join('') 转换成字符串.不过由于赋值操作快于数组的 push(), 所以尽量使用赋值操作.

  

  

五、遍历 Node List  

  

Node lists 是通过给节点迭代器加一个过滤器来实现的. 这表示获取他的属性, 如 length 的时间复杂度为 O(n),通过 length 来遍历整个列表需要 O(n^2).

  

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

这样做会更好:  

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

这种方法对所有的 collections 和数组(只要数组不包含 falsy 值) 都适用.

  

  

在上面的例子中, 也可以通过 firstChild 和 nextSibling 来遍历孩子节点.

  

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

希望本文所述对大家的javascript程序设计有所帮助。

  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
上一篇:微信小程序去哪里找 小程序到底如何使用(附小程
下一篇:没有了
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行