Comment obtenir le premier élément d'un tableau?


236

Comment obtenez-vous le premier élément d'un tableau comme celui-ci:

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

J'ai essayé ceci:

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

Mais ça reviendrait [object Object]. J'ai donc besoin d'obtenir le premier élément du tableau qui devrait être l'élément 'first'.


2
Je recommande fortement de trier les réponses par actif
leonheess

Réponses:


338

comme ça

alert(ary[0])

35
var a = []; a[7] = 'foo'; alert(a[0]);
Petah

72
Cela suppose que le premier élément du tableau a toujours un indice de 0. Vous savez ce qu'ils disent sur l'hypothèse ...
Andy

16
@Andy Il n'y avait aucune hypothèse, car la question d'OP était assez claire et précise.
John Hartsock

5
@Petah il n'y a rien de mal avec ce code. Il montre simplement undefined, car c'est la valeur d'un [0], qui est en fait le premier élément du tableau. Si vous voulez qu'il affiche foo, vous devez ignorer toutes les valeurs non définies, mais ce ne serait pas le premier élément du tableau.
Michiel van der Blonk

5
@MichielvanderBlonk Je signalais simplement un cas de bord auquel certains utilisateurs ne pouvaient pas s'attendre.
Petah


92

Certaines des façons ci-dessous pour différentes circonstances.

Dans la plupart des cas normaux, le moyen le plus simple d'accéder au premier élément est de

yourArray[0]

mais cela vous oblige à vérifier si [0] existe réellement.

Il y a des cas réels où vous ne vous souciez pas du tableau d'origine et ne voulez pas vérifier si l'index existe, vous voulez simplement obtenir le premier élément ou en ligne non défini.

Dans ce cas, vous pouvez utiliser la méthode shift () pour obtenir le premier élément, mais veillez à ce que cette méthode modifie le tableau d'origine (supprime le premier élément et le renvoie). Par conséquent, la longueur d'un tableau est réduite de un. Cette méthode peut être utilisée dans les cas en ligne où vous avez juste besoin d'obtenir le premier élément, mais vous ne vous souciez pas du tableau d'origine.

yourArray.shift()

La chose importante à savoir est que les deux ci-dessus ne sont une option que si votre tableau commence par un index [0].

Il y a des cas où le premier élément a été supprimé, par exemple avec, supprimez votre tableau [0] en laissant votre tableau avec des "trous". L'élément à [0] n'est maintenant tout simplement pas défini, mais vous voulez obtenir le premier élément "existant". J'ai vu de nombreux cas réels de cela.

Donc, en supposant que nous n'avons aucune connaissance du tableau et de la première clé (ou nous savons qu'il y a des trous), nous pouvons toujours obtenir le premier élément.

Vous pouvez utiliser find () pour obtenir le premier élément.

L'avantage de find () est son efficacité car il quitte la boucle lorsque la première valeur satisfaisant la condition est atteinte (plus d'informations à ce sujet ci-dessous). (Vous pouvez également personnaliser la condition pour exclure les valeurs nulles ou autres valeurs vides)

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

Je voudrais également inclure filter () ici comme option pour «fixer» le tableau dans la copie, puis obtenir le premier élément tout en gardant le tableau d'origine intact (non modifié).

Une autre raison d'inclure filter () ici est qu'il existait avant find () et que de nombreux programmeurs l'ont déjà utilisé (c'est ES5 contre find () étant ES6).

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

Avertissement que filter () n'est pas vraiment un moyen efficace (filter () parcourt tous les éléments) et crée un autre tableau. Il est bon de l'utiliser sur de petites baies, car l'impact sur les performances serait marginal, plus proche de l'utilisation de forEach, par exemple.

