踩坑之为数组原型扩展方法

首先来看一段神奇的代码

Array.prototype.remove = function(item){    var idx = this.indexOf(item);    if(idx >= 0){        return this.splice(idx,1);    }    return null;}var arr = [1,3,5,2,4];console.log(arr.remove(3),arr);for(var i in arr){    if(typeof arr[i] === 'number'){        console.log(arr[i]);    }    else{        console.log([i,'什么鬼']);    }}

结果：

[ 3 ] [ 1, 5, 2, 4 ]
1
5
2
4
[ ‘remove’, ‘什么鬼’ ]

没错啊 是吧 为啥最后一个元素是一个remove方法呢，得不到我们预期的结果啊，用原型对象来扩展方法后用for-in遍历会出现这种坑。一般来说for in是用来遍历对象属性的，而数组还是要用for来遍历。所以经过修改我试着采用ES5中的defineProperty来实现这个效果。代码如下：

Object.defineProperty(Array.prototype,'remove',    {value:function(item){    var idx = this.indexOf(item);    if(idx >= 0){        return this.splice(idx,1);    }    return null;}});var arr = [1,3,5,2,4];console.log(arr.remove(3),arr);for(var i in arr){    if(typeof arr[i] === 'number'){        console.log(arr[i]);    }    else{        console.log([i,'什么鬼']);    }}

结果：

[ 3 ] [ 1, 5, 2, 4 ]
1
5
2
4

出现这个情况的原因我觉得是remove作为一个属性方法赋值给了数组，之后在用for-in遍历时会将这个属性输出，所以以后为了避免出现这个坑，还是用defineProperty好点。