Как получить первый элемент массива?

236

Как вы получаете первый элемент из массива, как это:

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

Я попробовал это:

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

Но это вернется [object Object]. Поэтому мне нужно получить первый элемент из массива, который должен быть элементом 'first'.

MacMac
источник
2
Я настоятельно рекомендую отсортировать ответы по активным
leonheess

Ответы:

338

как это

alert(ary[0])
Джон Хартсок
источник
35
var a = []; a[7] = 'foo'; alert(a[0]);
Петах
72
Это предполагает, что первый элемент в массиве всегда имеет индекс 0. Вы знаете, что они говорят о предположении ...
Энди
16
@ Andy Не было никаких предположений, так как вопрос OP был довольно ясным и конкретным.
Джон Хартсок
5
@ Пета, в этом коде нет ничего плохого. Он просто показывает undefined, поскольку это значение a [0], которое фактически является первым элементом в массиве. Если вы хотите, чтобы он показывал foo, вы должны пропустить все неопределенные значения, но это не будет первый элемент в массиве.
Мишель ван дер Блонк
5
@MichielvanderBlonk Я просто указал на крайний случай, который некоторые пользователи могут не ожидать.
Петах
202

Почему вы используете jQuery-ванильный массив JavaScript? Используйте стандартный JavaScript!

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

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

Также, нужно больше jQuery

Источник , любезно предоставленный Бобинсом

Мэтт Болл
источник
1
Обратитесь к этому ответу о том, почему это решение не всегда работает.
Густаво Штраубе
Спасибо за исторический скриншот :)
Boern
92

Некоторые из способов ниже для разных обстоятельств.

В большинстве обычных случаев самый простой способ получить доступ к первому элементу - это

yourArray[0]

но для этого нужно проверить, существует ли [0] на самом деле.

Есть реальные случаи, когда вас не интересует исходный массив, и вы не хотите проверять, существует ли индекс, вы просто хотите получить первый элемент или неопределенный встроенный.

В этом случае вы можете использовать метод shift (), чтобы получить первый элемент, но будьте осторожны, так как этот метод изменяет исходный массив (удаляет первый элемент и возвращает его). Поэтому длина массива уменьшается на один. Этот метод может использоваться во встроенных случаях, когда вам просто нужно получить первый элемент, но вас не волнует исходный массив.

yourArray.shift()

Важно знать, что два приведенных выше варианта возможны только в том случае, если ваш массив начинается с индекса [0].

Есть случаи, когда первый элемент был удален, например, с помощью delete yourArray [0], оставляя ваш массив с «дырами». Теперь элемент в [0] просто не определен, но вы хотите получить первый «существующий» элемент. Я видел много реальных случаев этого.

Итак, предполагая, что у нас нет знаний о массиве и первом ключе (или мы знаем, что есть дыры), мы все равно можем получить первый элемент.

Вы можете использовать find (), чтобы получить первый элемент.

Преимущество find () заключается в его эффективности, поскольку он выходит из цикла, когда достигается первое значение, удовлетворяющее условию (подробнее об этом ниже). (Вы можете настроить условие так, чтобы исключить пустые или другие пустые значения)

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

Я также хотел бы включить filter () в качестве опции, чтобы сначала «исправить» массив в копии, а затем получить первый элемент, сохраняя при этом исходный массив без изменений (без изменений).

Другая причина, чтобы включить сюда filter (), заключается в том, что он существовал до find (), и многие программисты уже использовали его (это ES5 против find (), являющегося ES6).

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

Предупреждение, что filter () не является эффективным способом (filter () проходит через все элементы) и создает другой массив. Это хорошо для небольших массивов, поскольку влияние на производительность будет незначительным, например, ближе к использованию forEach.

