Como obter o primeiro elemento de uma matriz?


236

Como você obtém o primeiro elemento de uma matriz como esta:

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

Eu tentei isso:

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

Mas voltaria [object Object]. Então, eu preciso obter o primeiro elemento da matriz que deve ser o elemento 'first'.


2
Eu recomendo fortemente que as respostas sejam classificadas por active
leonheess

Respostas:


338

como isso

alert(ary[0])

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

72
Isso pressupõe que o primeiro elemento da matriz sempre tenha um índice 0. Você sabe o que eles dizem sobre suposição ...
Andy

16
@ Andy Não havia suposições, pois a pergunta da OP era bastante clara e específica.
John Hartsock

5
@ Petah não há nada de errado com esse código. Ele simplesmente mostra indefinido, já que esse é o valor de um [0], que na verdade é o primeiro item da matriz. Se você deseja mostrar foo, deve pular todos os valores indefinidos, mas esse não seria o primeiro item da matriz.
Michiel van der Blonk

5
@MichielvanderBlonk Eu estava simplesmente apontando um caso que alguns usuários podem não esperar.
Petah


92

Algumas das maneiras abaixo para diferentes circunstâncias.

Na maioria dos casos normais, a maneira mais simples de acessar o primeiro elemento é

yourArray[0]

mas isso exige que você verifique se [0] realmente existe.

Existem casos do mundo real em que você não se importa com a matriz original e não deseja verificar se o índice existe, deseja obter apenas o primeiro elemento ou a linha indefinida.

Nesse caso, você pode usar o método shift () para obter o primeiro elemento, mas tenha cuidado para que esse método modifique a matriz original (remove o primeiro item e o retorna). Portanto, o comprimento de uma matriz é reduzido em um. Este método pode ser usado em casos em linha onde você só precisa obter o primeiro elemento, mas não se importa com a matriz original.

yourArray.shift()

O importante é saber que os dois acima são apenas uma opção se o seu array começar com um índice [0].

Há casos em que o primeiro elemento foi excluído, por exemplo, exclua yourArray [0] deixando sua matriz com "buracos". Agora o elemento em [0] é simplesmente indefinido, mas você deseja obter o primeiro elemento "existente". Eu já vi muitos casos reais disso.

Portanto, supondo que não tenhamos conhecimento da matriz e da primeira chave (ou sabemos que existem buracos), ainda podemos obter o primeiro elemento.

Você pode usar find () para obter o primeiro elemento.

A vantagem de find () é sua eficiência, pois sai do loop quando o primeiro valor que satisfaz a condição é atingido (mais sobre isso abaixo). (Você pode personalizar a condição para excluir também valores nulos ou outros valores vazios)

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

Eu também gostaria de incluir filter () aqui como uma opção para "fixar" primeiro a matriz na cópia e depois obter o primeiro elemento, mantendo intacta a matriz original (não modificada).

Outro motivo para incluir filter () aqui é que ele existia antes de find () e muitos programadores já o estavam usando (é o ES5 contra o find () sendo o ES6).

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

Aviso que filter () não é realmente uma maneira eficiente (filter () percorre todos os elementos) e cria outra matriz. É bom usar em pequenas matrizes, pois o impacto no desempenho seria marginal, mais próximo do uso do forEach, por exemplo.

(Vejo algumas pessoas sugerindo o uso de loop for ... in para obter o primeiro elemento, mas eu recomendaria esse método para ... in não deve ser usado para iterar sobre uma matriz em que a ordem do índice é importante porque não ' Para garantir a ordem, embora você possa argumentar que os navegadores respeitam principalmente a ordem. A propósito, o forEach não resolve o problema, como muitos sugerem, porque você não pode quebrá-lo e ele percorrerá todos os elementos. loop e verificando a chave / valor

Ambos find () e filter () garantem a ordem dos elementos, portanto, são seguros para usar como acima.


1
Por que não apenas mudar a matriz depois, por exemplo: var element = yourArray.shift (); yourArray.unshift (elemento);
Greg

9
Porque é uma coisa muito ineficiente e ruim. Você pode obter o primeiro elemento de uma maneira muito eficiente. Tanto shift como unshift fazem algumas verificações e percorrem toda a matriz para realizar a tarefa, porque quando você remove ou adiciona um novo elemento ao início, todos os outros índices devem ser alterados. É como se você tivesse um ônibus cheio de pessoas e, quando alguém do banco traseiro quiser descer, você esvazia o ônibus pela porta da frente e depois pede para que entrem novamente.
Selay

1
@Selay que depende dos internos específicos do intérprete.
Michiel van der Blonk

@Michiel van der Blonk Você pode me informar qual intérprete faz isso como você mencionou. Estou muito interessado. Todas as implementações conhecidas por mim usam loop e cópia. É assim que as matrizes JavaScript funcionam. Você não pode simplesmente remover o primeiro elemento facilmente, porque a matriz restante agora começa em 1 (elemento na posição 0 removido), que você precisa corrigir. Você não pode fazer mágica, não importa qual implementação interna você tenha.
Selay

Se você usá- yourArray.map(n=>n).shift()lo, retornará o primeiro item sem modificar o original ... não sei se é a melhor maneira, mas se você agrupar uma matriz com .map (). Filter (). Some (). Shift () está tudo bem .. i de outro modo seria usaryourArray[0]
Michael J. Zoidl

53

O elemento do índice 0 pode não existir se o primeiro elemento tiver sido excluído:

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

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

Melhor maneira de obter o primeiro elemento sem o jQuery:

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

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


1
a.entries () [0] deve fazê-lo :)
Edson Medina

