很多開發者不知道但卻很有意思的奇淫技巧之JavaScript篇

原文  http://9iphp.com/web/javascript/interesting-js-most-web-developers-don

在 Quora 看到的一個問題，答案里匯集了很多 HTML/JS/DOM/CSS 方面的奇淫技巧，雖然有些不一定很有用，但是卻很有意思，今天總結其中一些有意思但大部分開發者卻不知道的，分享給大家~

1. 可以給 setTimeout 和 setInterval 傳遞參數

假設你想給 setTimeout 中調用的函數傳遞兩個參數，你可能會覺得這是唯一的方法：

var callback = function(a,b){
    console.log(a + b);  // 'foobar'
}

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

實際上，你還可以用下面的方法實現同樣的功能：

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

注：該方法不支持IE（包括IE9）。

2. 一些老的字符串函數

如果你再控制臺輸入 String.prototype ，你可以看到一堆舊的功能，你可以用它來包裹 HTML 標簽（有些已經棄用）

'foo'.italics()
//將會輸出：
'<i>foo</i>'

還有一些其他相似的函數，如：strike(), sub(), small(), link()。

3. 可以直接用JavaScript獲取HTML相同ID名稱的元素

令人驚奇，但卻是真的，向后兼容的方式被大部分現代瀏覽器支持。

HTML：

<div id="someInnocentDiv"></div>

JS：

console.log(someInnocentDiv);  // <div id="someInnocentDiv"></div>

4. 可以獲取網頁上任何XY坐標的文本

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);
}

可以在這里查看跨瀏覽器兼容的示例： http://jsfiddle.net/heZ4z/

5. 如果在 if 語句塊中不使用大括號，可以在放置多個語句

if (confirm("Do you wish to see two alerts?"))
  alert(1), alert(2);

（適用于大部分主流瀏覽器）

6. 你可以調用一個在文檔后部分聲明的函數：

sayHi();
function sayHi() { alert('hi'); }

但這不適用于使用 var 聲明的函數，如：

var sayHi = function () { alert('hi'); }

7. 判斷是否是 IE 瀏覽器

IE=!+"\v1"

8. 用數組交換兩個變量的值

//以前的方法
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

9. 使用 ~~ 和 0| 來代替 Math.Floor 處理正數

rand10 = Math.floor(Math.random()*10) // before
rand10 = 0|Math.random()*10 // after
rand10 = ~~(Math.random()*10); //或者這樣

10. 使用 1/0 代替無限大

11. 使用 .link 方法

html = "<a href='"+url+"'>"+text+"</a>" // before
html = text.link(url) // after

更多其他方法，可以點擊查看 https://github.com/jed/140bytes/wiki/Byte-saving-techniques

12. 在Chrome控制臺打印一個關聯數組

var teams_data = [{team: 'Chelsea', goals: 4}, {team: 'Man. Utd', goals: 3}];
console.table(teams_data);