Jak zdobyć pierwszy element tablicy?

236

Jak uzyskać pierwszy element z tablicy takiej jak ta:

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

Próbowałem tego:

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

Ale wróci [object Object]. Muszę więc pobrać pierwszy element z tablicy, który powinien być elementem 'first'.

MacMac
źródło
2
Zdecydowanie polecam sortowanie odpowiedzi według aktywnych
leonheess

Odpowiedzi:

338

lubię to

alert(ary[0])
John Hartsock
źródło
35
var a = []; a[7] = 'foo'; alert(a[0]);
Petah
72
Zakłada się, że pierwszy element w tablicy ma zawsze indeks 0. Wiesz, co mówią o założeniu ...
Andy
16
@Andy Nie było żadnych założeń, ponieważ pytanie OP było dość jasne i konkretne.
John Hartsock,
5
@Petah, nie ma nic złego w tym kodzie. Po prostu pokazuje niezdefiniowane, ponieważ jest to wartość [0], która w rzeczywistości jest pierwszym elementem w tablicy. Jeśli chcesz, aby pokazywał foo, powinieneś pominąć wszystkie niezdefiniowane wartości, ale nie byłby to pierwszy element w tablicy.
Michiel van der Blonk,
5
@MichielvanderBlonk Po prostu wskazałem przypadek, którego niektórzy użytkownicy mogą się nie spodziewać.
Petah,
92

Kilka sposobów poniżej dla różnych okoliczności.

W większości normalnych przypadków najprostszym sposobem uzyskania dostępu do pierwszego elementu jest

yourArray[0]

ale wymaga to sprawdzenia, czy [0] faktycznie istnieje.

Istnieją przypadki ze świata rzeczywistego, w których nie przejmujesz się oryginalną tablicą i nie chcesz sprawdzać, czy istnieje indeks, chcesz tylko uzyskać pierwszy element lub nieokreślone wstawienie.

W takim przypadku można użyć metody shift () , aby uzyskać pierwszy element, ale należy zachować ostrożność, aby ta metoda modyfikowała oryginalną tablicę (usuwa pierwszy element i zwraca go). Dlatego długość tablicy jest zmniejszona o jeden. Tej metody można użyć w przypadkach inline, w których wystarczy zdobyć pierwszy element, ale nie zależy Ci na oryginalnej tablicy.

yourArray.shift()

Ważne jest, aby wiedzieć, że dwa powyższe są opcją tylko, jeśli tablica zaczyna się od indeksu [0].

Są przypadki, w których pierwszy element został usunięty, na przykład za pomocą, delete yourArray [0] pozostawiając tablicę z „dziurami”. Teraz element w [0] jest po prostu niezdefiniowany, ale chcesz uzyskać pierwszy „istniejący” element. Widziałem wiele takich przypadków w świecie rzeczywistym.

Zakładając, że nie znamy tablicy i pierwszego klucza (lub wiemy, że są dziury), nadal możemy uzyskać pierwszy element.

Możesz użyć find (), aby uzyskać pierwszy element.

Zaletą find () jest jego wydajność, gdy wychodzi ona z pętli, gdy osiągnięta zostanie pierwsza wartość spełniająca warunek (więcej na ten temat poniżej). (Możesz dostosować warunek, aby wykluczyć null lub inne puste wartości)

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

Chciałbym również dołączyć tutaj funkcję filter () , aby najpierw „naprawić” tablicę w kopii, a następnie uzyskać pierwszy element, zachowując nienaruszoną oryginalną tablicę (niezmodyfikowaną).

Innym powodem włączenia filtra () jest to, że istniało ono przed find () i wielu programistów już go używało (jest to ES5 przeciwko find () będącym ES6).

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

Ostrzeżenie, że filter () nie jest tak naprawdę skutecznym sposobem (filter () przechodzi przez wszystkie elementy) i tworzy kolejną tablicę. Można stosować na małych tablicach, ponieważ wpływ na wydajność byłby marginalny, bliższy na przykład do użycia forEach.

