js基础技巧
来源:互联网 发布:淘宝售后话术 编辑:程序博客网 时间:2024/06/03 10:49
1 – 使用===,而不是==
==(或!=)操作符在需要的时候会自动执行类型转换。===(或!==)操作不会执行任何转换。它将比较值和类型,而且在速度上也被认为优于==。
2 – typeof、instanceof和constructor
var arr = ["a", "b", "c"];typeof arr; // return "object"arr instanceof Array // truearr.constructor(); //[]
3 – 从数组中获取一个随机项
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];var randomItem = items[Math.floor(Math.random() * items.length)];
4 – 在特定范围内获取一个随机数
这个代码片段在你想要生成测试数据的时候非常有用,比如一个在最小最大值之间的一个随机薪水值。
var x = Math.floor(Math.random() * (max - min + 1)) + min;
5 – 生成一个随机的数字字母字符串
function getRandomAlphaNum(len) { var rdmString = ""; for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); }console.log(getRandomAlphaNum(6)); //cs7c8s
特意查了一下Math.random()生成0到1之间的随机数,number.toString(36)是将这个数字转换成36进制(0-9,a-z),最后substr去掉前面的“0.”字符串
6 – 在打乱一个数字数组
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] */
7 – 在Java、C#、PHP和很多其他语言中都有一个经典的 trim 函数,用来去除字符串中的空格符,而在JavaScript中并没有,所以我们需要在String对象上加上这个函数。
function trim(str){ //删除左右两端的空格 return str.replace(/(^\s+)|(\s+$)/g, ""); }
[去掉字符串的前后空格,不包括字符串内部空格]
8 – 附加(append)一个数组到另一个数组上
直接改变array1
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] */
返回值是一个新的数组,不改变原数组
var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"var arr2 = new Array(3)arr2[0] = "James"arr2[1] = "Adrew"arr2[2] = "Martin"document.write(arr.concat(arr2))//George,John,Thomas,James,Adrew,Martindocument.write(arr)//George,John,Thomas
9 – 将arguments(类数组)对象转换成一个数组
var argArray = Array.prototype.slice.call(arguments);
10 – 验证参数是否是数字(number)
function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n);}
11 – 验证参数是否是数组
Array.isArray(obj);
12 – 获取一个数字数组中的最大值或最小值
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];var maxInNumbers = Math.max.apply(Math, numbers);var minInNumbers = Math.min.apply(Math, numbers);
13 – 清空一个数组
var myArray = [12 , 222 , 1000 ];myArray.length = 0; // myArray will be equal to [].
14 – 使用 splice来删除一个数组中的项。
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];items.length; // return 11items.splice(3,1) ;items.length; // return 10/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,
15 – 使用逻辑 AND/OR 做条件判断
var foo = 10;foo == 10 && doSomething(); // 等价于 if (foo == 10) doSomething();foo == 5 || doSomething(); // 等价于 if (foo != 5) doSomething();
16 – 使用 map() 方法来遍历一个数组里的项
var squares = [1,2,3,4].map(function (val) { return val * val;});// squares will be equal to [1, 4, 9, 16]
17 – 四舍五入一个数字,保留N位小数
var num =2.443242342;num = num.toFixed(4); // num will be equal to 2.4432
18 – 避免在遍历一个对象属性的时候访问原型的属性for-in
for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name }}
19 – 缓存需要计算和查询(calculation or querying)的变量
20 – 基于JSON的序列化和反序列化
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };var stringFromPerson = JSON.stringify(person);/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */var personFromString = JSON.parse(stringFromPerson);/* personFromString is equal to person object */
21 – 避免使用 eval() 和 Function 构造函数
使用 eval 和 Function 构造函数是非常昂贵的操作,因为每次他们都会调用脚本引擎将源代码转换成可执行代码。
21 – 避免使用 for-in 来遍历一个数组
避免使用这样的方式:
var sum = 0;for (var i in arrayNumbers) { sum += arrayNumbers[i];}
更好的方式是:
var sum = 0;for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum += arrayNumbers[i];}
附加的好处是,i 和 len 两个变量的取值都只执行了一次,会比下面的方式更高效:
for (var i = 0; i < arrayNumbers.length; i++)
22 – 使用 switch/case 语句,而不是一长串的 if/else
在判断情况大于2种的时候,使用 switch/case 更高效,而且更优雅(更易于组织代码)。但在判断的情况超过10种的时候不要使用 switch/case
function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category;}getCategory(5); // will return "Baby"
【译者注:一般对于数值范围的判断,用 if/else 会比较合适。 switch/case 更适合对确定数值的判断】
23 – 为 XMLHttpRequests 设置超时。
var xhr = new XMLHttpRequest ();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();
24 – 原始运算符始终比函数调用要高效
使用
var min = a < b ? a b;A[A.length] = v;
不使用
var min = Math.min(a,b);A.push(v);
原作者是45条技巧,我节选了对我触动较大的20多条,点击去往原作者页面
- js基础技巧
- js基础学习,小技巧
- js小技巧 转 js基础嘘唏
- js基础-JavaScript开发技巧总结
- 前端js面试技巧(1)——js基础部分
- JS技巧
- js技巧
- js 技巧
- JS技巧
- js技巧
- js技巧
- JS技巧
- js技巧
- js 技巧
- js技巧
- Js技巧
- js技巧
- JS技巧
- Gradle-gradlew
- Spring Batch 核心概念 2
- 利用Hog特征和SVM分类器进行行人检测
- Access denied for user 'root' @'localhost' (using password: YES)
- 2017.07.20工作日记
- js基础技巧
- 比特币初了解
- 归并排序算法原理分析与代码实现【图解】
- vsftp 配置
- JVM GC的内存结构:Young Generation(Eden,from,to)、Old Generation、Permanent Generation
- NOIP模拟 table 动态规划
- Tomcat学习总结(5)——Tomcat多实例冗余部署
- android 渲染机制简介
- nodejs 调用阿里云短信