你可能不知道的JavaScript代碼片段和技巧（上）

JavaScript是一個絕冠全球的編程語言，可用于Web開發、移動應用開發（PhoneGap、Appcelerator）、服務器端開發（Node.js和Wakanda等等。JavaScript還是很多新手踏入編程世界的第一個語言。既可以用來顯示瀏覽器中的簡單提示框，也可以通過nodebot或nodruino來控制機器人。能夠編寫結構清晰、性能高效的JavaScript代碼的開發人員，現如今已成了招聘市場最受追捧的人。

在這篇文章里，我將分享一些JavaScript的技巧、秘訣和最佳實踐，除了少數幾個外，不管是瀏覽器的JavaScript引擎，還是服務器端JavaScript解釋器，均適用。

1、首次為變量賦值時務必使用var關鍵字

變量沒有聲明而直接賦值得話，默認會作為一個新的全局變量，要盡量避免使用全局變量。

2、使用===取代==

==和!=操作符會在需要的情況下自動轉換數據類型。但===和!==不會，它們會同時比較值和數據類型，這也使得它們要比==和!=快。

[10]  ===  10????// is false

[10]??==  10????// is true

'10'  ==  10 // is true

'10'  ===  10????// is false

[] ==  0 // is true

[]  ===??0 // is false

''  ==  false // is true but true == "a" is false

''  === false  // is false

3、underfined、null、0、false、NaN、空字符串的邏輯結果均為false

4、行尾使用分號

實踐中最好還是使用分號，忘了寫也沒事，大部分情況下JavaScript解釋器都會自動添加。

5、使用對象構造器

function  Person(firstName,  lastName){

????this.firstName  =??firstName;

????this.lastName  =  lastName;????????

}??        //歡迎加入前端全棧開發交流圈一起學習交流：1007317281

var  Saad  =  new  Person("Saad",  "Mousliki");

6、使用typeof、instanceof和contructor