(Widzę, że niektórzy sugerują użycie pętli for ... w celu uzyskania pierwszego elementu, ale odradzam tę metodę dla ... in nie należy używać do iteracji w tablicy, w której kolejność indeksów jest ważna, ponieważ nie t gwarantuje kolejność, chociaż można argumentować, że przeglądarki w większości szanują kolejność. Nawiasem mówiąc, forEach nie rozwiązuje problemu, jak wielu sugeruje, ponieważ nie można go złamać i przejdzie przez wszystkie elementy. Lepiej byłoby użyć prostego dla zapętlić i sprawdzając klucz / wartość

Zarówno find (), jak i filter () gwarantują kolejność elementów, więc można z nich bezpiecznie korzystać jak wyżej.

Selay
źródło
1
Dlaczego po prostu nie cofnij tablicy, np .: var element = yourArray.shift (); yourArray.unshift (element);
Greg
9
Ponieważ jest to bardzo nieefektywne i złe. Pierwszy element możesz zdobyć w bardzo wydajny sposób. Zarówno shift, jak i unshift wykonują pewne kontrole i przechodzą przez całą tablicę, aby wykonać zadanie, ponieważ po usunięciu lub dodaniu nowego elementu na początku wszystkie inne indeksy powinny zostać przesunięte. To tak, jakbyś miał autobus pełen ludzi, a kiedy ktoś z tylnego siedzenia chce wysiąść, opróżniasz autobus przez drzwi wejściowe, a następnie prosisz, aby wsiadł ponownie.
Selay
1
@ Opóźnienie zależy od konkretnych elementów wewnętrznych tłumacza.
Michiel van der Blonk
@Michiel van der Blonk Czy możesz mi powiedzieć, który tłumacz robi to, jak wspomniałeś? Jestem bardzo zainteresowany. Wszystkie znane mi implementacje używają pętli i kopiowania. Tak działają tablice JavaScript. Nie można po prostu łatwo usunąć pierwszego elementu, ponieważ pozostała tablica zaczyna się od 1 (element w pozycji 0 usunięty), co należy naprawić. Nie możesz tworzyć magii bez względu na to, jakie masz wewnętrzne wdrożenie.
Selay
Jeśli yourArray.map(n=>n).shift()go użyjesz , zwróci pierwszy element bez modyfikacji oryginału ... nie wiem, czy to najlepszy sposób, ale jeśli połączysz tablicę za pomocą .map (). Filter (). Some (). Shift () jest w porządku .. inaczej yourArray[0]
użyłbym
53

Element o indeksie 0 może nie istnieć, jeśli pierwszy element został usunięty:

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

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

Lepszy sposób na zdobycie pierwszego elementu bez jQuery:

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

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

NicoLwk
źródło
1
a.entries () [0] powinien to zrobić :)
Edson Medina,
1
Dzieje się tak, ponieważ nie należy używać tego rodzaju do wyliczania z tablicą, ponieważ wylicza ona obiekty, a nie elementy tablicy. Zamiast tego użyj indeksowania z tradycyjną pętlą for.
Oskar Duveborn
Podobne podejście ES6 (również nie oparte na wskaźnikach numerycznych) tutaj: stackoverflow.com/a/56115413/7910454
leonheess
51

Wykorzystanie restrukturyzacji ES6

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

Który jest taki sam jak

let first = [1,2,3][0];
Flavien Volken
źródło
Warto dodać, że Zniszczenie jest opcją tylko wtedy, gdy twoja tablica zaczyna się od indeksu [0].
leonheess
46

Jeśli chcesz zachować czytelność , zawsze możesz dodać pierwszą funkcję do Array.protoype:

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

Następnie możesz łatwo pobrać pierwszy element:

[1, 2, 3].first();
> 1
eliocs
źródło
14
uważa się za bardzo złą praktykę majstrowanie przy prototypach klas bazowych w jakikolwiek sposób z dobrego powodu.
Dmitrij Matwiejew
11
to głupie, jak pisanie jest .first()lepsze niż robienie [0]?
jonschlinkert
10
@jonschlinkert Niektóre języki mają indeksy zaczynające się od 1. firstw tym przypadku jest jednoznaczny.
Bartek Banachewicz
6
co zwraca [] .first ()?
Rhyous,
1
W moim teście zwraca wartość niezdefiniowaną. Próbuję zdecydować, czy podoba mi się powrót niezdefiniowany.
Rhyous,
33

Możesz po prostu użyć find():

let first = array.find(Boolean);

Lub jeśli chcesz pierwszy element, nawet jeśli jest to fałsz :

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

Idąc o krok dalej:

Jeśli dbasz o czytelność, ale nie chcą polegać na zachorowań numerycznych można dodać first()-function do Array.protoypedefiniując ją Object​.define​Property()który łagodzi pułapek modyfikowanie wbudowanego obiektu Array prototypu bezpośrednio ( wyjaśnione tutaj ).

Wydajność jest całkiem dobra ( find()zatrzymuje się po pierwszym elemencie), ale nie jest idealna ani powszechnie dostępna (tylko ES6). Aby uzyskać więcej tła, przeczytaj odpowiedź @Selays .

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

Następnie, aby pobrać pierwszy element, możesz:

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

> 'a'

Fragment, aby zobaczyć go w akcji:

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

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

