你可能不知道的JavaScript代码片段和技巧(上)
发布在前端2019年5月9日view:249
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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、使用typeofinstanceofcontructor

  • 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、不要直接从数组中deleteremove元素

如果对数组元素直接使用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以及面试资源等。获取资料??? 对web开发技术感兴趣的同学,欢迎加入Q群:???1007317281???,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论
发表评论
暂无评论
PUBLISHED IN
前端

strong text

我的收藏