1
Isso ocorre porque você não deve usar esse tipo de enumeração com uma matriz, pois está enumerando objetos e não membros da matriz. Use a indexação com um loop for tradicional.
Oskar Duveborn

Abordagem semelhante ES6 (também não depender de índices numéricos) aqui: stackoverflow.com/a/56115413/7910454
leonheess

51

Usando a desestruturação do ES6

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

Qual é o mesmo que

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

Pode ser relevante acrescentar que Destruir é apenas uma opção se sua matriz começar com um índice [0].
Leonheess 16/05/19

46

Se você deseja preservar a legibilidade, sempre pode adicionar uma primeira função ao Array.protoype:

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

A, então você pode recuperar facilmente o primeiro elemento:

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

14
é uma prática muito ruim mexer com protótipos de classes base de qualquer maneira por um bom motivo.
Dmitry Matveev

11
isso é bobagem, como é a digitação .first()melhor do que fazer [0]?
Json

10
@jonschlinkert Alguns idiomas têm índices que começam em 1. firsté inequívoco nesse caso.
Bartek Banachewicz

6
o que [] .first () retorna?
Rhyous

1
No meu teste, ele retorna indefinido. Estou tentando decidir se gosto retornando indefinido.
Rhyous

33

Você pode apenas usar find():

let first = array.find(Boolean);

Ou se você deseja o primeiro elemento, mesmo que falso :

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

Indo a milha extra:

Se você se preocupa com a legibilidade, mas não quer contar com incidências numéricas, pode adicionar uma first()função -f Array.protoypedefinindo-a com a Object​.define​Property()qual atenua as armadilhas da modificação direta do protótipo do objeto Array incorporado ( explicado aqui ).

O desempenho é muito bom ( find()para após o primeiro elemento), mas não é perfeito ou universalmente acessível (somente ES6). Para mais informações, leia a resposta @Selays .

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

Em seguida, para recuperar o primeiro elemento, você pode fazer:

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

> 'a'

Snippet para vê-lo em ação:

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

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


3
Esta é a melhor e mais atualizada resposta. Eu estava prestes a postar aqui o mesmo, mas depois que eu vi seus de :)
Kostanos

E o que acontece se, em uma versão futura do idioma, eles adicionarem find ()? :-) o snippet acima não quebraria?
Bogdan

@ Bogdan O que você quer dizer com quando eles vão adicionarfind() ? find()faz parte do idioma há muito tempo. É a razão pela qual o snippet acima funciona.
Leonheess 09/09/19

Ohh Desculpe pouco cansado não dormi muito que eu estava me referindo primeiro.
Bogdan

@Bogdan Ele ainda iria funcionar perfeitamente bem, mas substituir o potencial futuro first()-method da língua
leonheess

18

Se não for garantido que sua matriz seja preenchida a partir do índice zero, você poderá usar 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
Isso realmente deve ser votado mais alto. É a solução mais concisa que vejo que usa js vanilla e é responsável por matrizes esparsas.
Domingos P


1
Eu desaconselho o uso, !!elementpois ele pula valores falsos. Eu recomendo usar find()desta maneira:sparse.find((_, index, array) => index in array);
Victor Welling

Abordagem semelhante sem descartando valores Falsas aqui: stackoverflow.com/a/56115413/7910454
leonheess

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

desde que "encontre" retorne o primeiro elemento que corresponde ao filtro && !!ecorresponde a qualquer elemento.

Nota Isto funciona apenas quando o primeiro elemento não é um "Falsas": null, false, NaN, "", 0,undefined


1
Procure esclarecer aos outros que sua condição corresponde a qualquer elemento verdadeiro, ou seja, <code> const example = [null, NaN, 0, undefined, {}, 3, 'a']; const firstTruthyElement = example.find (e => !! e); // atribui o quinto elemento, o primeiro não falso: {} </code>
PDA

Obrigado @PDA pela atualização. Aliás, cadeia vazia é considerado também Falsas
Abdennour Toumi

3
isso é ótimo e também funciona muito bem no TypeScript. Que tal simplificar array.find(() => true);? Isso permite que você faça [false].find(() => true)também.
Simon Warta

@SimonWarta, .find(value => true)é claro, está funcionando como o esperado ... mas, honestamente, se você deseja um código mais limpo e para continuar digitando o texto datilografado, use a desestruturação .
Flavien Volken

