javaScript 的小技巧
20160314知识点的补充:a-1:最原始的操作要比函数调用快
<script type="text/javascript">var min = Math.min(1,6,9,0,3);alert(min);var arr = ['23',"A",5];arr[arr.length]=min;//arr.push(min); alert(arr);</script>
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 false3、underfined、null、0、false、NaN、空字符串的逻辑结果均为false4、行尾使用分号实践中最好还是使用分号,忘了写也没事,大部分情况下JavaScript解释器都会自动添加。对于为何要使用分号,可参考文章JavaScript中关于分号的真相5、使用对象构造器 functionPerson(firstName, lastName){this.firstName =firstName;this.lastName =lastName; }var Saad = new Person("Saad", "Mousliki");6、小心使用typeof、instanceof和contructortypeof:JavaScript一元操作符,用于以字符串的形式返回变量的原始类型,注意,typeofnull也会返回object,大多数的对象类型(数组Array、时间Date等)也会返回object contructor:内部原型属性,可以通过代码重写instanceof:JavaScript操作符,会在原型链中的构造器中搜索,找到则返回true,否则返回false var arr = ["a", "b", "c"];typeof arr; //返回 "object" arr instanceof Array //true arr.constructor(); //[] 7、使用自调用函数函数在创建之后直接自动执行,通常称之为自调用匿名函数(Self-Invoked Anonymous Function)或直接调用函数表达式(Immediately Invoked Function Expression )。格式如下: (function(){//置于此处的代码将自动执行 })(); (function(a,b){var result = a+b;returnresult; })(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、生成随机的字母数字字符串 functiongenerateRandomAlphaNum(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.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.replace(/^\s+|\s+$/g, "");};新的JavaScript引擎已经有了trim()的原生实现。14、数组之间追加 var array1 = [12 , "foo" , {name "Joe"} , -2458];var array2 = ["Doe" , 555 , 100];<span style="color: #ff0000;">Array.prototype.push.apply(array1, array2);</span> /*array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100]*/ 15、对象转换为数组var argArray =Array.prototype.slice.call(arguments);16、验证是否是数字 functionisNumber(n){return !isNaN(parseFloat(n)) &&isFinite(n); }17、验证是否是数组 functionisArray(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]//myArray 的构造器已经丢失,instanceof 的结果将不正常//构造器是不能跨 frame 共享的 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 结果为 [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属性清空数组,同样还可用它来截断数组: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 } 23、使得map()函数方法对数据循环var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares will be equal to [1, 4, 9, 16] 24、保留指定小数位数var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432注意,toFixec()返回的是字符串,不是数字。 25、浮点计算的问题0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 9007199254740992 9007199254740992 + 2 // is equal to 9007199254740994为什么呢?因为0.1+0.2等于0.30000000000000004。JavaScript的数字都遵循IEEE 754标准构建,在内部都是64位浮点小数表示,具体可以参见JavaScript中的数字是如何编码的.可以通过使用toFixed()和toPrecision()来解决这个问题。 26、通过for-in循环检查对象的属性下面这样的用法,可以防止迭代的时候进入到对象的原型属性中。for (var name in object) { if (object.hasOwnProperty(name)) {// do something with name} } 27、逗号操作符var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99 28、临时存储用于计算和查询的变量 在jQuery选择器中,可以临时存储整个DOM元素var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down'); 29、提前检查传入isFinite()的参数isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undefined); // false isFinite(); // false isFinite(null); // true,这点当特别注意 30、避免在数组中使用负数做索引var numbersArray = [1,2,3,4,5]; var from = numbersArray.indexOf("foo") ; // from is equal to -1 numbersArray.splice(from,2); // will return [5] 注意传给splice的索引参数不要是负数,当是负数时,会从数组结尾处删除元素 31、用JSON来序列化与反序列化var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; var stringFromPerson = JSON.stringify(person); /* stringFromPerson 结果为 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"*/ var personFromString =JSON.parse(stringFromPerson);/*personFromString 的值与 person 对象相同*/ 32、不要使用eval()或者函数构造器eval()和函数构造器(Function consturctor)的开销较大,每次调用,JavaScript引擎都要将源代码转换为可执行的代码 var func1 = newFunction(functionCode);var func2 =eval(functionCode);33、避免使用with()使用with()可以把变量加入到全局作用域中,因此,如果有其它的同名变量,一来容易混淆,二来值也会被覆盖。34、不要对数组使用for-in避免: var sum = 0;for (var i inarrayNumbers) { sum+=arrayNumbers[i]; }而是:var sum = 0;for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum+=arrayNumbers[i]; }另外一个好处是,i和len两个变量是在for循环的第一个声明中,二者只会初始化一次,这要比下面这种写法快:for (var i = 0; i < arrayNumbers.length; i++)35、传给setInterval()和setTimeout()时使用函数而不是字符串如果传给setTimeout()和setInterval()一个字符串,他们将会用类似于eval方式进行转换,这肯定会要慢些,因此不要使用:setInterval('doSomethingPeriodically()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000);而是用:setInterval(doSomethingPeriodically,1000); setTimeout(doSomethingAfterFiveSeconds,5000);36、使用switch/case代替一大叠的if/else当判断有超过两个分支的时候使用switch/case要更快一些,而且也更优雅,更利于代码的组织,当然,如果有超过10个分支,就不要使用switch/case了。37、在switch/case中使用数字区间 其实,switch/case中的case条件,还可以这样写:functiongetCategory(age) {var category = "";switch (true) {caseisNaN(age): category= "not an age";break;case (age >= 50): category= "Old";break;case (age <= 20): category= "Baby";break;default: category= "Young";break; };returncategory; } getCategory(5); //将返回 "Baby" 38、使用对象作为对象的原型下面这样,便可以给定对象作为参数,来创建以此为原型的新对象: functionclone(object) {functionOneShotConstructor(){};OneShotConstructor.prototype=object;return newOneShotConstructor(); } clone(Array).prototype ;//[] 39、HTML字段转换函数 functionescapeHTML(text) {var replacements= {"<": "<", ">": ">","&": "&", "\"": """}; return text.replace(/[<>&"]/g, function(character) { returnreplacements[character]; }); }40、不要在循环内部使用try-catch-finally try-catch-finally中catch部分在执行时会将异常赋给一个变量,这个变量会被构建成一个运行时作用域内的新的变量。切忌:var object = ['foo', 'bar'], i;for (i = 0, len = object.length; i <len; i++) {try{//do something that throws an exception }catch(e) {//handle exception } }而应该:var object = ['foo', 'bar'], i;try{for (i = 0, len = object.length; i <len; i++) {//do something that throws an exception } }catch(e) {//handle exception }41、使用XMLHttpRequests时注意设置超时XMLHttpRequests在执行时,当长时间没有响应(如出现网络问题等)时,应该中止掉连接,可以通过setTimeout()来完成这个工作:var xhr = newXMLHttpRequest (); xhr.onreadystatechange= function() {if (this.readyState == 4) { clearTimeout(timeout);//do something with response data } }var timeout = setTimeout( function() { xhr.abort();//call error callback }, 60*1000 /*timeout after a minute*/); xhr.open('GET', url, true); xhr.send();同时需要注意的是,不要同时发起多个XMLHttpRequests请求。42、处理WebSocket的超时 通常情况下,WebSocket连接创建后,如果30秒内没有任何活动,服务器端会对连接进行超时处理,防火墙也可以对单位周期没有活动的连接进行超时处理。为了防止这种情况的发生,可以每隔一定时间,往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求,一个用于使连接保持活动状态,另一个专门用于结束这个状态 var timerID = 0;functionkeepAlive() {var timeout = 15000;if (webSocket.readyState ==webSocket.OPEN) { webSocket.send(''); } timerId=setTimeout(keepAlive, timeout); }functioncancelKeepAlive() {if(timerId) { cancelTimeout(timerId); } }keepAlive()函数可以放在WebSocket连接的onOpen()方法的最后面,cancelKeepAlive()放在onClose()方法的最末尾。43、时间注意原始操作符比函数调用快,使用VanillaJS比如,一般不要这样: var min =Math.min(a,b); A.push(v);可以这样来代替: var min = a < b ?a : b; A[A.length]=v;44、开发时注意代码结构,上线前检查并压缩JavaScript代码可以使用JSLint或JSMin等工具来检查并压缩代码。45、JavaScript博大精深,这里有些不错的学习资源 Code Academy资源:http://www.codecademy.com/tracks/javascript Marjin Haverbekex编写的Eloquent JavaScript:http://eloquentjavascript.net/ John Resig编写的Advanced JavaScript:http://ejohn.org/apps/learn/
javaScript 的小技巧相关推荐
- 10个JavaScript开发小技巧
"梦想天空"(网名)曾发表一篇博文,为我们介绍了10个JavaScript开发小技巧,现转载于此,供大家学习: 尽管我使用Javascript来做开发有很多年了,但它常有一些让我很 ...
- JavaScript 编码小技巧
三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) {answer = ...
- javascript取随机数_查缺补漏一些 Javascript 的小技巧笔记
前言 这篇文章的话,分享一些最近使用React开发项目时,用到的小技巧,其实也算是JavaScript中的一些技巧吧,内容主要有一下几点? 产生随机不重复id 快速取整数 合理布局样式 字符串xml的 ...
- JavaScript实用小技巧
JavaScript的几个小技巧 1.String转换数字 //String 转换数字 var oString = + "2134443"; console.log(typeof ...
- 你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
- 15个JavaScript 编码小技巧
三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20;let answer;if (x > 10) { an ...
- 【JavaScript】JavaScript编程小技巧
JS最大的特点是灵活,极端的灵活,令人发指的灵活. JS是一个弱类型语言:即JS的数据的数据类型不像其他语言那样明确或需要限定. JS的对象({}括起来的),是一些键值对组成,更愿意称它为 ...
- 天瑞地安集团:JavaScript编程小技巧让“菜鸟”编程变得更轻松!
JavaScript是最常用和使用最广泛的编程语言之一.今天要给大家分享的是天瑞地安资深程序员达达在工作中积累的一些技巧,希望对各位喜欢编程的朋友们有所帮助,这些JS开发工具不仅为程序员提供了更多可能 ...
- JavaScript:JavaScript这些小技巧你必须要知道
======================================== 今天这篇笔记,是自己在学习JavaScript的时候总结的一些常见的JavaScript 小tips,嘿嘿,在学习过程 ...
- 107条javascript常用小技巧
107条javascript常用的方法技巧,呵呵!为什么就是108呢? 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是: ...
最新文章
- 【数据结构与算法】之深入解析“有效的括号”的求解思路与算法示例
- 企业级数据库新型研发模式——数据管理DMS实践
- Traceroute程序
- grpc(3):使用 golang 开发 grpc 服务端和client
- c语言烟花代码vc,C语言烟花程序
- matlab程序求解工程,面向计算科学与工程的Matlab编程源码
- 你可能不知道微软悄悄关闭Win10分页显示程序的Sets功能
- 【Python 字符视频】Python 实现将抖音视频转换成字符视频
- 计算机基础课程听课记录,听课记录-计算机应用基础
- 07.第八章、质量管理
- C#梁朝伟变刘德华之山寨实现
- TL431驱动三线PT100热电阻电路设计(转)
- Python 把手教你用Python创造一个“超级蓝血月”!
- scikit-learn决策树算法(鸢尾花数据集、餐饮饭店销量)
- 快乐打小鸟游戏的开发
- EasyUI easyui-datagrid分页功能实现
- 操作系统总结--进程,线程
- ESP32接入百度云,在线语音识别
- 计算机毕业设计JAVA高校固定资产管理系统mybatis+源码+调试部署+系统+数据库+lw
- 计算机功能室设计方案,多功能教室的设计方案.doc
热门文章
- sqap不支持python3吗_Supporting Python 3(支持python3)——欢迎来到Python 3
- 计算机技术在农业上应用论文,浅谈计算机在农业中的应用论文(2)
- 嵌入式linux编译环境搭建,嵌入式Linux开发环境搭建
- 连续举办了十七年的韩国大学生智能车竞赛谢幕了
- 使用小型变压器的线圈设计实验磁标初步实验
- 第十五届全国大学生智能汽车竞赛 信标组亮灯顺序和次数
- vue indev.html,webpack多入口热加载很慢
- clustalw序列比对_如何做出漂亮的序列比对图——ENDscript/ESPript
- 方糖全栈课 PHP React大系,方糖全栈课·PHP+React大系
- python动态创建类_Python中通过参数动态创建扩展类(class)