Wie erhalte ich das erste Element eines Arrays?

235

Wie erhält man das erste Element aus einem Array wie diesem:

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

Ich habe es versucht:

alert($(ary).first());

Aber es würde zurückkehren [object Object]. Also muss ich das erste Element aus dem Array holen, das das Element sein sollte 'first'.

MacMac
quelle
2
Ich empfehle dringend, die Antworten nach aktiv zu
sortieren

Antworten:

338

so was

alert(ary[0])
John Hartsock
quelle
34
var a = []; a[7] = 'foo'; alert(a[0]);
Petah
72
Dies setzt voraus, dass das erste Element im Array immer einen Index von 0 hat. Sie wissen, was sie über die Annahme sagen ...
Andy
16
@Andy Es gab keine Annahmen, da die Frage von OP ziemlich klar und spezifisch war.
John Hartsock
5
@Petah es ist nichts falsch mit diesem Code. Es wird einfach undefiniert angezeigt, da dies der Wert von [0] ist, der tatsächlich das erste Element im Array ist. Wenn Sie möchten, dass foo angezeigt wird, sollten Sie alle undefinierten Werte überspringen, dies wäre jedoch nicht das erste Element im Array.
Michiel van der Blonk
5
@MichielvanderBlonk Ich habe lediglich auf einen Randfall hingewiesen, den einige Benutzer möglicherweise nicht erwarten.
Petah
91

Einige der folgenden Möglichkeiten für verschiedene Umstände.

In den meisten normalen Fällen ist der einfachste Weg, auf das erste Element zuzugreifen, der von

yourArray[0]

Dazu müssen Sie jedoch überprüfen, ob [0] tatsächlich vorhanden ist.

Es gibt Fälle in der realen Welt, in denen Sie sich nicht für das ursprüngliche Array interessieren und nicht überprüfen möchten, ob ein Index vorhanden ist. Sie möchten nur das erste Element oder eine undefinierte Inline erhalten.

In diesem Fall können Sie die Methode shift () verwenden, um das erste Element abzurufen. Beachten Sie jedoch, dass diese Methode das ursprüngliche Array ändert (entfernt das erste Element und gibt es zurück). Daher wird die Länge eines Arrays um eins reduziert. Diese Methode kann in Inline-Fällen verwendet werden, in denen Sie nur das erste Element abrufen müssen, sich aber nicht um das ursprüngliche Array kümmern.

yourArray.shift()

Wichtig zu wissen ist, dass die beiden oben genannten nur dann eine Option sind, wenn Ihr Array mit einem [0] -Index beginnt.

Es gibt Fälle, in denen das erste Element gelöscht wurde, z. B. mit delete yourArray [0], wobei Ihr Array mit "Löchern" belassen wird. Jetzt ist das Element bei [0] einfach undefiniert, aber Sie möchten das erste "vorhandene" Element erhalten. Ich habe viele reale Fälle davon gesehen.

Vorausgesetzt, wir kennen das Array und den ersten Schlüssel nicht (oder wir wissen, dass es Löcher gibt), können wir trotzdem das erste Element erhalten.

Sie können find () verwenden , um das erste Element abzurufen.

Der Vorteil von find () ist seine Effizienz, wenn es die Schleife verlässt, wenn der erste Wert erreicht ist, der die Bedingung erfüllt (mehr dazu weiter unten). (Sie können die Bedingung so anpassen, dass auch null oder andere leere Werte ausgeschlossen werden.)

var firstItem = yourArray.find(x=>x!==undefined);

Ich möchte hier auch filter () als Option einfügen, um zuerst das Array in der Kopie zu "reparieren" und dann das erste Element zu erhalten, während das ursprüngliche Array intakt bleibt (unverändert).

Ein weiterer Grund, filter () hier aufzunehmen, ist, dass es vor find () existierte und viele Programmierer es bereits verwendet haben (es ist ES5 gegen find () als ES6).

var firstItem = yourArray.filter(x => typeof x!==undefined).shift();

