《JavaScript 开发的 45 个经典技巧.docx》由会员分享，可在线阅读，更多相关《JavaScript 开发的 45 个经典技巧.docx（11页珍藏版）》请在金锄头文库上搜索。
1、JavaScript 开发的 45 个经典技巧1 前言JavaScript 是一种直译式脚本语言，也是一种动态类型、弱类型、基于原型的语言。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，因此其也是一种被广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。现在，JavaScript 已经成为了当今使用最为广泛、最受欢迎的语言之一，多了解一些 JavaScript 的使用技巧，当然是有益无害啦！2 内容JavaScript 是一个绝冠全球的编程语言，可用于 Web 开发、移动应用开发（PhoneGap 和 Appcelerator）、服务
2、器端开发（Node.js 和 Wakanda）等等。JavaScript 还是很多新手踏入编程世界的第一个语言，既可以用来显示浏览器中的简单提示框，也可以通过 nodebot 或 nodruino 来控制机器人。能够编写结构清晰、性能高效的 JavaScript 代码的开发人员，现如今已成了招聘市场最受追捧的人。在这篇文章里，我将分享一些 JavaScript 的技巧、秘诀和最佳实践，除了少数几个外，不管是浏览器的 JavaScript 引擎，还是服务器端 JavaScript 解释器，均适用。本文中的示例代码，通过了在 Google Chrome 30 最新版（V8 3.20.17.15）上
3、的测试。1. 首次为变量赋值时务必使用 var 关键字变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。2. 使用 = 取代 =和!=操作符会在需要的情况下自动转换数据类型。但=和!=不会，它们会同时比较值和数据类型，这也使得它们要比=和!=快。10 = 10 / is false10 = 10 / is true10 = 10 / is true10 = 10 / is false = 0 / is true = 0 / is false = false / is true but true = a is false = false / is false3. u
4、nderfined、null、0、false、NaN、空字符串的逻辑结果均为 false4. 行尾使用分号实践中最好还是使用分号，忘了写也没事，大部分情况下 JavaScript 解释器都会自动添加。对于为何要使用分号，可参考文章 JavaScript 中关于分号的真相。5. 使用对象构造器function Person(firstName, lastName) this.firstName = firstName; this.lastName = lastName;var Saad = new Person(Saad, Mousliki);6. 小心使用 typeof、instanceof
5、和 contructor typeof：JavaScript 一元操作符，用于以字符串的形式返回变量的原始类型，注意，typeof null 也会返回 object，大多数的对象类型（数组 Array、时间 Date 等）也会返回 object； instanceof：JavaScript操作符，会在原型链中的构造器中搜索，找到则返回true，否则返回false； contructor：内部原型属性，可以通过代码重写。var arr = a, b, c;typeof arr; / 返回 object arr instanceof Array / truearr.constructor(); /
6、7. 使用自调用函数函数在创建之后直接自动执行，通常称之为自调用匿名函数（Self-Invoked Anonymous Function）或直接调用函数表达式（Immediately Invoked Function Expression ），其格式如下：(function() / 置于此处的代码将自动执行)(); (function(a, b) var result = a + b; return result;)(10, 20)8. 从数组中随机获取成员var items = 12, 548 , a , 2 , 5478 , foo , 8852, , Doe , 2145 , 119;v
7、ar randomItem = itemsMath.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 . 10011. 生成随机的字母数字字符串f
8、unction generateRandomAlphaNum(len) var rdmString = ; for( ; rdmString.length len; rdmString += Math.random().toString(36).substr(2); return rdmString.substr(0, len);12. 打乱数字数组的顺序var numbers = 5, 458 , 120 , -215 , 228 , 400 , 122205, -85411;numbers = numbers.sort(function() return Math.random() - 0
9、.5);/* numbers 数组将类似于 120, 5, 228, -215, 400, 458, -85411, 122205 */这里使用了 JavaScript 内置的数组排序函数，更好的办法是用专门的代码来实现（如 Fisher-Yates 算法），可以参见 StackOverFlow 上的讨论。13. 字符串去空格Java、C# 和 PHP 等语言都实现了专门的字符串去空格函数，但 JavaScript 中是没有的，可以通过下面的代码来为 String 对象定义一个trim函数：String.prototype.trim = function()return this.replac
10、e(/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 值为 12 , foo , name Joe , -2458 , Doe , 555 , 100 */15. 对象转换为数组var argArray = Array.prototype.slice.call(arguments);16. 验
11、证是否是数字function isNumber(n) return !isNaN(parseFloat(n) & isFinite(n);17. 验证是否是数组function isArray(obj) return Object.prototype.toString.call(obj) = object Array ;但如果toString()方法被重写过得话，就行不通了。也可以使用下面的方法：Array.isArray(obj); / its a new Array method如果在浏览器中没有使用frame，还可以用instanceof，但如果上下文太复杂，也有可能出错。var myF
12、rame = document.createElement(iframe);document.body.appendChild(myFrame);var myArray = window.frameswindow.frames.length-1.Array;var arr = new myArray(a,b,10); / a,b,10 / myArray 的构造器已经丢失，instanceof 的结果将不正常/ 构造器是不能跨 frame 共享的arr instanceof Array; / false18. 获取数组中的最大值和最小值var numbers = 5, 458 , 120 ,
13、-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，数组元素
14、删除应使用splice。切忌：var items = 12, 548 ,a , 2 , 5478 , foo , 8852, , Doe ,2154 , 119 ; items.length; / return 11 delete items3; / return true items.length; / return 11 /* items 结果为 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 结果为 12, 548, a, 5478, foo, 8852, undefined 1, Doe, 2154, 119删除对象的属性时可以使用delete。21. 使用length属性截断数组前面的例子中用length属性清空数组，同样还可用它来截断数组：
