[TOC] ## 前言 本文總結一些代碼技巧，使用后將從執行本身提升你的代碼質量。 ## 匯總 ### 常見false值 underfined、null、0、false、NaN、空字符串的邏輯結果均為false ### 從數組中隨機獲取成員 ~~~ var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)]; ~~~ ### 對象構造器 ~~~ function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var Saad = new Person("Saad", "Mousliki"); ~~~ ### 自調用函數，匿名函數 函數在創建之后直接自動執行，通常稱之為自調用匿名函數（Self-Invoked Anonymous Function）或直接調用函數表達式（Immediately Invoked Function Expression ）。格式如下： ~~~ (function(){ // 置于此處的代碼將自動執行 })(); (function(a,b){ var result = a+b; return result; })(10,20) ~~~ ### 對象轉換為數組 `var argArray = Array.prototype.slice.call(arguments);` ### 清空數組 ~~~ var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to []. ~~~ ### 不要直接從數組中delete或remove元素 如果對數組元素直接使用delete，其實并沒有刪除，只是將元素置為了undefined。數組元素刪除應使用splice。（刪除對象屬性用delete） ~~~ var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items 結果為 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] ~~~ ### 使得map()函數方法對數據循環 ~~~ var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares will be equal to [1, 4, 9, 16] ~~~ ### 保留指定小數位數 ~~~ var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432 ~~~ ### 通過for-in循環檢查對象的屬性 下面這樣的用法，可以防止迭代的時候進入到對象的原型屬性中。 ~~~ for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } } ~~~ ### 用JSON來序列化與反序列化 ~~~ var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; var stringFromPerson = JSON.stringify(person); /* stringFromPerson 結果為 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ var personFromString = JSON.parse(stringFromPerson); /* personFromString 的值與 person 對象相同 */ ~~~ ### 避免使用eval和函數構造器 eval()和函數構造器（Function consturctor）的開銷較大，每次調用，JavaScript引擎都要將源代碼轉換為可執行的代碼。 ### 傳給setInterval()和setTimeout()使用匿名函數或者函數字符串形式 如果直接使用函數名，那么設置的時間會無效化。官網的demo也是對alert()內置函數追加引號的。 ### 在switch/case中使用數字區間 其實，switch/case中的case條件，還可以這樣寫： ~~~ function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; default: category = "Young"; break; }; return category; } getCategory(5); // 將返回 "Baby" ~~~ ### 獲取url參數 如果你想獲取url上的參數，首先看下你所處的環境，因為不同環境直接決定了你的使用。 java環境可能是requst.getParamater("key"),這里我們不討論java只考慮js的環境。 1 node web環境下 this.request.body可以拿到所有的字段，this.query.key 可以準確的拿到某個字段的值 2 es6中加載模塊框架的情況下，可以安裝qs的模塊。 當前鏈接中的參數部分，location.search可以得到問號以后的字符串， 然后可以用qs.parse(str)可以得到參數的對象格式，然后獲取對應的值。 3 vue中，可以直接通過路由對象拿到對應的參數，取決于你參數的格式 get參數中的部分可以這樣獲取：this.$route.query.key 4 最為重點的部分，常規的web應用中，獲取某些參數字段 當前鏈接中的參數部分，location.search可以得到問號以后的字符串，然后你可以定義工具方法來獲取url上的參數。參考示例代碼： ~~~ /** * 獲取 url 查詢參數的值 * * @param {string} key 目標key string|undefined * @desc * 當key為空時，獲取所有查詢參數的集合對象 * 當key 有值時，獲取指定key的參數值 * 例如： * url: //?name=live&age=21&sex=1 * $.getSearchObj() return: {name:'live',age:'21',sex:'1'} * $.getSearchObj('age') return: '21' */ $.getSearchObj = function(key){ var searchObj = {}, searchArr = [], searchStr = location.search, searchParamStr = decodeURIComponent(searchStr).replace(/^\?/, ''); if(!searchParamStr) return ''; if(key){ var reg=// var item = new RegExp('(^|&)' + key + '=.+?(?=&|$)').exec(searchParamStr)[0].replace('&', ''); searchArr.push(item); } else { searchArr = searchParamStr.split('&'); } for(var i = 0, len = searchArr.length; i < len; i++){ var itemArr = searchArr[i].split('='); searchObj[itemArr[0]] = itemArr[1]; } return key ? searchObj[key] : searchObj; } ~~~ ### 待補充 。。。。 ## 參考資料 * [野狗技術文檔：js常見技巧](https://mp.weixin.qq.com/s/4vfYRlBExSuyoq7ikSo_mg)