JavaScript奇技淫巧

jstips
JavaScript是目前最为炙手可热的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人。
同时JavaScript是一门非常灵活的语言,这篇文章里我收集了一些javascript的使用小技巧,加以利用有时候能达到事半功倍的效果。

  1. 数组按键值排序

    假设有个js对象数组 var arr=[{id:1,name:”abcd”},{id:2,name:”cdef”}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function keysrt(key,desc) {
    return function(a,b){
    return desc ? (a[key] < b[key]) : (a[key] > b[key]);
    }
    }
    ```

    使用方法:
    ```javascript
    var ary=[{id:1,name:"b"},{id:2,name:"b"}];
    ary.sort(keysrt('name',true));
    ary.sort(keysrt('name',false));
    ary.sort(keysrt('id',false));
  2. 给 setTimeout 和 setInterval 传递参数

    假设你想给 setTimeout 中调用的函数传递两个参数,你可能会觉得这是唯一的方法:

    1
    2
    3
    4
    5
    6
    7
    var callback = function(a,b){
    console.log(a + b); // 'foobar'
    }

    window.setTimeout(function(){
    callback('foo', 'bar');
    }, 1000);

    实际上,你还可以用下面的方法实现同样的功能:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    window.setTimeout(callback, 1000, 'foo', 'bar');
    ```
    3. ### 获取网页上任何XY坐标的文本
    ```javascript
    var x = 50, y = 100;
    var range = document.caretRangeFromPoint(x, y);
    if(range) {
    range.expand('word');
    var word = range.startContainer.textContent.substring(range.startOffset, range.endOffset);
    console.log(word);
    }
  3. 如果在 if 语句块中不使用大括号,可以在放置多个语句(呃,这个知道就好尽量别用)

    1
    2
    if (confirm("Do you wish to see two alerts?"))
    alert(1), alert(2);
  4. 判断是否是 IE 浏览器

    1
    IE=!+"\v1"
  5. 用数组交换两个变量的值

    1
    2
    3
    4
    5
    6
    7
    //以前的方法
    var a=1,b=2,c;c=a;a=b;b=c
    //还可以用这种方法
    var a=1,b=2;a=[b,b=a][0]
    console.log('a:'+a+',b:'+b)
    //输出
    a:2,b:1
  6. 使用.link方法

    1
    2
    html = "<a href='"+url+"'>"+text+"</a>" // before
    html = text.link(url) // after
  7. 使用 ~~ 和 0| 来代替 Math.Floor 处理正数

    1
    2
    3
    rand10 = Math.floor(Math.random()*10) // before
    rand10 = 0|Math.random()*10 // after
    rand10 = ~~(Math.random()*10); //或者这样
  8. 在Chrome控制台打印一个关联数组

    1
    2
    var teams_data = [{team: 'Chelsea', goals: 4}, {team: 'Man. Utd', goals: 3}];
    console.table(teams_data);
  9. 一些老的字符串函数

    如果你再控制台输入 String.prototype ,你可以看到一堆旧的功能,你可以用它来包裹 HTML 标签(有些已经弃用)

    1
    2
    3
    'foo'.italics()
    //将会输出:
    '<i>foo</i>'

还有一些其他相似的函数,如:strike(), sub(), small(), link()。


不定期更新^_^

坚持原创技术分享,您的支持将鼓励我继续创作!