Question

我不能为我的生活找出这两个代码块之间的区别：

var text = [];
$(".article-text p").each(function() {
    text.push( $(this).text() );
});

和

var text = $('.article-text p').map(function() {
    return $(this).text();
});

他们看起来像我们在the following page的控制台中测试时产生的确切输出相同。但是，第一个可以由JSON.stringify运行，而第二个不能。

抓取工具中的错误消息说

调用用户提供的'pageFunction'时出错：错误：TypeError：JSON.stringify无法序列化循环结构。

我在控制台中的错误消息说：

未捕获DOMException：阻止具有原始“http://yaledailynews.com”的帧访问跨源帧。在JSON.stringify（） at：1：6

当我比较两个对象时，它们看起来完全相同，只是第二个具有context属性。我删除了这个属性，但错误仍然存在。

Answer 1

来自jQuery.map

的文档

类似于数组的对象 - 具有.length属性和.length - 1索引值的对象 - 在传递给$.map()之前必须转换为实际数组。 jQuery库为此类转换提供了$.makeArray()。

由于$('.article-text p')将返回类似数组的集合（jQuery对象），因此必须在其上调用$.makeArray：

＆＃13;

function one() {
  var text = [];
  $(".test").each(function() {
    text.push($(this).text());
  });
  return text;
}

function two() {
  var text = $('.test').map(function() {
    return $(this).text();
  });
  return text;
}

console.log(one());
// use makeArray here
console.log($.makeArray(two()));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">A</div>
<div class="test">B</div>
<div class="test">C</div>

＆＃13;

文档也说

由于返回值是一个包含数组的jQuery对象，因此在结果上调用.get（）以使用基本数组非常常见。

＆＃13;

function one() {
  var text = [];
  $(".test").each(function() {
    text.push($(this).text());
  });
  return text;
}

function two() {
  var text = $('.test').map(function() {
    return $(this).text();
  }).get(); // <--- call get here
  return text;
}

console.log(one());
console.log(two());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">A</div>
<div class="test">B</div>
<div class="test">C</div>

＆＃13;

.map（）和.each（）

1 个答案: