對象包含空值時的IE8對象預期錯誤

Question

我正在使用一個小的多邊形填充，以使Object.key可用於IE8。 當我的對象包含所有值時，一切似乎都工作正常。 但是，當我在對象中具有空值時，會收到有關“預期對象”的錯誤。 我不確定為什么使用null會很重要。 我的代碼如下：

  var data = [{
     x: Date.UTC(2014, 8, 1),
     y: 730,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2014, 9, 1),
     y: 742,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2014, 10, 1),
     y: 746,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2014, 11, 1),
     y: null
  }, {
     x: Date.UTC(2015, 0, 1),
     y: 737,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2015, 1, 1),
     y: 751,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2015, 2, 1),
     y: 765,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2015, 3, 1),
     y: 766,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2015, 4, 1),
     y: 757,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2015, 5, 1),
     y: 750,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2015, 6, 1),
     y: 748,
     pf: ["001", "002"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }, {
     x: Date.UTC(2015, 7, 1),
     y: 723,
     pf: ["001", "003"],
     nf: ["001", "002"],
     t: ["001", "002"],
     im:["001"]
  }]


  var pfMap = {
     "001": {
        "sd": "HI",
        "ld": "By"
     },
     "002": {
        "sd": "HI",
        "ld": "By"
     }
  }

  var nfMap = {
     "001": {
        "sd": "HI",
        "ld": "By"
     }
  }

  var tMap = {
     "001": "Hi",
     "002": "by"
  }

  var imMap={
      "001":"HI"
  }

  // Shim added to aid in IE8

  if (!Object.keys) {
    Object.keys = (function() {
      'use strict';
      var hasOwnProperty = Object.prototype.hasOwnProperty,
          hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
          dontEnums = [
            'toString',
            'toLocaleString',
            'valueOf',
            'hasOwnProperty',
            'isPrototypeOf',
            'propertyIsEnumerable',
            'constructor'
          ],
          dontEnumsLength = dontEnums.length;

      return function(obj) {
        if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
          throw new TypeError('Object.keys called on non-object');
        }

        var result = [], prop, i;

        for (prop in obj) {
          if (hasOwnProperty.call(obj, prop)) {
            result.push(prop);
          }
        }

        if (hasDontEnumBug) {
          for (i = 0; i < dontEnumsLength; i++) {
            if (hasOwnProperty.call(obj, dontEnums[i])) {
              result.push(dontEnums[i]);
            }
          }
        }
        return result;
      };
    }());
  }

  //recursion

  function traverseData(data, elementName) {
     var keys = Object.keys(data);
     for (var i = 0; i < keys.length; ++i) {
        if (Object.prototype.toString.call(data[keys[i]]) == "[object Object]" || Object.prototype.toString.call(data[keys[i]]) == "[object Array]") {
           traverseData(data[keys[i]], keys[i]);
        } else {
           if (elementName != null && window[elementName + "Map"]) {
              data[keys[i]] = window[elementName + "Map"][data[keys[i]]];
           }

        }

     }

   }

 traverseData(data, "data");
 var end = data;

如您所見，這是一個簡單的遞歸，我正在構建一個新的圖表對象。 如果您在數據對象上注意到第4個條目的y值設置為null。 如果我用一個數字填寫，一切都會按預期進行。 但是，如果將其保留為null，則會收到錯誤消息。 知道為什么嗎？

編輯：問題所在的行在polyfill中引發錯誤。 我在方塊打擊中評論了它

        if (hasDontEnumBug) {
          for (i = 0; i < dontEnumsLength; i++) {
            if (hasOwnProperty.call(obj, dontEnums[i])) { //  Throws error here
              result.push(dontEnums[i]);
            }
          }
        }

Answer 1

首先，用於檢測null值的邏輯存在問題：

if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
  throw new TypeError('Object.keys called on non-object');
}

如果obj為null ，則typeof obj將為"object" 。

嘗試以下方法：

if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null)

現在，您將獲得Object.keys called on non-object錯誤時Object.keys called on non-object的自定義Object.keys called on non-object 。

此null是由於

Object.prototype.toString.call(data[keys[i]]) == "[object Object]"

根據ECMAScript 5， Object.prototype.toString.call(null)必須返回"[object Null]" 。 但是在舊的瀏覽器上，它可能會生成"[object Object]" 。

相反，您可以使用

if(typeof data[keys[i]]=== 'object' && data[keys[i]])