js实用技术 · 前端技术指南

[TOC] ## 前言本文总结一些代码技巧，使用后将从执行本身提升你的代码质量。 ## 汇总 ### 常见false值 underfined、null、0、false、NaN、空字符串的逻辑结果均为false ### 从数组中随机获取成员 ~~~ var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)]; ~~~ ### 对象构造器 ~~~ function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var Saad = new Person("Saad", "Mousliki"); ~~~ ### 自调用函数，匿名函数函数在创建之后直接自动执行，通常称之为自调用匿名函数（Self-Invoked Anonymous Function）或直接调用函数表达式（Immediately Invoked Function Expression ）。格式如下： ~~~ (function(){ // 置于此处的代码将自动执行 })(); (function(a,b){ var result = a+b; return result; })(10,20) ~~~ ### 对象转换为数组 `var argArray = Array.prototype.slice.call(arguments);` ### 清空数组 ~~~ var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to []. ~~~ ### 不要直接从数组中delete或remove元素如果对数组元素直接使用delete，其实并没有删除，只是将元素置为了undefined。数组元素删除应使用splice。（删除对象属性用delete） ~~~ 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] ~~~ ### 使得map()函数方法对数据循环 ~~~ var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares will be equal to [1, 4, 9, 16] ~~~ ### 保留指定小数位数 ~~~ var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432 ~~~ ### 通过for-in循环检查对象的属性下面这样的用法，可以防止迭代的时候进入到对象的原型属性中。 ~~~ for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } } ~~~ ### 用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 对象相同 */ ~~~ ### 避免使用eval和函数构造器 eval()和函数构造器（Function consturctor）的开销较大，每次调用，JavaScript引擎都要将源代码转换为可执行的代码。 ### 传给setInterval()和setTimeout()使用匿名函数或者函数字符串形式如果直接使用函数名，那么设置的时间会无效化。官网的demo也是对alert()内置函数追加引号的。 ### 在switch/case中使用数字区间其实，switch/case中的case条件，还可以这样写： ~~~ function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; default: category = "Young"; break; }; return category; } getCategory(5); // 将返回 "Baby" ~~~ ### 获取url参数如果你想获取url上的参数，首先看下你所处的环境，因为不同环境直接决定了你的使用。 java环境可能是requst.getParamater("key"),这里我们不讨论java只考虑js的环境。 1 node web环境下 this.request.body可以拿到所有的字段，this.query.key 可以准确的拿到某个字段的值 2 es6中加载模块框架的情况下，可以安装qs的模块。当前链接中的参数部分，location.search可以得到问号以后的字符串，然后可以用qs.parse(str)可以得到参数的对象格式，然后获取对应的值。 3 vue中，可以直接通过路由对象拿到对应的参数，取决于你参数的格式 get参数中的部分可以这样获取：this.$route.query.key 4 最为重点的部分，常规的web应用中，获取某些参数字段当前链接中的参数部分，location.search可以得到问号以后的字符串，然后你可以定义工具方法来获取url上的参数。参考示例代码： ~~~ /** * 获取 url 查询参数的值 * * @param {string} key 目标key string|undefined * @desc * 当key为空时，获取所有查询参数的集合对象 * 当key 有值时，获取指定key的参数值 * 例如： * url: //?name=live&age=21&sex=1 * $.getSearchObj() return: {name:'live',age:'21',sex:'1'} * $.getSearchObj('age') return: '21' */ $.getSearchObj = function(key){ var searchObj = {}, searchArr = [], searchStr = location.search, searchParamStr = decodeURIComponent(searchStr).replace(/^\?/, ''); if(!searchParamStr) return ''; if(key){ var reg=// var item = new RegExp('(^|&)' + key + '=.+?(?=&|$)').exec(searchParamStr)[0].replace('&', ''); searchArr.push(item); } else { searchArr = searchParamStr.split('&'); } for(var i = 0, len = searchArr.length; i < len; i++){ var itemArr = searchArr[i].split('='); searchObj[itemArr[0]] = itemArr[1]; } return key ? searchObj[key] : searchObj; } ~~~ ### 待补充。。。。 ## 参考资料 * [野狗技术文档：js常见技巧](https://mp.weixin.qq.com/s/4vfYRlBExSuyoq7ikSo_mg)