45个JavaScript小技巧
原文地址 http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/
这篇文章的质量个人感觉一般(有些甚至有些无厘头,比如第五点,构造函数的使用,直接被我去掉了),建议过一遍就好。详细的翻译版本可以参考 JavaScript奇技淫巧45招
声明变量时别忘记
var
相等比较请用
===
而不是==
undefined
、null
、0、false
、NaN
、''
(空字符串)都是假值行末加封号
- 小心使用
typeof
、instanceof
以及constructor
IIFE。 参考 (译)详解javascript立即执行函数表达式(IIFE)
获取数组的任一元素
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)];
获取某一范围内的任一数值
var x = Math.floor(Math.random() * (max - min + 1)) + min;
生成 0~max 的数组 ([0, 1, 2 ... max])
var a = [], max = 100; for (var i = 0; a.push(i++) <= max; );
生成任意长度字符串(字符包括 a-z 0-9)
function generateRandomAlphaNum(len) { var rdmString = ""; for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); }
数组乱序
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; numbers = numbers.sort(function(){ return Math.random() - 0.5});
有一个比 sort 更好的办法(Fisher-Yates shuffle),具体可以参考 discuss
string trim
String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};
在一个数组后附加一个数组
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 argArray = Array.prototype.slice.call(arguments);
判断数字
function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); }
判断数组 see Javascript中判断数组的正确姿势
获取数组最值
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers);
清空数组
var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to [].
删除数组元素请不要用 delete,而是用 splice
截取数组
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
短路运算符
用 map() 遍历元素
小数保留(注意,toFixed 方法返回 string 值)
var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432
浮点数问题
0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 9007199254740992 9007199254740992 + 2 // is equal to 9007199254740994
用 for-in 检查对象属性
for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } }
逗号运算符
var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99
缓存数据(避免查询相同 DOM 多次)
var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');
使用 isFinite() 方法前先检查参数
isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undefined); // false isFinite(); // false isFinite(null); // true !!!
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 */
避免使用 eval() 和 Function() 构造函数 。为了避免双重求值,see 高性能JavaScript 编程实践
避免使用 with
避免用 for-in 遍历数组元素
setInterval() setTimeout() 的参数请使用函数,而不是字符串。避免双重求值,同上。
使用 switch-case 而不是一长串的 if-else。这点有待考证,The Good Part 中说要尽量不使用 switch-case 语句。
HTML 实体编码
function escapeHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", """: """}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); }
避免在循环中使用 try-catch-finally
这样写是不好的: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 }
AJAX 设置请求超时(setTimeout 设置请求超时中止 AJAX)
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();
WebSocket 设置超时
尽量使用原生的 JavaScript。 Use VanillaJS
JSLint
JavaScript is awesome
45个JavaScript小技巧的更多相关文章
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
- 11个教程中不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...
- 常用的一些javascript小技巧
(转载)常用的一些javascript小技巧: http://bbs.blueidea.com/thread-2201069-1-1.html
- 12个十分实用的JavaScript小技巧
12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...
- javascript小技巧-js小技巧收集(转)
本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...
- 12个非常有用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 8个Javascript小技巧
1. 使用 + 字符可以转换成数字 比如要把一个字符串数字转换成数字,你可能会这样做: var one = '1'; var two = '2'; var numberOne = Number(one ...
随机推荐
- Asp.net MVC Razor模板引擎技巧分享
Razor是Asp.net MVC中新的默认模板类型, 语法简单易用.这篇文章不涉及Razor的语法,主要介绍Razor的一些在MVC项目中的使用技巧,以及脱离MVC环境下,如何使用Razor. 阅读 ...
- 关于tempdb的一些注意事项
由于数据库的文件的位置对于I/O性能如此重要,以至于在创建主数据文件的文职时,需要考虑tempdb性能对系统性的影响,因为它是最动态的数据库,速度还需要最快. 组成:有主数据文件和日志文件组成.从sq ...
- tcp选项TCP_DEFER_ACCEPT
tcp选项TCP_DEFER_ACCEPT http://blog.chinaunix.net/uid-23207633-id-274317.html 之前在项目测试的时候,如果第三次握手发完裸ack ...
- 修改TFS客户端的工作区类型
TFS系统存在两种工作区类型:"本地"和"服务器".默认情况下,用户使用本地工作区实现代码管理. 但是在用户端代码文件特别多(超过10万个文件)时,由于每次启 ...
- [麦先生]TP3.2之微信开发那点事[基础篇](网页授权开发之小Demo)
用户à 点击按钮进入授权页面并确认授权à 服务器返回code给开发者à 利用code,APPID,APPsecret组合数据请求API获取access_token和openidà 利用access_t ...
- RecycleView + CardView 控件简析
今天使用了V7包加入的RecycleView 和 CardView,写篇简析. 先上效果图: 原理图: 这是RecycleView的工作原理: 1.LayoutManager用来处理RecycleVi ...
- 大一上学期的一点小疑惑,代码验证ok
#include<iostream> using namespace std; class test { int *p; int pn; public: test(int n) { p = ...
- hdu1251 统计难题
地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=1251 题目: 统计难题 Time Limit: 4000/2000 MS (Java/Othe ...
- Codevs1378选课[树形DP|两种做法(多叉转二叉|树形DP+分组背包)---(▼皿▼#)----^___^]
题目描述 Description 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修 ...
- Unity Camera的两种模式
http://www.cnblogs.com/zhaoqingqing/p/3302484.html