• 首页 >前端开发 >JavaScript 教程

    Javascript常用小技巧汇总

    这篇文章主要介绍了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  0) { html += ', '; } html += itemHtml(items[i]); } html +=''; return html; } 

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

     function listHtml(items) { var html = []; for (var i = 0; i 

    你也可以是用数组作为字符串构造器, 然后通过 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 

    这样做会更好:

     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程序设计有所帮助。

    相关文章

    JavaScript小技巧整理

    JavaScript小技巧整理

    阅读(7352)评论(0)推荐()

    这篇文章主要介绍了JavaScript小技巧,整理汇总了JavaScript常用的6个实用技巧,属于JavaScript边角技巧的总结,需要的朋友可以参考下