Javascript 对象和 Internet Explorer

Question

我有这个代码:

 jsonObj = [];
 $("#test").find('.data').each(function() {

    var description = $(this).find('.description').val();
    var food = $(this).find('.food').val();

    item = {}
    item ["description"] = description;
    item ["food"] = food;

    jsonObj.push(item);
});

Internet Explorer 11 插入空/空值。当然，它在 chrome Firefox 甚至 Edge 中都能很好地工作

Answer 1

我可以使用您的代码复制该问题 in this fiddle在 IE11 中。

问题是您尚未声明 item，因此您使用的是全局 item(感谢 The Horror of Implicit Globals ¹)，它在 IE11 中预定义为 native 函数，您无法覆盖或添加属性( this one ，根据 this page )。它在其他浏览器中不是预定义的(或者是可重写的)。

这里的教训是:声明变量。 :-) 如果您这样做，它也适用于 IE11 ( updated fiddle ):

var jsonObj = []; // ***
 $("#test").find('.data').each(function() {

    var description = $(this).find('.description').val();
    var food = $(this).find('.food').val();

    var item = {}  // ***
    item ["description"] = description;
    item ["food"] = food;

    jsonObj.push(item);
});
$("<pre>").text("Result: " + JSON.stringify(jsonObj, null, 2)).appendTo(document.body);

<div id="test">
  <div class="data">
    <input type="text" class="description" value="description1">
    <input type="text" class="food" value="food1">
  </div>
  <div class="data">
    <input type="text" class="description" value="description2">
    <input type="text" class="food" value="food2">
  </div>
  <div class="data">
    <input type="text" class="description" value="description3">
    <input type="text" class="food" value="food3">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<小时/>

¹这是我贫血的小博客上的一篇文章。