(Je vois que certaines personnes suggèrent d'utiliser for ... in loop pour obtenir le premier élément, mais je déconseille cette méthode car ... in ne doit pas être utilisé pour itérer sur un tableau où l'ordre des index est important car il ne le fait pas '' ne garantissez pas la commande, bien que vous puissiez affirmer que les navigateurs respectent la plupart du temps la commande.Par ailleurs, forEach ne résout pas le problème comme beaucoup le suggèrent, car vous ne pouvez pas le casser et il fonctionnera à travers tous les éléments. boucle et en vérifiant clé / valeur

Find () et filter () garantissent l'ordre des éléments, ils sont donc sûrs à utiliser comme ci-dessus.


1
Pourquoi ne pas simplement décaler le tableau par la suite, par exemple: var element = yourArray.shift (); yourArray.unshift (element);
Greg

9
Parce que c'est une chose très inefficace et mauvaise. Vous pouvez obtenir le premier élément de manière beaucoup plus efficace. Shift et unshift effectuent des vérifications et parcourent l'ensemble du tableau pour réaliser la tâche, car lorsque vous supprimez ou ajoutez un nouvel élément au début, tous les autres index doivent être décalés. C'est comme si vous aviez un bus plein de monde, et quand quelqu'un sur le siège arrière veut descendre, vous videz le bus par la porte avant et vous leur demandez de monter à nouveau.
Selay

1
@Selay qui dépend des internes spécifiques de l'interprète.
Michiel van der Blonk

@Michiel van der Blonk Pouvez-vous s'il vous plaît me faire savoir quel interprète le fait comme vous l'avez mentionné. Je suis très intéressé. Toutes les implémentations que je connais utilisent la boucle et la copie. C'est ainsi que fonctionnent les tableaux JavaScript. Vous ne pouvez pas simplement supprimer le premier élément facilement car le tableau restant commence maintenant à partir de 1 (élément à la position 0 supprimé), que vous devez corriger. Vous ne pouvez pas faire de la magie quelle que soit l'implémentation interne que vous avez.
Selay

Si vous l'utilisez yourArray.map(n=>n).shift(), le premier élément sera retourné sans modifier l'original ... je ne sais pas si c'est la meilleure façon, mais si vous enchaînez un tableau avec .map (). Filter (). Some (). Shift () ça va .. sinon j'utiliseraisyourArray[0]
Michael J. Zoidl

53

Utilisation de la déstructuration ES6

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

C'est la même chose que

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

Il peut être pertinent d'ajouter que la destruction n'est une option que si votre tableau commence par un index [0].
leonheess

53

L'élément d'index 0 peut ne pas exister si le premier élément a été supprimé:

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

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

Meilleure façon d'obtenir le premier élément sans jQuery:

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

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


1
a.entries () [0] devrait le faire :)
Edson Medina

1
C'est parce que vous ne devez pas utiliser ce type d'énumération avec un tableau, car il énumère des objets et non des membres de tableau. Utilisez plutôt l'indexation avec une boucle for traditionnelle.
Oskar Duveborn

Approche ES6 similaire (ne reposant pas non plus sur des indices numériques) ici: stackoverflow.com/a/56115413/7910454
leonheess

46

Si vous souhaitez préserver la lisibilité, vous pouvez toujours ajouter une première fonction à Array.protoype:

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

Vous pourrez alors facilement récupérer le premier élément:

[1, 2, 3].first();
> 1

14
il est considéré comme une très mauvaise pratique de bricoler des prototypes de classes de base de quelque manière que ce soit pour une bonne raison.
Dmitry Matveev

11
c'est idiot, comment est-ce .first()mieux de taper que de faire [0]?
jonschlinkert

10
@jonschlinkert Certaines langues ont des index commençant par 1. firstest sans ambiguïté dans ce cas.
Bartek Banachewicz,

6
que renvoie [] .first ()?
Rhyous

1
Dans mon test, il renvoie indéfini. J'essaie de décider si j'aime qu'il revienne indéfini.
Rhyous

33

Vous pouvez simplement utiliser find():

let first = array.find(Boolean);

Ou si vous voulez le premier élément même s'il est faux :

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

Aller plus loin:

Si vous vous souciez de la lisibilité mais ne voulez pas vous fier aux incidences numériques, vous pouvez ajouter une first()fonction à Array.protoypeen la définissant avec Object​.define​Property()ce qui atténue les pièges de la modification directe du prototype d'objet Array intégré ( expliqué ici ).