(Я вижу, что некоторые люди предлагают использовать цикл for ... in для получения первого элемента, но я бы рекомендовал не использовать этот метод для ... in, чтобы использовать его для перебора массива, для которого важен порядок индекса, потому что он не ' не гарантирует порядок, хотя вы можете утверждать, что браузеры в основном соблюдают порядок. Кстати, forEach не решает проблему, как многие предлагают, потому что вы не можете ее сломать, и она будет проходить через все элементы. Было бы лучше использовать простое для цикл и проверяя ключ / значение

Обе функции find () и filter () гарантируют порядок элементов, поэтому их можно безопасно использовать, как указано выше.

Selay
источник
1
Почему бы просто не сместить массив потом, например: var element = yourArray.shift (); yourArray.unshift (элемент);
Грег
9
Потому что это очень неэффективно и плохо. Вы можете получить первый элемент гораздо более эффективным способом. И shift, и unshift выполняют некоторые проверки и пересекают весь массив, чтобы выполнить задачу, потому что при удалении или добавлении нового элемента в начало все остальные индексы должны быть смещены. Это как если бы у вас был автобус, полный людей, и когда кто-то с заднего сидения хочет сойти, вы опорожняете автобус через переднюю дверь, а затем просите его сесть снова.
Selay
1
@ Задержка, которая зависит от конкретных особенностей переводчика.
Мишель ван дер Блонк
@Michiel van der Blonk Можете ли вы сообщить мне, какой переводчик делает это, как вы упомянули. Я очень заинтересован. Все известные мне реализации используют цикл и копирование. Так работают массивы JavaScript. Вы не можете просто удалить первый элемент легко, потому что оставшийся массив теперь начинается с 1 (элемент в позиции 0 удален), который вам нужно исправить. Вы не можете творить чудеса, независимо от того, какая у вас внутренняя реализация.
Selay
Если вы используете yourArray.map(n=>n).shift()его, он вернет первый элемент без изменения оригинала ... не знаю, будет ли это лучшим способом, но если вы объедините массив с помощью .map (). Filter (). Some (). Shift (), то все в порядке. .. иначе я бы использовалyourArray[0]
Майкл Дж.
53

Использование ES6 деструктуризации

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

Который так же, как

let first = [1,2,3][0];
Флавиен Волкен
источник
Может быть уместно добавить, что уничтожение - это опция, только если ваш массив начинается с индекса [0].
леонесса
53

Элемент индекса 0 может не существовать, если первый элемент был удален:

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

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

Лучший способ получить первый элемент без jQuery:

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

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

NicoLwk
источник
1
a.entries () [0] должен это сделать :)
Эдсон Медина
1
Это потому, что вы не должны использовать этот тип для перечисления с массивом, так как он перечисляет объекты, а не члены массива. Вместо этого используйте индексирование с традиционным циклом for.
Оскар Дювеборн
Подобный подход ES6 (также не основанный на числовых индексах) здесь: stackoverflow.com/a/56115413/7910454
leonheess
46

Если вы хотите сохранить читабельность, вы всегда можете добавить первую функцию к Array.protoype:

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

А потом вы можете легко получить первый элемент:

[1, 2, 3].first();
> 1
eliocs
источник
14
считается очень плохой практикой каким-либо образом повозиться с прототипами базовых классов по уважительной причине.
Дмитрий Матвеев
11
это глупо, как печатать .first()лучше, чем делать [0]?
Йоншлинкерт
10
@jonschlinkert Некоторые языки имеют индексы, начинающиеся с 1. firstоднозначно в этом случае.
Бартек Банахевич
6
что возвращает [] .first ()?
Rhyous
1
В моем тесте он возвращает неопределенное. Я пытаюсь решить, нравится ли мне возвращение неопределенного.
Rhyous
33

Вы можете просто использовать find():

let first = array.find(Boolean);

Или, если вы хотите первый элемент, даже если он ложный :

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

Пройдя лишнюю милю:

Если вы заботитесь о читабельности, но не хотите полагаться на числовые инциденты, вы можете добавить first()-функцию к Array.protoype, определив ее, с помощью Object​.define​Property()которой можно избежать ошибок, связанных с непосредственным изменением встроенного прототипа объекта Array ( объясняется здесь ).

Производительность довольно хорошая ( find()останавливается после первого элемента), но она не идеальна и не доступна для всех (только ES6). Для получения дополнительной информации прочитайте ответ @Selays .

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

Затем, чтобы получить первый элемент, который вы можете сделать:

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

> 'a'

Фрагмент, чтобы увидеть это в действии:

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

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