leonheess
źródło
3
To najlepsza i najbardziej aktualna odpowiedź. Miałem zamiar opublikować tutaj to samo, ale po obejrzeniu twojego :)
Kostanos
A co się stanie, jeśli w przyszłej wersji języka dodadzą find ()? :-) czy powyższy fragment nie złamie go?
Bogdan
@Bogdan Co masz na myśli, kiedy dodająfind() ? find()od dawna jest częścią tego języka. To jest powód, dla którego powyższy fragment kodu działa.
leonheess,
Och Przepraszam, trochę zmęczony nie spałem dużo, o którym mówiłem pierwszy.
Bogdan
@Bogdan To nadal działałoby idealnie, ale nadpisało potencjalną przyszłą first()
metodę
18

Jeśli nie ma gwarancji, że twoja tablica zostanie wypełniona od zera, możesz użyć 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
źródło
3
To naprawdę powinno zostać poddane większemu wyborowi. To najbardziej zwięzłe rozwiązanie, jakie widzę, które wykorzystuje waniliowe js i konta dla rzadkich tablic.
Dominic P
Nie będzie działać w IE11: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Corey Alix
1
!!elementOdradzam używanie, ponieważ pominie ono wartości fałszu. Polecam użycie find()w ten sposób:sparse.find((_, index, array) => index in array);
Victor Welling
Podobne podejście bez odrzucania fałszywych wartości tutaj: stackoverflow.com/a/56115413/7910454
leonheess
13
array.find(e => !!e);  // return the first element 

ponieważ „znajdź” zwraca pierwszy element pasujący do filtra, a & !!epasuje do dowolnego elementu.

Uwaga ta działa tylko wtedy, gdy pierwszy element nie jest „Falsy”: null, false, NaN, "", 0,undefined

Abdennour TOUMI
źródło
1
Nie wyjaśniaj innym, że twój stan pasuje do dowolnego elementu zgodnego z prawdą, tj. <code> const example = [null, NaN, 0, undefined, {}, 3, 'a']; const firstTruthyElement = example.find (e => !! e); // przypisuje piąty element, pierwszy niefalsy: {} </code>
PDA,
Dzięki @PDA za nadrobienie zaległości. BTW, pusty ciąg znaków jest również uważany za fałsz
Abdennour TOUMI
3
to jest świetne, a także świetnie działa w TypeScript. A co z uproszczeniem array.find(() => true);? To pozwala ci [false].find(() => true)również.
Simon Warta
@ SimonWarta oczywiście .find(value => true)działa po prostu zgodnie z oczekiwaniami… ale szczerze, jeśli chcesz czystszego kodu i zachować pisanie na maszynie, użyj destrukcji .
Flavien Volken
Zobacz tę odpowiedź w podobny sposób, bez pułapek ignorowania elementów
fałszowania
9

Spróbować alert(ary[0]);.

thejh
źródło
1
Zapoznaj się z odpowiedzią, dlaczego to rozwiązanie nie zawsze działa.
Gustavo Straube,
7

Wiem, że ludzie, którzy pochodzą z innych języków na JavaScript, szukają czegoś podobnego head()lub first()pierwszego elementu tablicy, ale jak to zrobić?

Wyobraź sobie, że masz tablicę poniżej:

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

W JavaScript możesz po prostu zrobić:

const first = arr[0];

lub nowszy, nowszy sposób to:

const [first] = arr;

Ale możesz też po prostu napisać funkcję taką jak ...

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

Jeśli używasz podkreślenia, istnieje lista funkcji wykonujących to samo, czego szukasz:

_.first 

_.head

_.take
Alireza
źródło
6

Metoda, która działa z tablicami i działa również z obiektami (uwaga, obiekty nie mają gwarantowanej kolejności!).

Najbardziej preferuję tę metodę, ponieważ oryginalna tablica nie jest modyfikowana.

// 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
źródło
5

W wersji ES2015 i nowszych przy użyciu restrukturyzacji tablic:

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

Vik
źródło
To ta sama odpowiedź, co stackoverflow.com/a/48761812/7910454, ale kilka miesięcy później
leonheess
4

Kolejny dla tych, którzy zajmują się tylko prawdą

ary.find(Boolean);
Vinnie
źródło
4

Znajdź pierwszy element w tablicy za pomocą filtra:

W maszynopisie:

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

Prostym javascript:

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

I podobnie indexOf:

W maszynopisie:

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

Prostym javascript:

function indexOf(arr, filter) {
    var result;
    return arr.some(function (v, i) { result = i; return filter(v); }) ? result : undefined;
}
Corey Alix
źródło
3

Gdy występuje wiele dopasowań, do pobrania pierwszego elementu DOM pasującego do selektora css podanego dla jquery używana jest funkcja .first () JQuery'ego.

Nie potrzebujesz jQuery do manipulowania tablicami javascript.

letronje
źródło
3

Dlaczego nie uwzględnić czasów, w których tablica może być pusta?

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
źródło
3

Po prostu użyj ary.slice(0,1).pop();