Les performances sont plutôt bonnes ( find()s'arrête après le premier élément) mais elles ne sont pas parfaites ou universellement accessibles (ES6 uniquement). Pour plus d'informations, lisez la réponse @Selays .

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

Ensuite, pour récupérer le premier élément, vous pouvez le faire:

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

> 'a'

Extrait pour le voir en action:

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

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


3
C'est la meilleure et la plus récente réponse. J'étais sur le point de poster ici la même chose, mais après avoir vu le vôtre :)
Kostanos

Et que se passe-t-il si dans une future version de la langue ils ajouteront find ()? :-) l'extrait ci-dessus ne le briserait-il pas?
Bogdan

@Bogdan Que voulez-vous dire quand ils ajouterontfind() ? find()fait depuis longtemps partie de la langue. C'est la raison pour laquelle l'extrait ci-dessus fonctionne.
leonheess

Ohh. Désolé un peu fatigué, je n'ai pas beaucoup dormi, je parlais en premier.
Bogdan

@Bogdan Cela fonctionnerait toujours parfaitement mais écraserait le futur potentiel - first()méthode de la langue
leonheess

18

Si votre tableau n'est pas garanti d'être rempli à partir de l'index zéro, vous pouvez utiliser 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'

3
Cela devrait vraiment être voté plus haut. C'est la solution la plus concise que je vois qui utilise des vanilles js et représente des tableaux clairsemés.
Dominic P


1
Je déconseille l'utilisation !!elementcar cela sautera les valeurs de falsification. Je recommanderais d'utiliser find()de cette manière:sparse.find((_, index, array) => index in array);
Victor Welling

Approche similaire sans rejeter les valeurs de falsification ici: stackoverflow.com/a/56115413/7910454
leonheess

13
array.find(e => !!e);  // return the first element 

puisque "find" retourne le premier élément qui correspond au filtre && !!ecorrespond à n'importe quel élément.

Remarque Cela ne fonctionne que lorsque le premier élément est pas un « Falsy »: null, false, NaN, "", 0,undefined


1
Abdennour pour clarifier pour d'autres votre condition correspond à n'importe quel élément véridique, c'est-à-dire <code> const example = [null, NaN, 0, undefined, {}, 3, 'a']; const firstTruthyElement = example.find (e => !! e); // attribue le 5ème élément, le premier non falsifié: {} </code>
PDA

Merci @PDA pour le rattrapage. BTW, une chaîne vide est également considérée comme falsifiée
Abdennour TOUMI

3
c'est génial et fonctionne également très bien dans TypeScript. Et pour simplifier array.find(() => true);? Cela vous permet également de faire [false].find(() => true).
Simon Warta

@SimonWarta fonctionne bien sûr .find(value => true)comme prévu… mais honnêtement, si vous voulez un code plus propre et pour conserver la frappe en tapuscrit, utilisez la déstructuration .
Flavien Volken

Voir cette réponse pour une manière similaire sans les pièges d'ignorer les éléments
falsifiés



7

Je connais des gens qui viennent d'autres langages vers JavaScript, à la recherche de quelque chose comme head()ou first()pour obtenir le premier élément d'un tableau, mais comment faire?

Imaginez que vous ayez le tableau ci-dessous:

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

En JavaScript, vous pouvez simplement faire:

const first = arr[0];

ou une façon plus propre et plus récente est:

const [first] = arr;

Mais vous pouvez aussi simplement écrire une fonction comme ...

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

Si vous utilisez un trait de soulignement, il existe une liste de fonctions faisant la même chose que vous recherchez:

_.first 

_.head

_.take

6

Méthode qui fonctionne avec les tableaux , et elle fonctionne aussi avec les objets (attention, les objets n'ont pas d'ordre garanti!).

Je préfère le plus cette méthode, car le tableau d'origine n'est pas modifié.

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


4

Un autre pour ceux qui ne s'intéressent qu'aux éléments véridiques

ary.find(Boolean);

4

Recherchez le premier élément d'un tableau à l'aide d'un filtre:

En dactylographie:

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

En clair javascript:

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

Et de même, indexOf:

En dactylographie:

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

En clair javascript:

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

3

Lorsqu'il y a plusieurs correspondances, .first () de JQuery est utilisé pour récupérer le premier élément DOM qui correspondait au sélecteur css donné à jquery.