leonheess
источник
3
Это самый лучший и самый актуальный ответ. Я собирался опубликовать здесь то же самое, но после того, как я увидел ваши :)
Kostanos
И что произойдет, если в будущей версии языка они добавят find ()? :-) не сломает ли приведенный выше фрагмент?
Богдан
@ Богдан Что ты имеешь в виду, когда они добавятfind() ? find()давно стал частью языка. Это причина, почему приведенный выше фрагмент работает.
leonheess
Оу. Извините, немного устал, я не спал много, я имел в виду в первую очередь.
Богдан
@ Богдан Это все равно будет работать отлично, но перезаписать потенциальный first()метод языка
будущего
18

Если ваш массив не заполнен с нуля индекса, вы можете использовать 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
источник
3
За это действительно стоит проголосовать выше. Это наиболее краткое решение, которое я вижу, которое использует vanilla js и счетчики для разреженных массивов.
Доминик П
Не будет работать в IE11: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Кори Аликс,
1
Я бы посоветовал не использовать, так !!elementкак это пропустит ложные значения. Я бы порекомендовал использовать find()таким образом:sparse.find((_, index, array) => index in array);
Виктор Веллинг
Подобный подход без отклонения ложных значений здесь: stackoverflow.com/a/56115413/7910454
leonheess
13
array.find(e => !!e);  // return the first element 

так как "find" возвращает первый элемент, который соответствует фильтру && !!eсоответствует любому элементу.

Примечание Это работает только тогда , когда первый элемент не является «Falsy»: null, false, NaN, "", 0,undefined

Абденнур ТУМИ
источник
1
Abdennour, чтобы уточнить для других, что ваше условие соответствует любому истинному элементу, например <code> const example = [null, NaN, 0, undefined, {}, 3, 'a']; const firstTruthyElement = example.find (e => !! e); // назначаем 5-й элемент, первый не ложный: {} </ code>
КПК
Спасибо @PDA за догонялки. Кстати, пустая строка считается также ложной
Abdennour TOUMI
3
это здорово, а также отлично работает в TypeScript. Как насчет упрощения до array.find(() => true);? Это позволяет вам делать то [false].find(() => true)же самое .
Симон Варта
@SimonWarta, конечно .find(value => true), просто работает, как и ожидалось ... но, если честно, если вы хотите более чистый код и сохранить набор текста на машинке, используйте деструктуризацию .
Флавиен Волкен,
Смотрите этот ответ аналогичным образом, без ошибок игнорирования ложных элементов
leonheess
9

Попробуй alert(ary[0]);.

thejh
источник
1
Обратитесь к этому ответу о том, почему это решение не всегда работает.
Густаво Штраубе
7

Я знаю, что люди, которые переходят с других языков на JavaScript, ищут что-то вроде head()или first()получают первый элемент массива, но как вы можете это сделать?

Представьте, что у вас есть массив ниже:

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

В JavaScript вы можете просто сделать:

const first = arr[0];

или аккуратнее, новый способ это:

const [first] = arr;

Но вы также можете просто написать функцию, как ...

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

При использовании подчеркивания, есть список функций, которые делают то же самое, что и вы:

_.first 

_.head

_.take
Алиреза
источник
6

Метод, который работает с массивами , и он также работает с объектами (будьте осторожны, у объектов нет гарантированного порядка!).

Я предпочитаю этот метод больше всего, потому что оригинальный массив не изменяется.

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

Еще один для тех, кто занимается только правдивыми элементами

ary.find(Boolean);
Vinnie
источник
4

Найдите первый элемент в массиве, используя фильтр:

В машинописи:

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

В простом JavaScript:

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

И аналогично, indexOf:

В машинописи:

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

В простом JavaScript:

function indexOf(arr, filter) {
    var result;
    return arr.some(function (v, i) { result = i; return filter(v); }) ? result : undefined;
}
Кори Аликс
источник
3

Когда есть несколько совпадений, JQuery .first () используется для выборки первого элемента DOM, который соответствует селектору css, данному jquery.

Вам не нужен jQuery для манипулирования массивами JavaScript.

letronje
источник
3

Почему бы не учитывать время, когда ваш массив может быть пустым?

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
источник
3

