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

扩展Array.prototype indexOf的背景与初衷

JavaScript原生Array对象并未提供indexOf方法，这导致在数组中查找特定元素索引时操作较为繁琐。为了提升调用便捷性，开发者通常通过原型链扩展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循环遍历数组引发的异常

然而，在某次使用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为何能避免这一问题？

浏览器JavaScript版本差异分析

查阅相关资料后得知：

JavaScript 1.6版本已原生支持Array.indexOf()，而Firefox 3.5版本已支持JavaScript 1.8，因此indexOf是其内置固有方法。

相比之下，IE浏览器，即使是IE8版本，仅支持到JavaScript 1.3标准。

因此，IE8将indexOf识别为“用户定义的属性”，而Firefox则视其为原生支持的固有属性。

这种解释是否完全准确？

为了验证，可将indexOf重命名为myIndexOf并再次测试，结果IE和Firefox均输出了myIndexOf，这证实了上述观点的正确性。

使用hasOwnProperty过滤非自身属性

由此引出新的问题：如果项目早已广泛使用扩展的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循环中加入判断即可解决问题。

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版本支持情况

查看浏览器对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>