Warnung, dass filter () nicht wirklich effizient ist (filter () durchläuft alle Elemente) und ein anderes Array erstellt. Die Verwendung auf kleinen Arrays ist in Ordnung, da die Auswirkungen auf die Leistung gering wären, beispielsweise näher an der Verwendung von forEach.

(Ich sehe, dass einige Leute vorschlagen, for ... in loop zu verwenden, um das erste Element zu erhalten, aber ich würde gegen diese Methode empfehlen, da ... in nicht verwendet werden sollte, um über ein Array zu iterieren, bei dem die Indexreihenfolge wichtig ist, weil dies nicht der Fall ist. ' t garantieren die Reihenfolge, obwohl Sie argumentieren können, dass Browser die Reihenfolge meistens respektieren. Übrigens löst forEach das Problem nicht so, wie viele vorschlagen, weil Sie es nicht brechen können und es alle Elemente durchläuft. Sie sollten besser ein einfaches für verwenden Schleife und durch Überprüfen von Schlüssel / Wert

Sowohl find () als auch filter () garantieren die Reihenfolge der Elemente und können daher wie oben beschrieben sicher verwendet werden.

Selay
quelle
1
Warum nicht einfach das Array danach verschieben, zB: var element = yourArray.shift (); yourArray.unshift (Element);
Greg
9
Weil es sehr ineffizient und schlecht ist. Sie können das erste Element auf sehr effiziente Weise erhalten. Sowohl Shift als auch Unshift führen einige Überprüfungen durch und durchlaufen das gesamte Array, um die Aufgabe zu erfüllen. Wenn Sie am Anfang ein neues Element entfernen oder hinzufügen, sollten alle anderen Indizes verschoben werden. Es ist, als hätten Sie einen Bus voller Leute, und wenn jemand vom Rücksitz aussteigen möchte, leeren Sie den Bus durch die Vordertür und bitten ihn, wieder einzusteigen.
Selay
1
@Selay, das von den spezifischen Interna des Dolmetschers abhängt.
Michiel van der Blonk
@ Michael van der Blonk Können Sie mir bitte mitteilen, welcher Dolmetscher dies tut, wie Sie es erwähnt haben? Ich bin sehr interessiert. Alle mir bekannten Implementierungen verwenden Loop und Copy. So funktionieren JavaScript-Arrays. Sie können das erste Element nicht einfach entfernen, da das verbleibende Array jetzt bei 1 beginnt (Element an Position 0 entfernt), das Sie reparieren müssen. Sie können keine Magie machen, egal welche interne Implementierung Sie haben.
Selay
Wenn Sie es verwenden yourArray.map(n=>n).shift(), wird das erste Element zurückgegeben, ohne das Original zu ändern. Sie wissen nicht, ob dies der beste Weg ist, aber wenn Sie ein Array mit .map (). Filter (). Some (). Shift () verketten, ist dies in Ordnung .. sonst würde ich verwendenyourArray[0]
Michael J. Zoidl
53

Element mit Index 0 ist möglicherweise nicht vorhanden, wenn das erste Element gelöscht wurde:

let a = ['a', 'b', 'c'];
delete a[0];

for (let i in a) {
  console.log(i + ' ' + a[i]);
}

Besserer Weg, um das erste Element ohne jQuery zu erhalten:

function first(p) {
  for (let i in p) return p[i];
}

console.log( first(['a', 'b', 'c']) );

NicoLwk
quelle
1
a.entries () [0] sollte es tun :)
Edson Medina
1
Das liegt daran, dass Sie diese Art von nicht für die Aufzählung mit einem Array verwenden sollten, da hier Objekte und keine Array-Mitglieder aufgelistet werden. Verwenden Sie stattdessen die Indizierung mit einer herkömmlichen for-Schleife.
Oskar Duveborn
Ein ähnlicher ES6-Ansatz (der sich auch nicht auf numerische Indizes stützt) hier: stackoverflow.com/a/56115413/7910454
leonheess
51