Veja esta resposta de uma forma semelhante sem as armadilhas de ignorar elementos Falsas
leonheess



7

Eu sei que pessoas que vêm de outros idiomas para JavaScript, procurando algo como head()oufirst() para obter o primeiro elemento de uma matriz, mas como você pode fazer isso?

Imagine que você tem a matriz abaixo:

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

Em JavaScript, você pode simplesmente fazer:

const first = arr[0];

ou uma maneira mais limpa, a maneira mais nova é:

const [first] = arr;

Mas você também pode simplesmente escrever uma função como ...

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

Se você estiver usando sublinhado, há uma lista de funções fazendo a mesma coisa que você procura:

_.first 

_.head

_.take

6

Método que funciona com matrizes e também com objetos (cuidado, os objetos não têm uma ordem garantida!).

Prefiro mais esse método, porque a matriz original não é modificada.

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

Outro para aqueles preocupados apenas com elementos da verdade

ary.find(Boolean);

4

Encontre o primeiro elemento em uma matriz usando um filtro:

Em texto datilografado:

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

Em javascript simples:

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

E da mesma forma, indexOf:

Em texto datilografado:

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

Em javascript simples:

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

3

Quando há várias correspondências, o .first () do JQuery é usado para buscar o primeiro elemento DOM que corresponde ao seletor de css fornecido ao jquery.

Você não precisa do jQuery para manipular matrizes javascript.


3

Por que não considerar os horários em que sua matriz pode estar vazia?

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

Apenas use ary.slice(0,1).pop();

No

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


Por que isso e não ary[0]?
nathanfranke

2

Você também pode usar .get (0):

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

Para obter o primeiro elemento da matriz.


1

Use isso para dividir caracteres em javascript.

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

1

Os exemplos anteriores funcionam bem quando o índice da matriz começa em zero. A resposta da thomax não se baseou no índice começando em zero, mas no Array.prototype.findqual eu não tinha acesso. A seguinte solução usando jQuery $ .each funcionou bem no meu caso.

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

Você pode fazer isso por lodash _.head tão facilmente.

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
Ele literalmente faz o arr[0]que você pode ver aqui, e é por isso que eu desencorajo fortemente o uso de uma biblioteca gigantesca como o lodash para uma tarefa tão pequena.
Leonheess 13/05/19

1

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


Isso é baunilha JS, sem jQuery, sem bibliotecas, sem nada ..: P..it funcionará se o índice da matriz não iniciar em zero, funcionará se o mundo não tiver terminado ...
Merak Marey

0

@NicoLwk Você deve remover elementos com emenda, que mudará sua matriz de volta. Assim:

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

2
Esta resposta é um comentário a aboves (NicoLwks) resposta, e deve ser eliminado
Lino

0

Declare um protótipo para obter o primeiro elemento da matriz como:

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

Em seguida, use-o como:

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

Ou simplesmente (:

first = array[0];

0

Se você estiver encadeando funções de exibição para o array, por exemplo,

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

E deseja o primeiro elemento após essas funções, você pode simplesmente adicionar um .shift()item que não modifica o original array, é uma maneira melhorarray.map(i => i+1).filter(=> i > 3)[0]

Se você deseja o primeiro elemento de uma matriz sem modificar o original, você pode usar array[0]ou array.map(n=>n).shift()(sem o mapa você modificará o original. Nesse caso, por exemplo, sugiro a ..[0]versão.


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

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

Faça qualquer array de objetos ( req) e, em seguida, simplesmente Object.keys(req)[0]escolha a primeira chave na matriz de objetos.


2
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
DimaSan

0

A resposta de @thomax é muito boa, mas falhará se o primeiro elemento da matriz for falso ou falso-y (0, string vazia etc.). Melhor simplesmente retornar true para algo diferente de indefinido:

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

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

-1

ES6 fácil:

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

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

1
Não ... ele retornará o primeiro valor definido. Se o primeiro for nulo, indefinido, falso, 0 ou uma sequência vazia, esse será ignorado. Tente:[false, 0, null, undefined, '', 'last'].find(v => v)
Flavien Volken

Bom ponto, minha solução funciona apenas para array com valores definidos.
Jan Jarčík

1
Então, por que filtrar usando o valor? a.find(value => true)não descartará nenhum valor. Ainda assim, não recomendo o uso de find para obter o primeiro item.
Flavien Volken 15/10/1918

1
@ MiXT4PE retornando true (como na sua resposta) é bom porque ele vai parar no primeiro elemento, aqui ele retorna o elemento em si ... que continuará se que um é considerado falso
Flavien Volken

1
@ MiXT4PE usando "find" é mais lento, mais complicado e menos elegante. Também duvido que exista um editor inteligente capaz de refatorar essa operação. O uso da desestruturação é muito mais eficiente, entendido pela linguagem (para que você possa refatorar), o tipo é entendido pelo compilador (no caso do TS) e muito provavelmente a solução mais rápida.
Flavien Volken 14/05/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.