Vous n'avez pas besoin de jQuery pour manipuler les tableaux javascript.


3

Pourquoi ne pas tenir compte des heures où votre tableau peut être vide?

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

3

Utilisez simplement ary.slice(0,1).pop();

Dans

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


Pourquoi ça et pas ary[0]?
nathanfranke

2

Vous pouvez également utiliser .get (0):

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

Pour obtenir le premier élément du tableau.


1

Utilisez-le pour diviser le caractère en javascript.

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

1

Les exemples précédents fonctionnent bien lorsque l'index du tableau commence à zéro. La réponse de thomax ne reposait pas sur un indice commençant à zéro, mais sur Array.prototype.findlequel je n'avais pas accès. La solution suivante utilisant jQuery $ .each a bien fonctionné dans mon cas.

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

1

Vous pouvez le faire par lodash _.head si facilement.

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>


2
Il fait littéralement ce arr[0]que vous pouvez voir ici, c'est pourquoi je déconseille fortement d' utiliser une gigantesque bibliothèque comme lodash pour une si petite tâche.
leonheess

1

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


C'est de la vanille JS, pas de jQuery, pas de libs, pas de rien ..: P..il fonctionnera si l'index du tableau ne démarre pas à zéro, cela fonctionnera si le monde n'est pas terminé ....
Merak Marey

0

@NicoLwk Vous devez supprimer les éléments avec une épissure, qui feront reculer votre tableau. Alors:

var a=['a','b','c'];
a.splice(0,1);
for(var i in a){console.log(i+' '+a[i]);}

2
Cette réponse est un commentaire à la réponse ci-dessus (NicoLwks), et devrait être supprimée
Lino

0

Déclarez un prototype pour obtenir le premier élément du tableau comme:

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

Ensuite, utilisez-le comme:

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

Ou simplement (:

first = array[0];

0

Si vous enchaînez des fonctions de vue au tableau, par exemple

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

Et voulez le premier élément après ces fonctions, vous pouvez simplement ajouter un .shift()il ne modifie pas l'original array, c'est une meilleure façon alorsarray.map(i => i+1).filter(=> i > 3)[0]

Si vous voulez le premier élément d'un tableau sans modifier l'original, vous pouvez utiliser array[0]ou array.map(n=>n).shift()(sans la carte, vous modifierez l'original. Dans ce cas, je suggère la ..[0]version.


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

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

Faites n'importe quel tableau d'objets ( req), puis faites simplement Object.keys(req)[0]pour choisir la première clé du tableau d'objets.


2
Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question pour les lecteurs à l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
DimaSan

0

La réponse de @thomax est plutôt bonne, mais échouera si le premier élément du tableau est faux ou faux-y (0, chaîne vide, etc.). Mieux vaut simplement retourner vrai pour tout ce qui n'est pas défini:

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

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

-1

ES6 facile:

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

let firstValue = a.find(v => v)
let firstIndex = a.findIndex(v => v)

1
Non… il renverra la première valeur définie. Si le premier est nul, non défini, faux, 0 ou une chaîne vide, celui-ci sera ignoré. Essayez:[false, 0, null, undefined, '', 'last'].find(v => v)
Flavien Volken

Bon point, ma solution ne fonctionne que pour les tableaux avec des valeurs définies.
Jan Jarčík

1
Alors pourquoi filtrer en utilisant la valeur? a.find(value => true)ne rejettera aucune valeur. Pourtant, je ne recommande pas d'utiliser find pour obtenir le premier élément.
Flavien Volken

1
@ MiXT4PE renvoyant vrai (comme dans votre réponse) est correct car il s'arrêtera au premier élément, ici il renvoie l'élément lui-même… qui continuera si celui-ci est considéré comme faux
Flavien Volken

1
@ MiXT4PE utilisant "find" est plus lent, plus compliqué et moins élégant. Je doute également qu'il existe un éditeur intelligent capable de refactoriser cette opération. Utiliser la déstructuration est beaucoup plus efficace, compris par le langage (donc vous pouvez refactoriser), le type est compris par le compilateur (en cas de TS), et très probablement la solution la plus rapide.
Flavien Volken
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.