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

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

comme ça

alert(ary[0])

Pourquoi jQuery-ifiez-vous un tableau JavaScript vanille? Utilisez JavaScript standard!

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

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array

Aussi,

Source , gracieuseté de bobince

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.

Utilisation de la déstructuration ES6

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

C'est la même chose que

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

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']) );

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

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

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'

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

Essayez alert(ary[0]);.

Ce n'est que si vous utilisez underscore.js ( http://underscorejs.org/ ) que vous pouvez faire:

_.first(your_array);

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

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;

Dans ES2015 et supérieur, à l'aide de la déstructuration des baies:

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

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

ary.find(Boolean);

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

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.

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

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

Vous pouvez également utiliser .get (0):

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

Pour obtenir le premier élément du tableau.

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

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

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>

@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]);}

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

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.

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.

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

ES6 facile:

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

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