W

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
źródło
Dlaczego ten, a nie ary[0]?
nathanfranke
2

Możesz także użyć .get (0):

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

Aby uzyskać pierwszy element tablicy.

Michał Pawłowski
źródło
1

Użyj tego, aby podzielić znak w javascript.

var str = "boy, girl, dog, cat";
var arr = str.split(",");
var fst = arr.splice(0,1).join("");
var rest = arr.join(",");
Mohit Singh
źródło
1

Poprzednie przykłady działają dobrze, gdy indeks tablicy zaczyna się od zera. Odpowiedź Thomaxa nie polegała na indeksie rozpoczynającym się od zera, ale polegała na tym, Array.prototype.finddo czego nie miałem dostępu. Poniższe rozwiązanie z użyciem jQuery $ .each działało dobrze w moim przypadku.

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'.
Mateusz
źródło
1

Możesz to zrobić tak łatwo przez lodash _.head .

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
źródło
2
Robi to dosłownie, arr[0]jak widać tutaj, dlatego zdecydowanie odradzam korzystanie z gigantycznej biblioteki, takiej jak lodash, do tak małego zadania.
leonheess
1

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

Merak Marey
źródło
To jest waniliowe JS, bez jQuery, bez bibliotek, bez niczego ...: P.. będzie działać, jeśli indeks tablicy nie rozpocznie się od zera, zadziała, jeśli świat się nie skończył ....
Merak Marey
0

@NicoLwk Powinieneś usunąć elementy ze splajnem, które cofną twoją tablicę. Więc:

var a=['a','b','c'];
a.splice(0,1);
for(var i in a){console.log(i+' '+a[i]);}
asinino
źródło
2
Ta odpowiedź jest komentarzem do odpowiedzi powyżej (NicoLwks) i powinna zostać usunięta
Lino
0

Zadeklaruj prototyp do zdobycia pierwszy element tablicy jako:

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

Następnie użyj go jako:

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

Lub po prostu (:

first = array[0];
ozhanli
źródło
0

Jeśli łączysz funkcje widoku z tablicą, np

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

I chcesz pierwszy element po tych funkcjach, możesz po prostu dodać, .shift()że nie modyfikuje oryginałuarray , jest to więc lepszy sposóbarray.map(i => i+1).filter(=> i > 3)[0]

Jeśli chcesz pierwszego elementu tablicy bez modyfikowania oryginału, możesz użyć array[0]lub array.map(n=>n).shift()(bez mapy zmodyfikujesz oryginał. W tym przypadku btw sugerowałbym ..[0]wersję.

Michael J. Zoidl
źródło
0
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

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

Utwórz dowolną tablicę Object ( req), a następnie po prostu zrób Object.keys(req)[0]pierwszy klucz w tablicy Object.

Anuga
źródło
2
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie dla czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
DimaSan
0

Odpowiedź @thomax jest całkiem dobra, ale zawiedzie, jeśli pierwszy element w tablicy ma wartość false lub false-y (0, pusty ciąg itp.). Lepiej po prostu zwrócić wartość true dla czegoś innego niż niezdefiniowany:

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

const first = arr.find((v) => { return (typeof v !== 'undefined'); });
console.log(first); // ''
derikb
źródło
-1

ES6 easy:

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

let firstValue = a.find(v => v)
let firstIndex = a.findIndex(v => v)
Jan Jarčík
źródło
1
Nie… zwróci pierwszą zdefiniowaną wartość. Jeśli pierwszy jest pusty, niezdefiniowany, fałszywy, 0 lub pusty ciąg, ten zostanie pominięty. Spróbuj:[false, 0, null, undefined, '', 'last'].find(v => v)
Flavien Volken,
Dobrze, moje rozwiązanie działa tylko dla tablicy z określonymi wartościami.
Jan Jarčík
1
Dlaczego więc filtrować według wartości? a.find(value => true)nie odrzuca żadnych wartości. Mimo to nie polecam używania polecenia Znajdź, aby zdobyć pierwszy przedmiot.
Flavien Volken
1
@ Zwrócenie wartości MiXT4PE (tak jak w odpowiedzi) jest w porządku, ponieważ zatrzyma się na pierwszym elemencie, tutaj zwraca sam element… który będzie kontynuowany, jeśli zostanie uznany za fałszywy
Flavien Volken
1
@ MiXT4PE przy użyciu „znajdź” jest wolniejszy, bardziej skomplikowany i mniej elegancki. Wątpię też, czy istnieje jakiś inteligentny edytor, który byłby w stanie refaktoryzować tę operację. Używanie destrukcji jest znacznie bardziej wydajne, rozumiane przez język (dzięki czemu można refaktoryzować), typ jest rozumiany przez kompilator (w przypadku TS) i najprawdopodobniej najszybsze rozwiązanie.
Flavien Volken