面试题：JavaScript中数组元素添加删除兼容性优化之基础考察

Question

在JavaScript中，我们常用push、pop、shift、unshift方法对数组进行元素的添加和删除操作。请阐述在不同浏览器环境下，这些方法可能会遇到哪些兼容性问题，并说明如何进行简单的兼容性优化。

Answer 1

兼容性问题

1. IE8及以下：虽然这些方法在IE8及以下也存在，但对于push、pop、shift、unshift方法，如果数组对象是宿主对象（由浏览器提供的非原生JavaScript对象），可能会出现一些意外行为。例如，当操作某些特殊的类数组对象（如arguments对象，在IE8及以下，arguments对象不是一个真正的数组，只是类似数组）时，使用这些方法可能会报错或达不到预期效果。

兼容性优化

1. 针对类数组对象转数组：
   • 可以使用Array.prototype.slice.call方法将类数组对象转换为真正的数组，然后再使用push、pop、shift、unshift方法。例如：

   function test() {
       var arrLike = arguments;
       var realArr = Array.prototype.slice.call(arrLike);
       realArr.push('new element');
       return realArr;
   }
   

2. 检测环境：
   • 在使用这些方法之前，可以先检测当前环境是否支持这些方法。虽然现代浏览器基本都支持，但对于老旧环境（如IE8及以下），可以通过以下方式检测：

   if (!Array.prototype.push) {
       Array.prototype.push = function() {
           for (var i = 0; i < arguments.length; i++) {
               this[this.length] = arguments[i];
           }
           return this.length;
       };
   }
   if (!Array.prototype.pop) {
       Array.prototype.pop = function() {
           if (this.length === 0) {
               return undefined;
           }
           var last = this[this.length - 1];
           this.length = this.length - 1;
           return last;
       };
   }
   if (!Array.prototype.shift) {
       Array.prototype.shift = function() {
           if (this.length === 0) {
               return undefined;
           }
           var first = this[0];
           for (var i = 1; i < this.length; i++) {
               this[i - 1] = this[i];
           }
           this.length = this.length - 1;
           return first;
       };
   }
   if (!Array.prototype.unshift) {
       Array.prototype.unshift = function() {
           for (var i = this.length - 1; i >= 0; i--) {
               this[i + arguments.length] = this[i];
           }
           for (var j = 0; j < arguments.length; j++) {
               this[j] = arguments[j];
           }
           this.length = this.length + arguments.length;
           return this.length;
       };
   }
   

   • 这样即使在不支持这些方法的环境中，也能通过自定义的方法实现相应功能。