Просто используйте ary.slice(0,1).pop();

В

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 (начало, конец) .pop ();

Гильерме HS
источник
Почему это а не ary[0]?
Натанфранке
2

Вы также можете использовать .get (0):

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

Чтобы получить первый элемент массива.

Майкл Павловский
источник
1

Используйте это, чтобы разделить символ в JavaScript.

var str = "boy, girl, dog, cat";
var arr = str.split(",");
var fst = arr.splice(0,1).join("");
var rest = arr.join(",");
Мохит Сингх
источник
1

Предыдущие примеры хорошо работают, когда индекс массива начинается с нуля. Ответ thomax не опирался на индекс, начинающийся с нуля, но полагался на то, Array.prototype.findк чему у меня не было доступа. Следующее решение с использованием jQuery $ .each хорошо работало в моем случае.

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

Вы можете сделать это с помощью 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>

Пенни лю
источник
2
Он буквально делает, arr[0]как вы можете видеть здесь, поэтому я настоятельно не рекомендую использовать гигантскую библиотеку, такую ​​как lodash, для такой маленькой задачи.
leonheess
1

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

Мерак Марей
источник
Это ванильный JS, нет jQuery, нет libs, нет-ничего ..: P..it будет работать, если индекс массива не начинается с нуля, он будет работать, если мир еще не закончился ....
Мерак Марей
0

@NicoLwk Вы должны удалить элементы со сращиванием, что сместит ваш массив обратно. Так:

var a=['a','b','c'];
a.splice(0,1);
for(var i in a){console.log(i+' '+a[i]);}
asinino
источник
2
Этот ответ является комментарием к ответу выше (NicoLwks) и должен быть удален
Lino
0

Объявите прототип, чтобы получить первый элемент массива как:

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

Тогда используйте это как:

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

Или просто (:

first = array[0];
ozhanli
источник
0

Если вы приковываете функции вида к массиву, например

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

И хотят, чтобы первый элемент после этих функций вы можете просто добавить .shift()это не изменяет оригинал array, его лучше путь затемarray.map(i => i+1).filter(=> i > 3)[0]

Если вам нужен первый элемент массива без изменения оригинала, который вы можете использовать array[0]или array.map(n=>n).shift()(без карты вы измените оригинал. В этом случае, кстати, я бы предложил ..[0]версию.

Майкл Дж. Зойдл
источник
0
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

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

Создайте любой объект array ( req), а затем просто Object.keys(req)[0]выберите первый ключ в массиве Object.

Anuga
источник
2
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
DimaSan
0

Ответ @thomax довольно хороший, но потерпит неудачу, если первый элемент в массиве будет false или false-y (0, пустая строка и т. д.). Лучше просто вернуть true для всего, кроме undefined:

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

const first = arr.find((v) => { return (typeof v !== 'undefined'); });
console.log(first); // ''
derikb
источник
-1

ES6 легко:

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

let firstValue = a.find(v => v)
let firstIndex = a.findIndex(v => v)
Ян Ярчик
источник
1
Нет ... он вернет первое определенное значение. Если первое значение равно null, undefined, false, 0 или пустой строке, то это будет пропущено. Попробуйте:[false, 0, null, undefined, '', 'last'].find(v => v)
Флавиен Волкен
Хороший вопрос, мое решение работает только для массива с определенными значениями.
Ян Ярчик
1
Тогда зачем фильтровать по значению? a.find(value => true)не будет отклонять какие-либо значения. Тем не менее, я не рекомендую использовать find, чтобы получить первый элемент.
Флавиен Волкен
1
@ MiXT4PE, возвращающий true (как в вашем ответе), это нормально, потому что он остановится на первом элементе, здесь он возвращает сам элемент ... который будет продолжаться, если этот элемент будет считаться ложным
Flavien Volken
1
@ MiXT4PE с использованием «find» медленнее, сложнее и менее элегантно. Я также сомневаюсь, что есть какой-нибудь умный редактор, способный изменить эту операцию. Использование деструктурирования гораздо более эффективно, понимается языком (так что вы можете рефакторинг), тип понимается компилятором (в случае TS) и, скорее всего, самое быстрое решение.
Флавиен