Verwenden der ES6-Destrukturierung

let [first] = [1,2,3];

Welches ist das gleiche wie

let first = [1,2,3][0];
Flavien Volken
quelle
Es kann relevant sein, hinzuzufügen, dass Destructing nur dann eine Option ist, wenn Ihr Array mit einem [0] -Index beginnt.
Leonheess
46

Wenn Sie die Lesbarkeit erhalten möchten, können Sie jederzeit eine erste Funktion hinzufügen Array.protoype:

Array.prototype.first = function () {
    return this[0];
};

Dann können Sie leicht das erste Element abrufen:

[1, 2, 3].first();
> 1
Elioks
quelle
14
Es wird als sehr schlechte Praxis angesehen, aus gutem Grund in irgendeiner Weise an Prototypen von Basisklassen zu basteln.
Dmitry Matveev
11
das ist albern, wie ist tippen .first()besser als tun [0]?
Jonschlinkert
10
@jonschlinkert Einige Sprachen haben Indizes, die bei beginnen 1. firstist in diesem Fall eindeutig.
Bartek Banachewicz
6
Was gibt [] .first () zurück?
Rhyous
1
In meinem Test wird undefiniert zurückgegeben. Ich versuche zu entscheiden, ob es mir gefällt, undefiniert zurückzukehren.
Rhyous
33

Sie können einfach verwenden find():

let first = array.find(Boolean);

Oder wenn Sie das erste Element wollen, auch wenn es falsch ist :

let first = array.find(e => true);

Die Extrameile gehen:

Wenn Sie Wert auf Lesbarkeit legen, sich aber nicht auf numerische Vorkommnisse verlassen möchten, können Sie eine Funktion hinzufügen first(), Array.protoypeindem Sie sie definieren, mit Object​.define​Property()der die Fallstricke beim direkten Ändern des integrierten Array-Objektprototyps gemindert werden ( hier erläutert ).

Die Leistung ist ziemlich gut ( find()stoppt nach dem ersten Element), aber nicht perfekt oder universell zugänglich (nur ES6). Weitere Hintergrundinformationen finden Sie unter @Selays Antwort .

Object.defineProperty(Array.prototype, 'first', {
  value() {
    return this.find(e => true);     // or this.find(Boolean)
  }
});

Um das erste Element abzurufen, können Sie Folgendes tun:

let array = ['a', 'b', 'c'];
array.first();

> 'a'

Snippet, um es in Aktion zu sehen:

Object.defineProperty(Array.prototype, 'first', {
  value() {
    return this.find(Boolean);
  }
});

console.log( ['a', 'b', 'c'].first() );

leonheess
quelle
3
Dies ist die beste und aktuellste Antwort. Ich wollte hier gleich posten, aber nachdem ich deine gesehen habe :)
Kostanos
Und was passiert, wenn in einer zukünftigen Version der Sprache find () hinzugefügt wird? :-) Würde das obige Snippet es nicht kaputt machen?
Bogdan
@ Bogdan Was meinst du, wenn sie hinzufügen werdenfind() ? find()ist seit langem Teil der Sprache. Dies ist der Grund, warum das obige Snippet funktioniert.
Leonheess
Ohh. Tut mir leid, dass ich ein bisschen müde bin und nicht viel geschlafen habe.
Bogdan
@ Bogdan Es würde immer noch einwandfrei funktionieren, aber die potenzielle Zukunftsmethode first()der Sprache überschreiben
Leonheess
18

Wenn nicht garantiert wird, dass Ihr Array mit dem Index Null gefüllt ist, können Sie Folgendes verwenden Array.prototype.find():

var elements = []
elements[1] = 'foo'
elements[2] = 'bar'

var first = function(element) { return !!element }    
var gotcha = elements.find(first)

