解决 JavaScript 扩展数组对象 引发的for in循环问题

注：参考mdn

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of，

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in

 

相同问题参考：https://www.cnblogs.com/dtdxrk/p/3740896.html

问题描述：

为了便于使用，对 数组对象进行扩展，如下所示：

Array.prototype.remove = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }

};

结果引发 for in 循环问题。

 

问题复现：

问题复现步骤如下所示，使用浏览器开发者工具进行测试，

输入：

for(let x in ["a","b"]){console.log(x)}
0
1

再输入：

Array.prototype.remove = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }

};

输入：

for(let x in ["a","b"]){console.log(x)}
0
1
remove

此处看到，for in 循环打印结果并非我们想要的。

问题复现步骤截图如下

 

 

 

搜解决方案，大多是说，将for in 替换为普通for循环  = =！......

但是当发现这个问题时，项目里已经写了一百多个 for in了，改起来有点.....

 

问题解决：

还好同事给力，通过如下格式扩展数组对象，可以避免 影响 for in 循环。

Object.defineProperty(Array.prototype, 'remove', {
       enumerable: false,
       value: function(val) {
         for (var i = 0; i < this.length; i++) {
             if (this[i] == val) {
                 this.splice(i, 1);
                 break;
             }
         }
       }
     });

 

问题解决步骤如下所示，使用浏览器开发者工具进行测试，

 

 

 扩展方法可以正常使用，for in循环也没有受到影响(注： 仅浏览器开发者工具测试，项目截止写这篇文章记录时，还未进行测试)

 

 以上内容可以补充参考《JavaScript权威指南》第六版中文，P130 枚举属性  P135 Object.defineProperty()