轉化為Boolean類型
所有JavaScript中的值都能隱式的轉化為Boolean類型，比如：
0 == false; // true 1 == true; // true '' == false // true null == false // true
但是這些值都不是Boolean類型。因此當我們使用三個等於號進行比較時：
0 === false; // false 1 === true; // false '' === false // false null === false // false
現在的問題是如何將其他類型轉化為Boolean類型：
!!0 === false; // true !!1 === true; // true !!'' === false // true !!null === false // true
註：經網友 的提醒，上面關於null和false的描述有誤。null == false 這個表達式的結果是 false。
根據《JavaScript秘密花園》中的描述，在JavaScript中只有null和undefined兩個不是對象，其他的所有都是對象（包括true，false）。
<pre style="max-width: 100%;">
1 "" == "0" // false 2 0 == "" // true 3 0 == "0" // true 4 false == "false" // false 5 false == "0" // true 6 false == undefined // false 7 false == null // false 8 null == undefined // true 9 " \t\r\n" == 0 // true
</pre>
為參數賦初值
function plus(base, added) {
return base + added;
}
plus(2); // NaN
在這個例子中，plus(2)和plus(2, undefined)是等價的，2 + undefined的結果是NaN。
現在的問題是，如果沒有傳遞第二個參數，如何為它賦初值呢？
function plus(base, added) {
added = added || 1;
return base + added;
}
plus(2); // 3
plus(2, 2); // 4
有網友提到 plus(2, 0) = 3; 的確是這樣的，看來這個地方還要做一些特殊處理：
function plus(base, added) {
added = added || (added === 0 ? 0 : 1);
return base + added;
}
阻止別人在Iframe中加載你的頁面
如果你的網站變得非常有人氣的時候，就有很多網站想連結到你的網站，甚至想把你的網頁通過IFrame嵌入它自己的網頁。
這樣就不好玩了，那麼如何來阻止這樣行為呢？
if(top !== window) {
top.location.href = window.location.href;
}
這段代碼應該放在你每個頁面的head中，如果你想知道現實中有沒人在用，看看baidu的博客你就知道了。
字符串替換
String.prototype.replace函數經常會讓那些非常熟悉C#或者Java的程式設計師感到迷惑。
比如：
'Hello world, hello world'.replace('world', 'JavaScript');
// The result is "Hello JavaScript, hello world"
replace函數的第一個參數是正則表達式。如果你傳遞一個字符串到第一個參數，則只有第一個找到的匹配字符串被替換。 為了解決這個問題，我們可以使用正則表達式：
'Hello world, hello world'.replace(/world/g, 'JavaScript'); // The result is "Hello JavaScript, hello JavaScript"
我們還可以指定在替換時忽略大小寫：
'Hello world, hello world'.replace(/hello/gi, 'Hi'); // The result is "Hi world, Hi world"
將arguments轉化為數組
函數中的預定義變量arguments並非一個真正的數組，而是一個類似數組的對象。
它具有length屬性，但是沒有slice, push, sort等函數，那麼如何使arguments具有這些數組才有的函數呢？
也就是說如何使arguments變成一個真正的數組呢？
function args() {
return [].slice.call(arguments, 0);
}
args(2, 5, 8); // [2, 5, 8]
為parseInt函數指定第二個參數
parseInt用來將字符串轉化為整形的數字，語法為：
parseInt(str, [radix])
其中第二個參數是可選的，用來指定第一個參數是幾進位的。 如果沒有傳遞第二個參數，則按照如下規則：
->如果str以 0x 開頭，則認為是16進位。
->如果str以 0 開頭，則認為是8進位。
->否則，認為是10進位。
因此如下的代碼將會讓人很迷惑，如果你不知道這些規則：
parseInt('08'); // 0
parseInt('08', 10); // 8
所以，安全起見一定要為parseInt指定第二個參數。
從數組中刪除一個元素
或許我們可以通過delete來做到：
var arr = [1, 2, 3, 4, 5]; delete arr[1]; arr; // [1, undefined, 3, 4, 5]
可以看到，delete並不能真正的刪除數組中的一個元素。刪除的元素會被undefined取代，數組的長度並沒有變化。
事實上，我們可以通過Array.prototype中的splice函數來刪除數組中的元素，如下所示：
var arr = [1, 2, 3, 4, 5]; arr.splice(1, 1); arr; // [1, 3, 4, 5]
函數也是對象
在JavaScript中函數也是對象，因為我們可以為函數添加屬性。 比如：
function add() {
return add.count++;
}
add.count = 0;
add(); // 0
add(); // 1
add(); // 2
我們為函數add添加了count屬性，用來記錄此函數被調用的次數。
當然這可以通過更優雅的方式來實現：
function add() {
if(!arguments.callee.count) {
arguments.callee.count = 0;
}
return arguments.callee.count++;
}
add(); // 0
add(); // 1
add(); // 2
arguments.callee指向當前正在運行的函數。
數組中的最大值
如何在全是數字的數組中找到最大值，我們可以簡單的通過循環來完成：
var arr = [2, 3, 45, 12, 8];
var max = arr[0];
for(var i in arr) {
if(arr[i] > max) {
max = arr[i];
}
}
max; // 45
有沒有其他方法？我們都知道JavaScript中有一個Math對象進行數字的處理：
Math.max(2, 3, 45, 12, 8); // 45
然後，我們可以這樣來找到數組中最大值：
var arr = [2, 3, 45, 12, 8]; Math.max.apply(null, arr); // 45
為IE添加console.log函數**
在Firefox下並有Firebug的支持下，我們經常使用console.log來在控制台記錄一些信息。 但是這種做法在IE下會阻止JavaScript的執行（在Firefox下沒有啟用Firebug情況下也是一樣），因為此時根本沒有console對象存在。 我們可以通過如下小技巧來防止這樣情況的發生：
if (typeof(console) === 'undefined') {
window.console = {
log: function(msg) {
alert(msg);
}
};
}
console.log('debug info.');
undefined是JavaScript中保留關鍵字麼？
看起來像是的，但實際上undefined並不是JavaScript中的關鍵字:
var undefined = 'Hello'; undefined; // 'Hello'
這段代碼可能會讓你感到很奇怪，不過它的確能夠正常運行，undefined只是JavaScript中一個預定義的變量而已。
註：在JavaScript程序中，千萬不要這樣做，這個技巧只是告訴你有這麼一回事而已。
判斷一個變量是否為undefined
兩種情況下，一個變量為undefined：
1. 聲明了變量，但是沒有賦值
var name; name === undefined; // true
2. 從來沒有聲明過此變量
name2 === undefined; // error – name2 is not defined
在第二種情況下，會有一個錯誤被拋出，那麼如果判斷一個變量是否為undefined而不產生錯誤呢？
下面提供了一種通用的方法：
typeof(name2) === 『undefined』; // true
預加載圖片
預加載圖片就是加載頁面上不存在的圖片，以便以後使用JavaScript把它們快速顯示出來。
比如你想在滑鼠移動到某個圖片上時顯示另一張圖片:
var img = new Image(); img.src = "clock2.gif";
<img src="clock.gif" mce_src="clock.gif" alt=""
onmouseover="this.src='clock2.gif';"
onmouseout="this.src=clock.gif';" />
那麼，如何加載一組圖片呢？考慮如下代碼：
var source = ['img1.gif','img2.gif'];
var img = new Image();
for(var i = 0; i < source.length; i++) {
img.src = source[i];
}
實際上，這段代碼只能預加載最後的一張圖片，因為其他的圖片根本沒有時間來預加載在循環到來的時候。
因此正確的寫法應該是：
var source = ['img1.gif','img2.gif'];
for(var i = 0; i < source.length; i++) {
var img = new Image();
img.src = source[i];
}
閉包（closure）
閉包指的是函數內的局部變量，當函數返回時此變量依然可用。
當你在函數內部定義另外一個函數時，你就創建了一個閉包，一個著名的例子：
function add(i) {
return function() {
return ++i;
};
}
add(2).toString(); // "function () { return ++i; }"
add(2)(); // 3
add(2)是一個函數，它可能獲取外部函數的局部變量i。
私有變量
我們經常使用命名規範來標示一個變量是否為私有變量（最常用來標示）：
var person = {
_name: '',
getName: function() {
return this._name || 'not defined';
}
};
person.getName(); // "not defined"
下劃線前綴用來作為私有變量的約定，但是其他開發人員仍然可以調用此私有變量：
person._name; // ""
那麼，如何在JavaScript中創建一個真正的私有變量呢？ 主要技巧是使用匿名函數（anonymous function）和閉包（closure）。
var person = {};
(function() {
var _name = '';
person.getName = function() {
return _name || 'not defined';
}
})();
person.getName(); // "not defined"
typeof(person._name); // "undefined"
JavaScript沒有塊級上下文（Scope）
JavaScript中塊級代碼沒有上下文，實際上只有函數有自己的上下文。
for(var i = 0; i < 2; i ++) {
}
i; // 2
如果想創建一個上下文，可以使用自執行的匿名函數：
(function (){
for(var i = 0; i < 2; i ++) {
}
})();
typeof(i) === 'undefined'; // true
怪異的NaN
NaN用來表示一個值不是數字。
NaN在JavaScript中行為很怪異，是因為那NaN和任何值都不相等（包括它自己）。
NaN === NaN; // false
因為下面的代碼可能會讓一些人抓狂：
parseInt('hello', 10); // NaN
parseInt('hello', 10) == NaN; // false
parseInt('hello', 10) === NaN; // false
那麼如何來檢查一個值是否NaN?可以使用window.isNaN來判斷：
isNaN(parseInt('hello', 10)); // true
真值和假值
JavaScript中所有值都能隱式地轉化為Boolean類型。
在條件判斷中，下面這些值會自動轉化為false：
null, undefined, NaN, 0, 『』, false
因此，不需要做如下複雜的判斷:
if(obj === undefined || obj === null) {
}
而只需要這樣做就行了：
if(!obj) {
}
修改arguments
比如，添加一個值到arguments中：
function add() {
arguments.push('new value');
}
add(); // error - arguments.push is not a function
這樣會出錯，因為arguments不是一個真正的數組，沒有push方法。
解決辦法：
function add() {
Array.prototype.push.call(arguments, 'new value');
return arguments;
}
add()[0]; // "new value"
Boolean 和 new Boolean
我們可以把Boolean看做是一個函數，用來產生Boolean類型的值（Literal）：
Boolean(false) === false; // true
Boolean('') === false; // true
所以，Boolean(0)和!!0是等價的。
我們也可以把Boolean看做是一個構造函數，通過new來創建一個Boolean類型的對象：
new Boolean(false) === false; // false new Boolean(false) == false; // true typeof(new Boolean(false)); // "object" typeof(Boolean(false)); // "boolean"
快速字符串連接
我們經常使用+將較短的字符串連接為一個長字符串，這在大部分的情況下是沒問題的。
但是如果有大量的字符串需要連接，這種做法將會遇到性能問題，尤其是在IE下。
var startTime = new Date();
var str = '';
for (var i = 0; i < 50000; i++) {
str += i;
}
alert(new Date() - startTime); // Firefox - 18ms, IE7 - 2060ms
var startTime = new Date();
var arr = [];
for (var i = 0; i < 100000; i++) {
arr.push(i);
}
var str = arr.join("");
alert(new Date() - startTime); // Firefox - 38ms, IE7 - 280ms
可以看到Firefox似乎對+操作符進行了優化，而IE則表現的傻乎乎的。
一元操作符 +
在JavaScript中，我們可以在字符串之前使用一元操作符「+」。這將會把字符串轉化為數字，如果轉化失敗則返回NaN。
2 + '1'; // "21" 2 + ( +'1'); // 3
如果把 + 用在非字符串的前面，將按照如下順序進行嘗試轉化：
調用valueOf()
調用toString()
轉化為數字
+new Date; // 1242616452016 +new Date === new Date().getTime(); // true +new Date() === Number(new Date) // true
encodeURI和encodeURIComponent
window.encodeURI函數用來編碼一個URL，但是不會對以下字符進行編碼：「:」, 「/」, 「;」, 「?」.
window.encodeURIComponent則會對上述字符進行編碼。
我們通過一個例子來說明：
'index.jsp?page='+encodeURI('/page/home.jsp'); // "index.jsp?page=/page/home.jsp"
'index.jsp?page='+encodeURIComponent('/page/home.jsp'); // "index.jsp?page=%2Fpage%2Fhome.jsp"
因此，在對URL進行編碼時我們經常會選擇 encodeURIComponent。
table.innerHTML在IE下是只讀屬性
我們經常通過節點的innerHTML屬性來填充節點，比如：
<div id="container1"> </div>
document.getElementById('container1').innerHTML = "Hello World!";
但是在IE下設置table.innerHTML將會導致錯誤：
<table id="table1"> </table>
// works well in Firefox, but fail to work in IE
document.getElementById('table1').innerHTML = "<tr><td>Hello</td><td>World!</td></tr>";
web前端開發學習Q-q-u-n： 600610151，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰教程，學習工具，職業規劃 ）
實際上，table, thead, tr, select等元素的innerHTML屬性在IE下都是只讀的。
那麼如果動態的創建一個table呢，下面提供了一種可行的方法：
<div id="table1"> </div>
document.getElementById('table1').innerHTML = "<table><tr><td>Hello</td><td>World!</td></tr></table>";
0.1+0.2 != 0.3
JavaScript將小數作為浮點數對待，所以可能會產生一些四捨五入的錯誤，比如：
0.1 + 0.2; // 0.30000000000000004
你可以通過toFixed方法指定四捨五入的小數位數：
(0.1 + 0.2).toFixed(); // "0" (0.1 + 0.2).toFixed(1); // "0.3"
作者：大前端世界
連結：https://www.jianshu.com/p/22274cff3724