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

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

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

1、首次為變量賦值時(shí)務(wù)必使用var關(guān)鍵字

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

2、使用===取代==

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

[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、空字符串的邏輯結(jié)果均為false

4、行尾使用分號

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

5、使用對象構(gòu)造器

function  Person(firstName,  lastName){

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

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

}??        //歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流：1007317281

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

6、使用typeof、instanceof和contructor

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

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

    typeof  arr; // return "object"

    arr??instanceof  Array  // true

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

7、使用自調(diào)用函數(shù)

函數(shù)在創(chuàng)建之后直接自動執(zhí)行，通常稱之為自調(diào)用匿名函數(shù)（Self-Invoked Anonymous Function）或直接調(diào)用函數(shù)表達(dá)式（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、從數(shù)組中隨機(jī)獲取成員

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

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

9、獲取指定范圍內(nèi)的隨機(jī)數(shù)

這個(gè)功能在生成測試用的假數(shù)據(jù)時(shí)特別有數(shù)，比如介與指定范圍內(nèi)的工資數(shù)。

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

10、生成從0到指定值的數(shù)字?jǐn)?shù)組

var  numbersArray  =  []  ,  max  =  100;

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

11、生成隨機(jī)的字母數(shù)字字符串

function  generateRandomAlphaNum(len)  {

????var  rdmString  =  "";

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

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

}            //歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流：1007317281

12、打亂數(shù)字?jǐn)?shù)組的順序

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內(nèi)置的數(shù)組排序函數(shù)，更好的辦法是用專門的代碼來實(shí)現(xiàn)（如Fisher-Yates算法）.

13、字符串去空格

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

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

新的JavaScript引擎已經(jīng)有了trim()的原生實(shí)現(xiàn)。

14、數(shù)組之間追加

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、對象轉(zhuǎn)換為數(shù)組

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

16、驗(yàn)證是否是數(shù)字

function  isNumber(n){

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

}                     //歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流：1007317281

17、驗(yàn)證是否是數(shù)組

function  isArray(obj){

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

}

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

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

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

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、獲取數(shù)組中的最大值和最小值

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、清空數(shù)組

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

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

20、不要直接從數(shù)組中delete或remove元素

如果對數(shù)組元素直接使用delete，其實(shí)并沒有刪除，只是將元素置為了undefined。數(shù)組元素刪除應(yīng)使用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]?? */

而應(yīng)：

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]?? */

刪除對象的屬性時(shí)可以使用delete。

21、使用length屬性截?cái)鄶?shù)組

前面的例子中用length屬性清空數(shù)組，同樣還可用它來截?cái)鄶?shù)組：

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

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

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

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

邏輯或還可用來設(shè)置默認(rèn)值，比如函數(shù)參數(shù)的默認(rèn)值。

function  doSomething(arg1){

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

}

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

本次給大家推薦一個(gè)免費(fèi)的學(xué)習(xí)群，里面概括移動應(yīng)用網(wǎng)站開發(fā)，css，html，webpack，vue node angular以及面試資源等。**獲取資料