## 開發技巧
**1、使用var聲明變量**
如果給一個沒有聲明的變量賦值,默認會作為一個全局變量(即使在函數內賦值)。要盡量避免不必要的全局變量。
**2、行尾使用分號**
雖然JavaScript允許省略行尾的分號,但是有時不注意的省略,會導致不必要的錯誤。建議在可用可不用行尾分號的地方加上分號。
**3、獲取指定范圍內的隨機數**
```
var getRandom = function(max, min) {
min = arguments[1] || 0;
return Math.floor(Math.random() * (max - min + 1) + min);
};
```
上面的函數接受一個你希望的隨機最大數和一個你希望的隨機最小數。
**4、打亂數字數組的順序**
```
var sortArray = array.sort(function(){
return Math.random() - 0.5;
});
```
**5、取出數組中的隨機項**
```
var ran = array[Math.floor(Math.random() * array.length)];
```
**6、去除字符串的首尾空格**
```
var s = string.trim();
```
**7、類數組對象轉為數組**
比如:類數組對象遍歷:
```
Array.prototype.forEach.call(argumens,function(value){
})
```
DOM的NodeList和HTMLCollection也是類數組對象
**8、獲取數組中的最大值和最小值**
```
var max = Math.max.apply(Math, array);
var min = Math.min.apply(Math, array);
```
**9、清空數組**
array.length = 0;
array = [];
**10、保留指定小數位**
```
var num = num.toFixed(2);
```
返回字符串,保留兩位小數
**11、使用for-in循環來遍歷對象的屬性**
```
for(var key in object) {
// object[key]
}
```
不要用for-in來遍歷數據
**12、獲取某月天數**
```
function getMonthDay(date){
date = date || new Date();
if(typeof date === 'string') {
date = new Date(date);
};
date.setDate(32);
return 32 - date.getDate();
}
```
傳入date參數,可以是字符串、日期對象實例;為空表示當月天數
**13、浮點數問題**
```
0.1 + 0.2 = 0.30000000000000004 != 0.3
```
JavaScript的數字都遵循IEEE 754標準構建,在內部都是64位浮點小數表示
**14、JSON序列化和反序列化**
使用`JSON.stringify()`來將JavaScript對象序列化為有效的字符串。
使用`JSON.parse()`來將有效的字符串轉換為JavaScript對象。
在AJAX傳輸數據時很有用
**15、使用“===”替換“==”**
相等運算符(==)在比較時會將操作數進行相應的類型轉換,而全等運算符(===)不會進行類型轉換。
**16、避免使用with()**
使用with()可以把變量加入到全局作用域中,因此,如果有其它的同名變量,一來容易混淆,二來值也會被覆蓋。
**17、不要使用eval()或函數構造器**
eval()和函數構造器(Function consturctor)的開銷較大,每次調用,JavaScript引擎都要將源代碼轉換為可執行的代碼。
**18、簡化if語句**
```
if (condition) {
fn();
}
```
可替換成:
```
condition && fn();
```
**19、給可能省略的參數賦默認值**
```
function test(a, b){
a = a || '1';
}
```
**20、給數組循環中緩存length的值**
如果你確定循環中數組的長度不會變化,那么你可以這樣:
```
var length = array.length;
for(var i = 0; i < length; i++) {
}
```
可以避免在每次迭代都將會重新計算數組的大小,提高效率
**21、合并數組**
對于小數組,我們可以這樣:
```
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2); // [1,2,3,4,5,6]
```
不過,concat()這個函數并不適合用來合并兩個大型的數組,因為其將消耗大量的內存來存儲新創建的數組。在這種情況之個,可以使用`Array.prototype.push.apply(arr1,arr2)`來替代創建一個新數組。
這種方法不是用來創建一個新的數組,其只是將第一個第二個數組合并在一起,同時減少內存的使用:
```
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1,2,3,4,5,6]
```
**22 枚舉對象“自身”的屬性**
for...in除了枚舉對象“自身”的屬性外,還會枚舉出繼承過來的屬性。
```
var hasOwn = Object.prototype.hasOwnProperty;
var obj = {name: 'tg', age: 24};
for(var name in obj) {
if (hasOwn.call(obj, name)) {
console.log(name + ':' + obj[name]);
}
}
// name:tg
// age:24
```
- 前言
- JavaScript簡介
- 基本概念
- 語法
- 數據類型
- 運算符
- 表達式
- 語句
- 對象
- 數組
- 函數
- 引用類型(對象)
- Object對象
- Array對象
- Date對象
- RegExp對象
- 基本包裝類型(Boolean、Number、String)
- 單體內置對象(Global、Math)
- console對象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應用
- 客戶端存儲(Cookie、Storage、IndexedDB)
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測設備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向對象的程序設計
- 概述
- this關鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯誤處理機制
- JavaScript開發技巧合集
- 編程風格
- 垃圾回收機制