console.log(a[0]) // undefined
console.log(gotcha) // 'foo'
thomax
quelle
3
Dies sollte wirklich höher gewählt werden. Es ist die prägnanteste Lösung, die ich sehe, die Vanilla js verwendet und spärliche Arrays berücksichtigt.
Dominic P
Funktioniert nicht in IE11: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Corey Alix
1
Ich würde davon abraten, !!elementfalsche Werte zu überspringen. Ich würde empfehlen, find()auf diese Weise zu verwenden:sparse.find((_, index, array) => index in array);
Victor Welling
Ähnliche Vorgehensweise ohne falsche Werte hier zu verwerfen
leonheess
13
array.find(e => !!e);  // return the first element 

da "find" das erste Element zurückgibt, das mit dem Filter !!eübereinstimmt && mit einem beliebigen Element übereinstimmt.

Hinweis Dies funktioniert nur , wenn das erste Element ist kein „Falsy“: null, false, NaN, "", 0,undefined

Abdennour TOUMI
quelle
1
Wenn Sie nicht für andere klarstellen möchten, dass Ihre Bedingung mit einem wahrheitsgemäßen Element übereinstimmt, z. B. <code> const example = [null, NaN, 0, undefiniert, {}, 3, 'a']; const firstTruthyElement = example.find (e => !! e); // weist das 5. Element zu, das erste nicht fälschliche: {} </ code>
PDA
Danke @PDA für den Aufholprozess. Übrigens, leere Zeichenfolge gilt auch als falsch
Abdennour TOUMI
3
Das ist großartig und funktioniert auch in TypeScript. Was ist mit der Vereinfachung array.find(() => true);? Dies können Sie auch tun [false].find(() => true).
Simon Warta
@SimonWarta funktioniert natürlich .find(value => true)nur wie erwartet… aber ehrlich gesagt, wenn Sie einen saubereren Code wünschen und die Eingabe in Typoskript beibehalten möchten, verwenden Sie die Destrukturierung .
Flavien Volken
Siehe diese Antwort für einen ähnlichen Weg ohne die Fallstricke, falsche Elemente zu ignorieren
Leonheess
9

Versuchen Sie es alert(ary[0]);.

thejh
quelle
1
In dieser Antwort erfahren Sie, warum diese Lösung nicht immer funktioniert.
Gustavo Straube
7

Ich weiß, dass Leute, die aus anderen Sprachen zu JavaScript kommen, nach etwas wie head()oder first()nach dem ersten Element eines Arrays suchen , aber wie können Sie das tun?

Stellen Sie sich vor, Sie haben das folgende Array:

const arr = [1, 2, 3, 4, 5];

In JavaScript können Sie einfach Folgendes tun:

const first = arr[0];

oder ein ordentlicher, neuerer Weg ist:

const [first] = arr;

Sie können aber auch einfach eine Funktion schreiben wie ...

function first(arr) {
   if(!Array.isArray(arr)) return;
   return arr[0];
}

Wenn Sie einen Unterstrich verwenden, gibt es eine Liste von Funktionen, die dasselbe tun, wonach Sie suchen:

_.first 

_.head

_.take
Alireza
quelle
6

Methode, die mit Arrays und auch mit Objekten funktioniert (Vorsicht, Objekte haben keine garantierte Reihenfolge!).

Ich bevorzuge diese Methode am meisten, da das ursprüngliche Array nicht geändert wird.

// In case of array
var arr = [];
arr[3] = 'first';
arr[7] = 'last';
var firstElement;
for(var i in arr){
    firstElement = arr[i];
    break;
}
console.log(firstElement);  // "first"

// In case of object
var obj = {
    first: 'first',
    last: 'last',
};

var firstElement;

for(var i in obj){
    firstElement = obj[i];
    break;
}

console.log(firstElement) // First;
Mārtiņš Briedis
quelle
5

In ES2015 und höher mit Array-Destrukturierung:

const arr = [42, 555, 666, 777]
const [first] = arr
console.log(first)

Vik
quelle
Das ist die gleiche Antwort wie stackoverflow.com/a/48761812/7910454, aber einige Monate später
leonheess
4

