Javascript常用小技巧汇总

 更新时间:2015年06月24日 17:36:55   作者:第2015换个昵称  
这篇文章主要介绍了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程序设计有所帮助。

相关文章

  • js相册效果代码(点击创建即可)

    js相册效果代码(点击创建即可)

    利用js 书写的相册代码,点击创建即可看到效果,感兴趣的朋友可以参考下哈,希望对你学习jquery有所帮助
    2013-04-04
  • JavaScript Event学习第九章 鼠标事件

    JavaScript Event学习第九章 鼠标事件

    鼠标事件是到目前为止最重要的事件。在这一章我将介绍一些鼠标事件的最常见的问题和技巧。
    2010-02-02
  • JavaScript原始值与包装对象的详细介绍

    JavaScript原始值与包装对象的详细介绍

    这篇文章主要给大家介绍了关于JavaScript原始值与包装对象的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • JavaScript中FontFace对象的使用方式

    JavaScript中FontFace对象的使用方式

    这篇文章主要介绍了JavaScript中FontFace对象的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • js调试系列 初识控制台

    js调试系列 初识控制台

    这篇文章的目的只是让你认识控制台,让你入门调试js,之后的路还得靠你们自己走
    2014-06-06
  • 微信小程序实现tab组件切换动画

    微信小程序实现tab组件切换动画

    tab相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tab的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 对js中回调函数的一些看法

    对js中回调函数的一些看法

    下面小编就为大家带来一篇对js中回调函数的一些看法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • ES6 Map结构的应用实例分析

    ES6 Map结构的应用实例分析

    这篇文章主要介绍了ES6 Map结构的应用,结合实例形式分析了ES6中map键值对hash结构相关定义、获取、输出、遍历等相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • 关于JavaScript中异步/等待的用法与理解

    关于JavaScript中异步/等待的用法与理解

    这篇文章主要给大家介绍了关于JavaScript中异步/等待的用法与理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 一道超经典js面试题Foo.getName()的故事

    一道超经典js面试题Foo.getName()的故事

    Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,下面这篇文章主要给大家介绍了关于一道超经典js面试题Foo.getName()的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论