Unterschiedliche Ausgabe von .map() und .each()

Question

Ich kann nicht für das Leben von mir, den Unterschied zwischen diesen beiden Blöcken von Code herauszufinden:

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

Und

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

Sie schauen für mich, wie sie die gleiche genaue Ausgabe produzieren, wenn sie in der Konsole auf the following page geprüft werden. Der erste kann jedoch von JSON.stringify ausgeführt werden, und der zweite nicht.

Meine Fehlermeldung in dem Crawler sagt

Error invoking user-provided 'pageFunction': Error: TypeError: JSON.stringify cannot serialize cyclic structures.

Meine Fehlermeldung in der Konsole sagt:

Uncaught DOMException: Blocked a frame with origin " http://yaledailynews.com " from accessing a cross-origin frame. at JSON.stringify() at :1:6

Wenn ich die zwei Objekte zu vergleichen, sie sehen genau gleich aus, mit der Ausnahme, dass der zweite hat eine context Eigenschaft. Ich habe diese Eigenschaft gelöscht, aber die Fehler bleiben bestehen.

Answer 1

Aus der Dokumentation für jQuery.map

Array-like objects — those with a .length property and a value on the .length - 1 index — must be converted to actual arrays before being passed to $.map() . The jQuery library provides $.makeArray() for such conversions.

Seit $('.article-text p') wird ein Array-ähnliche Sammlung (von jQuery-Objekte) zurückkehren, Sie $.makeArray auf sie rufen müssen:

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()));

<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>

Docs auch sagen

As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array.

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());

<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>