超实用的JavaScript技巧及最佳实践

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS、Wakanda以及其它实现。此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西。

  在这篇文章中,作者将会向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会让你受益的。

  文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8
3.20.17.15)。

  1.第一次给变量赋值时,别忘记var关键字

  给一个未声明的变量赋值,该变量会被自动创建为全局变量,在JS开发中,应该避免使用全局变量。

  2.使用===替换==

  并且永远不要使用=或!=。





1

2

3

4

5

6

7

8

[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.使用分号来作为行终止字符

  在行终止的地方使用分号是一个很好的习惯,即使开发人员忘记加分号,编译器也不会有任何提示,因为在大多数情况下,JavaScript解析器会自动加上。

  4.创建构造函数





1

2

3

4

5

6

function Person(firstName, lastName){

    this.firstName =  firstName;

    this.lastName = lastName;       

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

  5.应当小心使用typeof、instanceof和constructor





1

2

3

4

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

typeof arr;   // return "object"

arr  instanceof Array // true

arr.constructor();  //[]

  6.创建一个Self-calling函数

  这通常会被称为自我调用的匿名函数或立即调用函数表达式(LLFE)。当函数被创建的时候就会自动执行,好比下面这个:





1

2

3

4

5

6

7

(function(){

    // some private code that will be executed automatically

})(); 

(function(a,b){

    var result = a+b;

    return result;

})(10,20)

  7.给数组创建一个随机项





1

2

3

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

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

  8.在特定范围里获得一个随机数

  下面这段代码非常通用,当你需要生成一个假的数据用来测试时,比如在最低工资和最高之前获取一个随机值。





1

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

  9.在数字0和最大数之间生成一组随机数





1

2

3

var numbersArray = [] , max = 100;

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

  10.生成一组随机的字母数字字符





1

2

3

4

5

6

function generateRandomAlphaNum(len) {

    var rdmstring = "";

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

    return  rdmString.substr(0, len);

}

  11.打乱数字数组





1

2

3

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

  12.字符串tim函数

  trim函数可以删除字符串的空白字符,可以用在Java、C#、PHP等多门语言里。





1

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

  13.数组追加





1

2

3

4

5

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

  14.将参数对象转换为数组





1

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

  15.验证一个给定参数是否为数字





1

2

3

function isNumber(n){

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

}

  16.验证一个给定的参数为数组





1

2

3

function isArray(obj){

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

}

  注意,如果toString()方法被重写了,你将不会得到预期结果。

  或者你可以这样写





1

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

  同样,如果你使用多个frames,你可以使用instancesof,如果内容太多,结果同样会出错。





1

2

3

4

5

6

7

8

9

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; // fals

  17.从数字数组中获得最大值和最小值





1

2

3

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

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

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

  18.清空数组





1

2

var myArray = [12 , 222 , 1000 ]; 

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

  19.不要用delete从数组中删除项目

  开发者可以使用split来代替使用delete来删除数组项。与其删除数组中未定义项目,还不如使用delete来替代。





1

2

3

4

5

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

  也可以……





1

2

3

4

5

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方法应该删除一个对象属性

  20.使用length属性缩短数组

  如上文提到的清空数组,开发者还可以使用length属性缩短数组。





1

2

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

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

  如果你所定义的数组长度值过高,那么数组的长度将会改变,并且会填充一些未定义的值到数组里,数组的length属性不是只读的。





1

2

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

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

  来自: flippinawesome

超实用的JavaScript技巧及最佳实践,码迷,mamicode.com

时间: 2024-10-19 00:36:48

超实用的JavaScript技巧及最佳实践的相关文章

【转】超实用的JavaScript技巧及最佳实践

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS.Wakanda以及其它实现.此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西. 在这篇文章中,作者将会向大家分享JavaScript开发的小技巧.最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会

超实用的JavaScript技巧及最佳实践(下)

文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15). 1.使用逻辑符号&&或者||进行条件判断 1 2 3 var foo = 10;   foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();  foo == 5 || doSomething(); // is the same thi

Javascript继承的最佳实践

什么是继承? 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性和行为,并能扩展新的能力. 在Javascript 中 没有 类的概念, 它是通过构造函数来产生 对象, 构造函数 就是一个普通的函数,通常当函数名 为 大写开头的,我们认为是构造函数,否则 就是普通的方法. function A() { this.name = 'A Class instance'; } function m1() { } 既然 Javascript 是 通过构造函数来产生

业内docker技巧和最佳实践的想法

业内docker技巧和最佳实践的想法 最佳实践问题 这里有一些技巧,可能符合或可能不符合最佳实践,回复评论将不胜感激.?保持映像小:使用--no-install-recommends选项的apt-get,安装真正的依赖性,而不是大的元数据包(如的texlive-full).?避免结合RUN命令,等创建更多的AUFS层? (限为一次42,但现在是至少127).?可以使用Run git clone......将数据添加到一个容器到ADD位置,这缓存无效.?使用自动化构建链接到Github上,基于Do

避免Java中NullPointerException的Java技巧和最佳实践

Java中的NullPointerException是我们最经常遇到的异常了,那我们到底应该如何在编写代码是防患于未然呢.下面我们就从几个方面来入手,解决这个棘手的?问题吧.? 值得庆幸的是,通过应用一些防御性编码技术并遵循应用程序多个部分之间的约定,您可以在一定程度上避免Java中的NullPointerException. 顺便说一下,在本文中,我们将学习一些Java的编码技术和最佳实践,这些技巧和最佳实践可用于避免的Java中的空指针异常.遵循这些Java的技巧还可以最大程度地减少很多Ja

45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧,技巧和最佳实践)

As you know, JavaScript is the number one programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has many other implementations. It’s also the

Javascript继承之最佳实践

尊重原创,转载请注明出处:http://blog.csdn.net/zoutongyuan 什么是继承? 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性和行为,并能扩展新的能力. 在Javascript 中 没有 类的概念, 它是通过构造函数来产生 对象, 构造函数 就是一个普通的函数.通常当函数名 为 大写开头的.我们觉得是构造函数,否则 就是普通的方法. function A() { this.name = 'A Class instance';

javascript的一些最佳实践

一.缓存需要多次读取的 DOM元素,对象属性,数组值 var obj = { arr: [1, 2, 3] }; A: for (var i = 0; i < obj.arr.length; i++) { document.getElementById("Grid" + obj.arr[i]).Condition = ''; document.getElementById("Grid" + obj.arr[i]).DataBand(); } B: var ar

使用Unity3D的50个技巧:Unity3D最佳实践!

关于这些技巧 这些技巧不可能适用于每个项目. 这些是基于我的一些项目经验,项目团队的规模从3人到20人不等: 框架结构的可重用性.清晰程度是有代价的——团队的规模和项目的规模决定你要在这个上面付出多少: 很多技巧是品味的问题(这里所列的所有技巧,可能有同样好的技术替代方案): 一些技巧可能是对传统的Unity开发的一个冲击.例如,使用prefab替代对象实例并不是一个传统的Unity风格,并且这样做的代价还挺高的(需要很多的preffab).也许这些看起来有些疯狂,但是在我看来是值得的. 流程1