共享经典Javascript开发技巧
1。确保为第一次变量赋值使用var关键字
变量没有被声明,并且直接有价值,默认值是一个新的全局变量,尽可能避免使用全局变量。
2,使用而不是
=和!=运算符将在需要时自动转换数据类型!不,他们也会比较值和数据类型,这使它们更快于。
{ 10 } = 10 /是false
{ 10 } = 10 /是真的
10= 10 /是真的
10= 10 / false是false
{ = 0 /是真的
{ = 0 = / false是false
假真但是真是false是错误的。
false是false
3、不确定性、空,0、假,南的逻辑结果,和空字符串都是假的
在4年底,用分号
实际上,最好使用分号,忘记写什么也不做,在大多数情况下Javascript解释器会自动添加。
5。使用对象构造函数
功能人(firstName、lastName){
this.firstname =名;
this.lastname =姓;
}
Var Saad =新人(萨阿德)
6。使用类,实例构造函数,并仔细
类型:Javascript运算符是用来返回字符串形式的变量的原始类型。注意:空返回对象也会,和大多数的对象类型(数组、日期等)也将返回对象。
构造函数:一个内部原型属性,可以重写代码
instanceof:Javascript运算符将在原型链构造函数搜索,返回真,返回假
var arr = {
型ARR; / /返回对象
ARR是阵列 / /真的
/ / { }(arr.constructor);
7。使用自调用函数
函数在创建后直接执行。它通常被称为自调用匿名函数(自调用匿名函数)或直接调用函数表达式(立即调用函数表达式):
(函数(){())
这里放置的代码将自动执行。
});
(函数(a,b){)
var结果;
返回结果;
})(10,20)
8。对数组成员的随机访问
可变项目= { 12, 548,A,2, 5478,'foo ',8852,'doe ',2145, 119 };
无功randomitem =项目{ math.floor(Math.random()*项目。长度)};
9。获取指定范围内的随机数。
这个函数在生成测试的假数据时特别有用,例如在指定范围内的工资数。
复制代码如下:var x = math.floor(Math.random()*(最大-最小+ 1))+ min;
10。生成从0到指定值的数字数组。
var { } = numbersarray,max = 100;
对于(var i = 1;numbersarray.push(i++)<最大;); / /数= { 1,2,3…100 }
11。生成随机字母数字字符串
功能generaterandomalphanum(LEN){
无功rdmstring = ;
(为;rdmstring.length < len;rdmstring = Math.random(ToString)(36),Substr(2));
返回rdmstring.substr(0,Len);
}
12。无序数字序列
var数字= { 5, 458, 120,- 215, 228, 400,122205,- 85411 };
numbers.sort数=((){ return函数Math.random()0.5 });
数字数组将类似于{ 120, 5, 228,400, 458,- 215,- 85411, 122205 }。
在这里,我们使用内置数组排序函数的Javascript,和更好的方式是用特殊的代码实现(如Fisher Yates算法)。我们可以把这个讨论在StackOverflow。
13。字符串到空空间
# java,C,PHP和其他语言实现了一个特殊的字符串空间的功能,但没有Javascript。这样,可以通过以下代码对字符串对象函数使用微调函数。
string.prototype.trim =函数(){ return this.replace( / ^ + | + $ / g,);};
新的Javascript引擎已经有了一个本地实现。
14。除了数组之间
VaR array1 = { 12,foo
VaR array2 = {无名氏
Array.prototype.push.apply(array1,array2);
/ * 2 = { 12,foo,{名称乔},2458,DOE,555, 100 }。
15。对象被转换为数组。
复制代码代码如下:var argarray = array.prototype.slice.call(参数);
16。验证它是否是一个数字
功能isnumber(N){
返回!IsNaN(parseFloat(n))系统(N);
}
17。验证它是否是数组
功能ISArray(obj){
返回object.prototype.tostring.call(obj)={ }对象数组;
}
但如果toString()方法被重写,它将无法工作。下面的方法也可以用:
复制代码如下:Array.isArray(obj); / /它的一个新的阵列的方法
如果你不使用框架的浏览器,也可以使用实例,但是如果环境过于复杂,也犯了一个错误。
var myFrame. = document.createelement('iframe);
document.body.appendchild(myFrame.);
VaR MyArray =窗口。帧{窗口。帧。length-1 }。阵列;
var arr =新MyArray(A,B,10); / / {A,B,10 }
的MyArray /实例构造函数已经丢失,结果将是不正常的
构造函数不是跨帧共享。
数组是数组; / /假
18。获取数组中的最大值和最小值。
var数字= { 5, 458, 120,- 215, 228, 400,122205,- 85411 };
无功maxinnumbers = math.max.apply(数学、数字);
无功mininnumbers = math.min.apply(数学、数字);
本文中可以详细介绍Javascript如何获得数组的最大值和最小值。
19。空数组
VaR MyArray = { 12, 222, 1000 };
myarray.length = 0; / / MyArray将等于。
20。不要直接从数组中的删除或删除元素
如果直接使用数组元素的删除,它实际上不会删除它,只需将元素设置为未定义。
避免:
可变项目= { 12, 548,A,2, 5478,'foo ',8852,'doe ',2154, 119 };
items.length; / /返回11
删除项目{ 3 };返回true
items.length; / /返回11
项目的结果{ { 12, 548,A,未定义的* 1, 5478,富,8852,未定义的* 1,DOE,2154, 119 }。
并应:
可变项目= { 12, 548,A,2, 5478,'foo ',8852,'doe ',2154, 119 };
items.length; / /返回11
items.splice(3,1);
items.length; / /返回10
项目的结果{ 12 *,548,
删除对象的属性时,可以使用删除。
21。使用长度属性截断数组。
前一个示例用长度属性清除数组,它也可以用来截断数组。
VaR MyArray = { 12, 222, 1000,124, 98, 10 };
myarray.length = 4; / / MyArray将等于{ 12, 222, 1000,124 }。
同时,如果长度属性变大,数组的长度值将增加,而未定义则用于填充新元素。长度是可写属性。
myarray.length = 10; / /新的数组的长度是10
myarray.length MyArray { 1 }; / /未定义
22。使用逻辑和OR
var = 10;
DoSomething(foo = = 10); / /是的事情一样(foo = = 10)(做);
foo = = 5); / /做| |(事一样(Foo!= 5)(做);
逻辑也可以用来设置默认值,比如函数参数的默认值。
函数doSomething(arg1){
arg1 = arg1 10 | |; / / arg1将有10作为默认值如果不是已经设置
}
23。使map()函数方法到数据周期
VaR的平方= { }(1、2、3、4。地图功能(Val){)
返回空值;
});
正方形将等于 { 1, 4, 9,16 }。
24。保留指定的位数。
var = 2.443242342;
Num = num.tofixed(4); / /数将等于2.4432
注意,tofixec()返回一个字符串,不是一个数字。
25,浮点运算的问题
0.1 + 0.2 = 0.3 / false是false
9007199254740992 + 1 等于9007199254740992
9007199254740992 + 2 等于9007199254740994
为什么因为0.1加0.2等于0.3000000000000000.the一些Javascript是根据IEEE 754标准建造的,它是内部64位浮点十进制表示。可以看出Javascript中的数字是如何编码的。
你可以通过使用固定的解决这个问题()和精密()。
26,通过for循环检查对象的属性。
以下用法防止迭代进入对象的原型属性。
对于(对象中的var名称){
如果(object.hasownproperty(名字)){
一些有名字的事情
}
}
27,逗号运算符
var a=0;
var(=,++,99);
console.log(一); / /将等于1
console.log(B); / / B等于99
28。暂时存储用于计算和查询的变量。
在jQuery选择器中,整个DOM元素可以临时存储。
无功navright = document.queryselector(' #正确);
无功navleft = document.queryselector(' #左);
无功navup = document.queryselector(' #);
无功navdown = document.queryselector(' # down);
29。检查传入的参数需提前()
需(0 / 0); / /假
有限(foo); / /假
系统(10); / /真的
有限(10); / /真的
系统(定义); / /假
(有限); / /假
有限(空); / /真的,在这个特别的关注
30。避免在数组中使用负数索引
无功numbersarray = { 12345 };
var = numbersarray.indexof(foo); / /等于1
numbersarray.splice(,2); / /将返回{ 5 }
注意传递给剪接的索引参数不是负数,当负数为负数时,元素从数组的结尾被删除。
31。用JSON序列化和反序列化
无功的人= {姓名:'saad,年龄:26,部门:{编号:15,名称:RD} };
无功stringfromperson = json.stringify(人);
对stringfromperson / * {名字的结果:萨阿德
无功personfromstring = JSON.parse(stringfromperson);
对personfromstring /人和相同的对象的值。
32。不要使用eval()或函数的构造方法
eval()函数的开销和构造函数(功能consturctor)是大的,和每一个电话,Javascript引擎的源代码转换成可执行的代码。
VaR func1 =新的功能(功能码);
VaR func2 = eval(功能码);
33。避免使用()
使用与()可以向全局范围添加变量,因此如果有其他名称相同的名称,很容易混淆,二进制值将被覆盖。
34。不要在数组中使用
避免:
var总和= 0;
对于(VAR我arraynumbers){
总和= arraynumbers {我};
}
但:
var总和= 0;
对于(var i = 0,len = arraynumbers.length;我< len;i++){
总和= arraynumbers {我};
}
另一个优点是,i和莱恩的两个变量在for循环的第一个声明中,而这两个变量只会初始化一次,这比下面的要快。
对于(var i = 0;i < arraynumbers.length;i++)
35。使用函数而不是一个字符串,当通过setInterval和setTimeout()()
如果通过一系列的setTimeout()和setInterval(),他们将在一个类似eval转化,这必然要慢,所以不要使用:
('dosomethingperiodically setInterval()',1000);
('dosomethingafterfiveseconds setTimeout()',5000);
它是使用:
setInterval(dosomethingperiodically,1000);
setTimeout(dosomethingafterfiveseconds,5000);
36。使用开关/案例代替大量的如果
当判断有两个以上的分支时,交换机的使用情况是更快更优雅的,这更有利于代码的组织。当然,如果有超过10个分支,请不要使用开关/案例。
37。在交换机中使用数字间隔
事实上,也可以用这种方式编写开关中的案例条件:
功能getcatery(年龄){
无功catery = ;
开关(true){
案例isnan(年龄):
catery = 不是一个时代;
打破;
案例(年龄= 50):
catery =老;
打破;
案例(20岁):
catery =宝贝;
打破;
违约:
catery =年轻;
打破;
};
返回catery;
}
getcatery(5); / / 宝宝收益
38。以对象为原型
通过这种方式,可以将对象作为参数创建一个用作原型的新对象。
函数克隆(对象){
功能(oneshotconstructor){ };
oneshotconstructor.prototype =对象;
返回新的oneshotconstructor();
}
克隆(数组.原型);
39、html字段转换功能
功能escapehtml(文本){
变量替换=>、、};
返回text.replace( / { <>} / G函数(字符){
返回替换{字符};
});
}
40。不要在循环中使用最后的catch。
catch catch中的catch部分将在执行变量时分配一个异常,该变量将在运行时范围内嵌入到一个新变量中。
避免:
var对象= { 'foo ','bar},我;
为(i = 0,len = object.length;我< len;i++){
{试
抛出异常的东西
}
catch(e){
处理/异常
}
}
并应:
var对象= { 'foo ','bar},我;
{试
为(i = 0,len = object.length;我< len;i++){
抛出异常的东西
}
}
catch(e){
处理/异常
}
41。使用时注意xmlhttprequests设置超时时间
xmlhttprequests执行时,它将终止连接时,它是很长时间没有响应(如网络问题)。它可以通过setTimeout()。
新的XMLHttpRequest(XHR)var =;
xhr.onreadystatechange =函数(){
如果(this.readystate = = 4){
ClearTimeout(超时);
带有响应数据的某事
}
}
VaR超时= setTimeout()函数(){
(XHR。中止); / /调用错误回调
60 * 1000后超时};
Xhr.open(' ',网址,真的);
Xhr.send();
同时,需要注意的是,不多xmlhttprequests请求同时启动的重要。
42。处理WebSocket超时
通常,如果WebSocket连接被创建,如果在30秒内没有活动,服务器端将过程连接超时。防火墙也可以在单位时间内处理没有活动的连接。
为了防止这种情况发生,您可以每次都向服务器发送一条空消息。这个要求可以通过以下两个功能实现:一个是保持连接活动,另一个是结束状态。
VaR值= 0;
功能存活(){
var超时= 15000;
如果(websocket.readystate = = WebSocket。打开){
WebSocket.send();
}
值= setTimeout(KeepAlive,超时);
}
功能cancelkeepalive(){
如果(值){
canceltimeout(值);
}
}
keepalive()函数可以放在开放的结束()的WebSocket连接方法,并cancelkeepalive()放在关闭后结束()方法。
以上是分享javascript开发技巧,希望能对大家有所帮助。