So erhalten Sie die erste N Anzahl von Elementen aus einem Array

384

Ich arbeite mit Javascript (ES6) / FaceBook und versuche, die ersten 3 Elemente eines Arrays zu erhalten, deren Größe variiert. Ich würde gerne das Äquivalent von Linq nehmen (n).

In meiner Jsx-Datei habe ich Folgendes:

var items = list.map(i => {
  return (
    <myview item={i} key={i.id} />
  );
});

Dann, um die ersten 3 Gegenstände zu bekommen, habe ich versucht

  var map = new Map(list);
    map.size = 3;
    var items = map(i => {
      return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />);
    });

Dies hat nicht funktioniert, da die Karte keine festgelegte Funktion hat.

Können Sie bitte helfen?

javascript reactjs user1526912
quelle
4
Vielleicht verstehe ich das Problem falsch, aber warum nicht so etwas verwenden list.slice(0, 3);und es dann wiederholen?
Jesse Kernaghan
Warum möchten Sie die Karte verwenden? Wenn ich Ihre Anforderung richtig verstehe, können Sie Slice verwenden, um die ersten n Elemente zu übernehmen.
Abhishek Jain
Wenn der Lehrer sagte, er solle die Karte benutzen? :) Es tut mir leid, wenn dies eine legitime Frage ist, aber es fühlte sich einfach wie eine Hausaufgabe an.
Diynevala
Bitte erwägen Sie, die akzeptierte Antwort in die zu ändern, die sich für die Öffentlichkeit als nützlicher erwiesen hat
Brian Webster,

Antworten:

401

Ich glaube, was Sie suchen, ist: 

// ...inside the render() function

var size = 3;
var items = list.slice(0, size).map(i => {
    return <myview item={i} key={i.id} />
}

return (
  <div>
    {items}
  </div>   
)
Patrick Shaughnessy
quelle
620

nVerwenden Sie, um die ersten Elemente eines Arrays abzurufen

array.slice(0, n);
Oriol
quelle
58
Beachten Sie, dass die sliceFunktion für Arrays eine flache Kopie des Arrays zurückgibt und das ursprüngliche Array nicht ändert. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Danny Harding
30

Dies mag überraschend sein, aber die lengthEigenschaft eines Arrays wird nicht nur zum Abrufen der Anzahl der Array-Elemente verwendet, sondern ist auch beschreibbar und kann zum Festlegen der MDN-Linklänge des Arrays verwendet werden . Dadurch wird das Array mutiert.

Wenn das aktuelle Array nicht mehr benötigt wird und Sie sich nicht um Unveränderlichkeit kümmern oder keinen Speicher zuweisen möchten, dh für ein Spiel, ist der schnellste Weg

arr.length = n

ein Array leeren

arr.length = 0
Pawel
quelle
Bist du sicher, dass dies schneller ist als arr = []?
GrayedFox
3
Der Vorteil hierbei ist die Vermeidung der Speicherzuweisung. Das Initialisieren neuer Objekte zur Laufzeit, d. H. Für Spiele, löst Garbage Collector und Jank aus.
Pawel
Erwähnenswert ist, dass dadurch das Array mutiert wird, wobei Slice eine flache Kopie zurückgibt. Dies wird zu einem großen Unterschied, wenn Sie die Elemente verwenden müssen, die Sie gerade dauerhaft abgeschnitten haben.
Ynot
1
@Nicht ok, ich werde es ein bisschen offensichtlicher machen
Pawel
4
Dies wird auch das Array erweitern, wenn es kleiner als N
Oldrich Svec
13

Versuchen Sie dies nicht mit einer Kartenfunktion. Die Kartenfunktion sollte verwendet werden, um Werte von einer Sache zur anderen abzubilden. Wenn die Anzahl der Ein- und Ausgänge übereinstimmt.

Verwenden Sie in diesem Fall die Filterfunktion, die auch für das Array verfügbar ist. Die Filterfunktion wird verwendet, wenn Sie selektiv Werte für bestimmte Kriterien verwenden möchten. Dann können Sie Ihren Code wie schreiben

var items = list
             .filter((i, index) => (index < 3))
             .map((i, index) => {
                   return (
                     <myview item={i} key={i.id} />
                   );
              });
Sandeep
quelle
1
Sie sind insgesamt korrekt, aber semantisch sollten Sie Filter verwenden, um zuerst die Menge der Elemente herauszufiltern und dann die gefilterte Menge abzubilden, wenn Sie diesen Ansatz wählen.
Chris
8
Die Filterfunktion würde alle Elemente im Array durchlaufen, während das Slice dies nicht tun würde. Daher ist es in Bezug auf die Leistung besser, Slice zu verwenden, oder?
elQueFaltaba
11

Sie können mithilfe indexeines Arrays filtern .

var months = ['Jan', 'March', 'April', 'June'];
months = months.filter((month,idx) => idx < 2)
console.log(months);
Erweitern Sie das Snippet

Freddy
quelle
2
.filterallein ist keine gute Wahl, zumindest nicht, wenn das Eingabearray lang sein könnte. .filterDurchläuft jedes Element des Arrays und überprüft seinen Zustand. .slicewürde dies nicht tun, sondern nur die ersten n Elemente extrahieren und dann die Verarbeitung stoppen - was definitiv das ist, was Sie für eine lange Liste wollen. (Wie @elQueFaltaba bereits in Kommentaren zu einer anderen Antwort sagte.)
MikeBeaton
9

Folgendes hat bei mir funktioniert.

array.slice( where_to_start_deleting, array.length )

Hier ist ein Beispiel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange  ->These first two we get as resultant
FlyingSnowGhost
quelle
4
Im ersten Beispiel verwenden Sie slice, im zweiten verwenden Sie splice.
Veslav
3
Das ist auch falsch. Sie werden davon bekommen ["Apple", "Mango"]. Der erste Teil des Slice ist nicht "wo mit dem Löschen begonnen werden soll", sondern wo der Slice gestartet werden soll. Das ursprüngliche Array wird nicht geändert und nichts gelöscht.
Angel Joseph Piscola
0

Verwenden Sie Filter

Nicht die beste Vorgehensweise, aber ein anderer Weg

const cutArrByN = arr.filter((item, idx) => idx < n);

Omer
quelle