Eine andere für diejenigen, die sich nur mit wahrheitsgemäßen Elementen befassen

ary.find(Boolean);
Vinnie
quelle
4

Suchen Sie das erste Element in einem Array mithilfe eines Filters:

Im Typoskript:

function first<T>(arr: T[], filter: (v: T) => boolean): T {
    let result: T;
    return arr.some(v => { result = v; return filter(v); }) ? result : undefined;
}

In einfachem Javascript:

function first(arr, filter) {
    var result;
    return arr.some(function (v) { result = v; return filter(v); }) ? result : undefined;
}

Und in ähnlicher Weise indexOf:

Im Typoskript:

function indexOf<T>(arr: T[], filter: (v: T) => boolean): number {
    let result: number;
    return arr.some((v, i) => { result = i; return filter(v); }) ? result : undefined;
}

In einfachem Javascript:

function indexOf(arr, filter) {
    var result;
    return arr.some(function (v, i) { result = i; return filter(v); }) ? result : undefined;
}
Corey Alix
quelle
3

Wenn mehrere Übereinstimmungen vorliegen, wird JQuerys .first () zum Abrufen des ersten DOM-Elements verwendet, das mit dem CSS-Selektor übereinstimmt, der für jquery angegeben wurde.

Sie benötigen jQuery nicht, um Javascript-Arrays zu bearbeiten.

letronje
quelle
3

Warum nicht berücksichtigen, wann Ihr Array möglicherweise leer ist?

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
first = (array) => array.length ? array[0] : 'no items';
first(ary)
// output: first

var ary = [];
first(ary)
// output: no items
NathanQ
quelle
3

Benutz einfach ary.slice(0,1).pop();

Im

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

console.log("1º "+ary.slice(0,1).pop());
console.log("2º "+ary.slice(0,2).pop());
console.log("3º "+ary.slice(0,3).pop());
console.log("4º "+ary.slice(0,4).pop());
console.log("5º "+ary.slice(0,5).pop());
console.log("Last "+ary.slice(-1).pop());

array.slice (START, END) .pop ();

Guilherme HS
quelle
Warum das und nicht ary[0]?
Nathanfranke
2

Sie können auch .get (0) verwenden:

alert($(ary).first().get(0));

Um das erste Element des Arrays zu erhalten.

Michael Pawlowsky
quelle
1

Verwenden Sie diese Option, um Zeichen in Javascript zu teilen.

var str = "boy, girl, dog, cat";
var arr = str.split(",");
var fst = arr.splice(0,1).join("");
var rest = arr.join(",");
Mohit Singh
quelle
1

Die vorherigen Beispiele funktionieren gut, wenn der Array-Index bei Null beginnt. Die Antwort von thomax beruhte nicht auf dem Index, der bei Null begann, sondern auf dem Index, auf Array.prototype.findden ich keinen Zugriff hatte. Die folgende Lösung mit jQuery $ .each hat in meinem Fall gut funktioniert.

let haystack = {100: 'first', 150: 'second'},
    found = null;

$.each(haystack, function( index, value ) {
    found = value;  // Save the first array element for later.
    return false;  // Immediately stop the $.each loop after the first array element.
});

console.log(found); // Prints 'first'.
Matthew
quelle
1

Sie können es so einfach mit lodash _.head tun.

var arr = ['first', 'second', 'third', 'fourth', 'fifth'];
console.log(_.head(arr));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Penny Liu
quelle
2
Es tut buchstäblich so, arr[0]wie Sie hier sehen können , weshalb ich dringend davon abraten, eine gigantische Bibliothek wie lodash für eine so kleine Aufgabe zu verwenden.
Leonheess
1

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
alert(Object.values(ary)[0]);

Merak Marey
quelle
Dies ist Vanilla JS, keine jQuery, keine Bibliotheken, kein Nichts ..: P..es wird funktionieren, wenn der Array-Index nicht bei Null beginnt, es wird funktionieren, wenn die Welt nicht untergegangen ist ....
Merak Marey
0

