为JS扩展Array.prototype.indexOf引发的问题及解决办法


Posted in Javascript onJanuary 21, 2015

Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,为了调用方便,于是通过prototype原型扩展了Array.prototype.indexOf(),这样用起来就比较方便了。但是这个自定义的indexOf在对数组进行遍历的时候却出现了问题。

Array.prototype.indexOf = function(item) {  

for (var i = 0; i < this.length; i++) {  

if (this[i] == item)  

return i;  

}  

return -1;  

}

用的时候直接

var arr=[1,2,3,4,5];  

var index=arr.indexOf(1); //index==0

扩展了以后,用起来很爽很方便,一片和谐景象...

但是某次是遍历数组元素的时候,使用for..in..循环,引发了其他的问题,打破了这个和谐的氛围。

var a=["张飞","关羽","刘备","吕布"];  

for(var p in a){  

  document.write(p+"="+a[p]+"<br/>");  

}

本来想输出这四个人的名字,结果输出的是什么呢?

输出的居然是:

//0=张飞  

//1=关羽  

//2=刘备  

//3=吕布  

//indexOf=function(item) { for (var i = 0; i < this.length; i++) { if (this[i] == item) return i; } return -1; } 

除了把名字打出来以外,还额外输出了自己扩展的方法indexOf,但是令人疯狂的是,firefox却是“正常”的,只有四个人的人名,为什么会这样?

输出indexOf,自己扩展的,可以理解,毕竟for..in是遍历一个对象的所有用户定义的属性或者一个数组的所有元素。

那么firefox为什么不会?

后来查了资料才明白,

Array在javascript1.6版本已经支持Array.indexOf(),而我用的firefox是3.5版本,已经支持javascript1.8了,indexOf是其Array本身固有的方法了。

而IE,即使我用的是IE8,也才支持到javascript1.3版本。

所以IE8认为indexOf是“用户定义的属性”,而firefox认为是自己原生支持的固有的属性。

真的是这样吗?

做个实验,把indexOf更名为myIndexOf,再试试,结果IE和firefox都输出myIndexOf,证明前面的观点是正确。

那么又来了个问题,我扩展indexOf很久了,现在不少项目的代码都已经在使用这个方法,而现在我非要使用for..in输出数组本身的元素,不要其他我自己扩展到俄方法,怎么办?

好在javascript提供了hasOwnProperty方法。

看一下其描述:

Every object descended from Object inherits the hasOwnProperty method. This method can be used to determine whether an object has the specified property as a direct property of that object; unlike the in operator, this method does not check down the object's prototype chain

看描述,就是我们想要的东西。

在for...in..里做个 判断就OK了

if(a.hasOwnProperty(p)){  

            document.write(p+"="+a[p]+"<br/>");  

        }

另外,附上hasOwnProperty用法示例,来源于互联网:

function Book(title, author) {  

   this.title = title;  

   this.author = author;  

  }  

   Book.prototype.price = 9.99;  

   Object.prototype.copyright = "herongyang.com";  

   var myBook = new Book("JavaScript Tutorials", "Herong Yang");  

   // Dumping built-in properties at the base prototype level  

   document.writeln("/nObject.prototype's built-in properties:");  

   dumpProperty(Object.prototype, "constructor");  

   dumpProperty(Object.prototype, "hasOwnProperty");  

   dumpProperty(Object.prototype, "isPrototypeOf");  

   dumpProperty(Object.prototype, "toString");  

   dumpProperty(Object.prototype, "valueOf");  

   dumpProperty(Object.prototype, "copyright");  

   // Dumping built-in properties at the my prototype level  

   document.writeln("/n==================/nBook.prototype's built-in properties:");  

   dumpProperty(Book.prototype, "constructor");  

   dumpProperty(Book.prototype, "hasOwnProperty");  

   dumpProperty(Book.prototype, "isPrototypeOf");  

   dumpProperty(Book.prototype, "toString");  

   dumpProperty(Book.prototype, "valueOf");  

   dumpProperty(Book.prototype, "copyright");  

   // Dumping built-in properties at the object level  

   document.writeln("/n==================/nmyBook's built-in properties:");  

   dumpProperty(myBook, "constructor");  

   dumpProperty(myBook, "hasOwnProperty");  

   dumpProperty(myBook, "isPrototypeOf");  

   dumpProperty(myBook, "toString");  

   dumpProperty(myBook, "valueOf");  

   dumpProperty(myBook, "copyright");  

function dumpProperty(object, property) {  

   var inheritance;   

   if (object.hasOwnProperty(property))   

      inheritance = "Local";  

   else  

      inheritance = "Inherited";  

   document.writeln(property+": "+inheritance+": " 

      +object[property]);  

}

查看浏览器支持javascript到哪个版本:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

  <title>浏览器的JavaScript版本支持测试</title>  

 </head>  

 <body>  

   <script language="JavaScript">    

   //document.write("您的浏览器类型:"+navigator.appName+"<br/>");  

   //document.write("浏览器版本:"+navigator.appVersion+"<br/>");  

      //支持JavaScript1.0的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.0<br/>');    

  </script>    

  <script language="JavaScript1.1">    

      //支持JavaScript1.1的浏览器才能够执行该脚本   

      document.write('该浏览器支持JavaScript1.1<br/>');    

  </script>    

  <script language="JavaScript1.2">    

      //支持JavaScript1.2的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.2<br/>');    

  </script>    

  <script language="JavaScript1.3">    

      //支持JavaScript1.3的浏览器才能够执行该脚本   

      document.write('该浏览器支持JavaScript1.3<br/>');    

  </script>    

  <script language="JavaScript1.4">    

      //支持JavaScript1.4的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.4<br/>');    

  </script>    

  <script language="JavaScript1.5">    

      //支持JavaScript1.5的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.5<br/>');    

  </script>  

  <script language="JavaScript1.6">    

      //支持JavaScript1.6的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.6<br/>');    

  </script>  

  <script   language="JavaScript1.7">    

      //支持JavaScript1.7的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.7<br/>');    

  </script>  

  <script language="JavaScript1.8">    

      //支持JavaScript 1.8的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.8<br/>');    

  </script>  

  <script language="JavaScript1.9">    

      //支持JavaScript1.9的浏览器才能够执行该脚本    

      document.write('该浏览器支持JavaScript1.9<br/>');    

  </script>   

 </body>  

</html>
Javascript 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
node.js实现快速截图
Aug 27 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 Javascript
JavaScript的内存释放问题详解
Jan 21 #Javascript
script标签属性用type还是language
Jan 21 #Javascript
JS交换变量的方法
Jan 21 #Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 #Javascript
js实现DOM走马灯特效的方法
Jan 21 #Javascript
浅谈javascript 迭代方法
Jan 21 #Javascript
js实现用户注册协议倒计时的方法
Jan 21 #Javascript
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python监控文件或目录变化
2016/06/07 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python内置数据类型之列表操作
2018/11/12 Python
对python中return与yield的区别详解
2020/03/12 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
final, finally, finalize的区别
2012/03/01 面试题
法学毕业生自荐信
2013/11/13 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
国防教育标语
2014/10/08 职场文书
通报表扬范文
2015/01/17 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Golang中channel的原理解读(推荐)
2021/10/16 Golang