• typeof：JavaScript一元操作符，用于以字符串的形式返回變量的原始類型，注意，typeof null也會返回object，大多數的對象類型（數組Array、時間Date等）也會返回object
• instanceof：內部原型屬性，可以通過代碼重寫
• contructor：JavaScript操作符，會在原型鏈中的構造器中搜索，找到則返回true，否則返回`false``

    var  arr  =  ["a",  "b",  "c"];

    typeof  arr; // return "object"

    arr??instanceof  Array  // true

    arr.constructor();??//[]

7、使用自調用函數

函數在創建之后直接自動執行，通常稱之為自調用匿名函數（Self-Invoked Anonymous Function）或直接調用函數表達式（Immediately Invoked Function Expression ）。格式如下：

(function(){

????// some private code that will be executed automatically

})();??

(function(a,b){

????var  result  =  a+b;

????return  result;

})(10,20)

8、從數組中隨機獲取成員

var  items  =  [12,  548  ,  'a'  ,  2  ,  5478  ,  'foo'  ,  8852,  ,  'Doe'  ,  2145  ,  119];

var??randomItem  =  items[Math.floor(Math.random()  *  items.length)];

9、獲取指定范圍內的隨機數

這個功能在生成測試用的假數據時特別有數，比如介與指定范圍內的工資數。

var  x  =  Math.floor(Math.random()  *  (max  -  min  +  1))  +  min;

10、生成從0到指定值的數字數組

var  numbersArray  =  []  ,  max  =  100;

for(  var  i=1;  numbersArray.push(i++)  <  max;);??// numbers = [1,2,3 ... 100]

11、生成隨機的字母數字字符串

function  generateRandomAlphaNum(len)  {

????var  rdmString  =  "";

????for(  ;  rdmString.length  <  len;  rdmString??+=  Math.random().toString(36).substr(2));

????return??rdmString.substr(0,  len);

}            //歡迎加入前端全棧開發交流圈一起學習交流：1007317281

12、打亂數字數組的順序

var  numbers  =  [5,  458  ,  120  ,  -215  ,  228  ,  400  ,  122205,  -85411];

numbers  =  numbers.sort(function(){  return  Math.random()  -  0.5});

/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]??*/

這里使用了JavaScript內置的數組排序函數，更好的辦法是用專門的代碼來實現（如Fisher-Yates算法）.

13、字符串去空格

Java、C#和PHP等語言都實現了專門的字符串去空格函數，但JavaScript中是沒有的，可以通過下面的代碼來為String對象函數一個trim函數：

String.prototype.trim  =  function(){return  this.replace(/^s+|s+$/g,  "");};

新的JavaScript引擎已經有了trim()的原生實現。

14、數組之間追加

var  array1  =  [12  ,  "foo"  ,  {name  "Joe"}  ,  -2458];

var  array2  =  ["Doe"  ,  555  ,  100];

Array.prototype.push.apply(array1,  array2);

/* array1 will be equal to??[12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

15、對象轉換為數組

var  argArray  =  Array.prototype.slice.call(arguments);

16、驗證是否是數字

function  isNumber(n){

????return  !isNaN(parseFloat(n))  &&  isFinite(n);

}                     //歡迎加入前端全棧開發交流圈一起學習交流：1007317281

17、驗證是否是數組

function  isArray(obj){

????return  Object.prototype.toString.call(obj)  ===  '[object Array]'  ;

}

但如果toString()方法被重寫過得話，就行不通了。也可以使用下面的方法：

Array.isArray(obj);  // its a new Array method

如果在瀏覽器中沒有使用frame，還可以用instanceof，但如果上下文太復雜，也有可能出錯。

var  myFrame  =  document.createElement('iframe');

document.body.appendChild(myFrame);

var  myArray  =  window.frames[window.frames.length-1].Array;

var  arr  =  new  myArray(a,b,10);  // [a,b,10]??

// instanceof will not work correctly, myArray loses his constructor

// constructor is not shared between frames

arr instanceof  Array;  // false

18、獲取數組中的最大值和最小值

var??numbers  =  [5,  458  ,  120  ,  -215  ,  228  ,  400  ,  122205,  -85411];

var  maxInNumbers  =  Math.max.apply(Math,  numbers);

var  minInNumbers  =  Math.min.apply(Math,  numbers);

19、清空數組

var  myArray  =  [12  ,  222  ,  1000  ];??

myArray.length  =  0;  // myArray will be equal to [].

20、不要直接從數組中delete或remove元素

如果對數組元素直接使用delete，其實并沒有刪除，只是將元素置為了undefined。數組元素刪除應使用splice。

切忌：

var  items  =  [12,  548  ,'a'  ,  2  ,  5478  ,  'foo'  ,  8852,  ,  'Doe'  ,2154  ,  119  ];

items.length;  // return 11

delete  items[3];  // return true

items.length;  // return 11

/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,?????? 119]?? */

而應：

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 will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,?????? 119]?? */

刪除對象的屬性時可以使用delete。

21、使用length屬性截斷數組

前面的例子中用length屬性清空數組，同樣還可用它來截斷數組：

var  myArray  =  [12  ,  222  ,  1000  ,  124  ,  98  ,  10  ];??

myArray.length  =  4;  // myArray will be equal to [12 , 222 , 1000 , 124].

與此同時，如果把length屬性變大，數組的長度值變會增加，會使用undefined來作為新的元素填充。length是一個可寫的屬性。

myArray.length  =  10;  // the new array length is 10

myArray[myArray.length  -  1]  ;  // undefined

22、在條件中使用邏輯與或

var  foo  =  10;??

foo  ==  10  &&  doSomething();  // is the same thing as if (foo == 10) doSomething();

foo  ==  5  ||  doSomething();  // is the same thing as if (foo != 5) doSomething();

邏輯或還可用來設置默認值，比如函數參數的默認值。

function  doSomething(arg1){

????arg1  =  arg1  ||  10;  // arg1 will have 10 as a default value if it’s not already set

}

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，里面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。**獲取資料