<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(二)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(二)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4039字，纯文字阅读大概需要6分钟。
内容图文
关于for-in循环
循环数据时, 强烈不推荐使用for-in循环.因为当Array对象被扩展后, 再用for-in循环遍历数据会导致逻辑上的错误, 举例说明:
var arr = [‘a‘, ‘b‘, ‘c‘];
// 下标遍历for(var i=0, len=arr.length; i<len; i++) {
console.info(typeof i); // number console.info(i);
}
// for-in遍历for(var i in arr) {
console.info(typeof i); // string console.info(i);
}
console.log(arr.length); // 3
此时, for-in遍历数组时, i的类型为string, 已不再是数组的下标, 而是作为数组对象的key出现的(Javascript中数组也是对象).
若在遍历前加上以下代码, 则for-in循环将出现逻辑上的错误
if(typeof Array.prototype.len === ‘undefined‘) {
Array.prototype.len = function() {
returnthis.length;
};
}
即给数组添加原型方法len()
console.log(arr.length); // 输出仍为3
但for-in循环却同时将len输出出来了, 这说明for-in确实是将Array当成一个Object来遍历的, len作为对象的一个属性自然也会被遍历出来.
总之, 我们可以不乱在原型上添加方法, 不能保证别人不会, 所以最好是不要使用for-in循环数组.
当使用for-in遍历一个对象时, 一般与hasOwnProperty()一起使用, hasOwnProperty()用于过滤原型属性或原型方法, 举例说明:
//
定义一个person对象, 包含两个属性和一个方法
var person = {
name: ‘张三‘,
age: 28,
say: function() {
// ... }
}
// 在Object上扩展一个方法sleep()if(typeof Object.prototype.sleep === ‘undefined‘) {
Object.prototype.sleep = function() {
// ... }
}
// 使用hasOwnProperty()的for-in循环for(var i in person) {
if(person.hasOwnProperty(i)) {
console.info(i);
}
}
/*
控制台打印结果:
name
age
say
*/// 不使用hasOwnProperty()的for-in循环for(var i in person) {
console.info(i);
}
/*
控制台打印结果:
name
age
say
sleep
*/
需要说明的是, 不使用hasOwnProperty()并没有错, 只是可能会对循环结果带来一些混乱, 如果自己的代码有足够信心, 可以不hawOwnProperty(), 还可以稍微提高循环速度.
不要增加内置的原型
给内置原型增加方法或属性是很强大的一个功能, 但正是由于它的强大, 往往会给维护带来巨大的成本. 此外, 如上面所述, 如果给扩展了内置原型, 在没有使用hasOwnProperty()的循环中会导致一些混乱.
如果, 一定要扩展原型, 那么要先检查自定义的属性或方法是否已经存在, 若不存在再进行扩展, 此外一定要用文档记录下来, 以便团队交流. 以下模式可以用来扩展原型:
if(typeof Object.prototype.myMethod === ‘undefined‘) {
Object.prototype.myMethod = function() {
// ... }
}
避免使用隐匿的类型转换
Javascript存在隐匿的类型转换, 比如fasle == 0, “” == 0这类的比较语句都回返回true, 在一定程度上会引起混淆, 类型不清.
所以建议在比较比较语句中使用===和!==比较数值和类型
避免使用eval()
第一句话”eval()是魔鬼”
一般提前编写好的代码是不需要使用eval()的, 如果代码是在运行过程中动态生成的, 可能需要使用eval()让其转换为Javascript代码, 但有更好的方法来代替eval(), 此类情况多数出现在处理ajax返回值时, 例如:
//
ajax请求返回一个字符串"name", 要给一个对象obj添加一个属性, 并以name作为属性名, ‘张三‘作为属性值
var property = "name";
var obj = {
age: 22
};
// 反模式, 不要使用
// eval(‘obj.‘ + property + ‘= "z3"‘);
// 推荐
obj[property] = ‘张三‘;
for(var i in obj) {
console.info(i);
}
使用eval()也包含一些隐患, 有可能会执行一些被篡改过的代码.
同时, setInterval()和setTimeout()的调用与eval()有类似的问题
//
反模式
setTimeout(“myFunc()”, 1000);
setTimeout(“myFunc(2, 5, 7)”, 1000);
// 推荐
setTimeout(myFunc, 1000);
setTimeout(function(){
myFunc(2, 5, 7);
}, 1000);
如果一定要使用eval(), 那么可以考虑是否可以用new Function()来代替eval().
因为使用new Function()代码将在一个局部函数空间中运行, 任何使用var定义的变量不会自动成为全局变量, 例如:
new Function("var p = 3; console.info(p);")(); // 3
console.info(p); // ReferenceError: p is not defined
eval("var p1 = 4; console.info(p1);"); // 4
console.info(p1); // 4
另一个防止自动成为全局变量的方法是将eval()封闭到一个立即执行函数中, 如:
(function(){ eval(‘var num = 11; console.info(num);‘); // 11})(); console.info(num); // ReferenceError: p is not defined
new Function()和eval()的另一个区别是, eval()会影响到作用域链, 而new Function()对局部变量的影响比较小.
eval()可以访问和修改它外部作用域的变量, 而new Function()不能. 例子:
(function(){ var num = 13; eval(‘var num = 20; console.info(num);‘); // 20 console.info(num); //20, 改变了num的值})(); (function(){ var num = 12; new Function(‘var num = 17; console.info(num);‘)(); // 17 console.info(num); // 12 })();
使用parseInt()的数值约定
这个约定主要是为了解决ECMAScript新旧版本不一致的问题,
在ECMAScript早期的版本中, 0开头的字符串会被当成一个八进制数, 在ECMAScript5中发生了改变, 所以在使用parseInt()方法时, 最好不要忽略第二个参数(进制参数),
例如在处理日期字符串时:
var month = ‘07‘,
date = ‘02‘;
month = parseInt(month, 10);
date = parseInt(date, 10);
另外, 如果是转换纯数字字符串, 例如‘09‘, 那么使用Number(‘09‘)会更效率一些,
如果是非纯数字字符串, 例如‘02 hello‘, 那么只有使用parseInt(‘02 hello‘)了, Number(‘02 hello‘)会返回NaN
编码约定
书中提到的编码约定, 都为了提高代码的可读性, 降低代码的维护成本,
包括缩进, 空间, 大括号, 命名规则, 空格的使用等.
其中, 要注意的一点是大括号的位置, 由于分号的插入机制, 会导致某些代码执行结果出人意料, 例如:
//
出人意料的返回结果
function
func() {
return
{
name: ‘鸣人‘
};
}
console.info(func()); // undefined;
// 以上写法相当于function func1() {
return undefined;
{
name: ‘鸣人‘
};
}
// 总之, 推荐将大括号放在前面语句的的同一行:function func3() {
return {
name: ‘鸣人‘
};
}
原文：http://www.cnblogs.com/lzj0616/p/4419759.html
内容总结
以上是互联网集市为您收集整理的<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(二)全部内容，希望文章能够帮你解决<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(二)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。