@NicoLwk Sie sollten Elemente mit Spleiß entfernen, um Ihr Array zurück zu verschieben. So:

var a=['a','b','c'];
a.splice(0,1);
for(var i in a){console.log(i+' '+a[i]);}
Asinino
quelle
2
Diese Antwort ist ein Kommentar zur obigen Antwort (NicoLwks) und sollte gelöscht werden
Lino
0

Deklarieren Sie einen Prototyp, um das erste Array- Element zu erhalten:

Array.prototype.first = function () {
   return this[0];
};

Dann verwenden Sie es als:

var array = [0, 1, 2, 3];
var first = array.first();
var _first = [0, 1, 2, 3].first();

Oder einfach (:

first = array[0];
Ozhanli
quelle
0

Wenn Sie eine Ansicht mit dem Array verketten, z

array.map(i => i+1).filter(i => i > 3)

Und wenn .shift()Sie das erste Element nach diesen Funktionen möchten, können Sie einfach ein Element hinzufügen , das das Original nicht ändert. Es ist arraydann eine schönere Methodearray.map(i => i+1).filter(=> i > 3)[0]

Wenn Sie das erste Element eines Arrays möchten, ohne das Original zu ändern, können Sie es verwenden array[0]oder array.map(n=>n).shift()(ohne die Karte ändern Sie das Original. In diesem Fall würde ich übrigens die ..[0]Version vorschlagen .

Michael J. Zoidl
quelle
0
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

console.log(Object.keys(ary)[0]);

Erstellen Sie ein beliebiges Objektarray ( req) und Object.keys(req)[0]wählen Sie dann einfach den ersten Schlüssel im Objektarray aus.

Anuga
quelle
2
Während dieses Code-Snippet die Frage lösen kann, hilft das Hinzufügen einer Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
DimaSan
0

Die Antwort von @thomax ist ziemlich gut, schlägt jedoch fehl, wenn das erste Element im Array false oder false-y ist (0, leere Zeichenfolge usw.). Es ist besser, nur für etwas anderes als undefiniert true zurückzugeben:

const arr = [];
arr[1] = '';
arr[2] = 'foo';

const first = arr.find((v) => { return (typeof v !== 'undefined'); });
console.log(first); // ''
derikb
quelle
-1

ES6 einfach:

let a = []
a[7] = 'A'
a[10] = 'B'

let firstValue = a.find(v => v)
let firstIndex = a.findIndex(v => v)
Jan Jarčík
quelle
1
Nein ... es wird der erste definierte Wert zurückgegeben. Wenn die erste Zeichenfolge null, undefiniert, falsch, 0 oder eine leere Zeichenfolge ist, wird diese übersprungen. Versuchen Sie:[false, 0, null, undefined, '', 'last'].find(v => v)
Flavien Volken
Guter Punkt, meine Lösung funktioniert nur für Arrays mit definierten Werten.
Jan Jarčík
1
Warum dann nach dem Wert filtern? a.find(value => true)wird keine Werte entlassen. Trotzdem empfehle ich nicht, find zu verwenden, um den ersten Artikel zu erhalten.
Flavien Volken
1
@ MiXT4PE Rückgabe true (wie in Ihrer Antwort) ist in Ordnung, da es beim ersten Element stoppt, hier gibt es das Element selbst zurück ... was fortgesetzt wird, wenn dieses als falsch angesehen wird
Flavien Volken
1
@ MiXT4PE mit "find" ist langsamer, komplizierter und weniger elegant. Ich bezweifle auch, dass es einen intelligenten Editor gibt, der diesen Vorgang umgestalten kann. Die Verwendung der Destrukturierung ist viel effizienter, wird von der Sprache verstanden (damit Sie sie umgestalten können), der Typ wird vom Compiler verstanden (im Fall von TS) und ist höchstwahrscheinlich die schnellste Lösung.
Flavien Volken