Как получить первое N количество элементов из массива

388

Я работаю с Javascript (ES6) / реакцией FaceBook и пытаюсь получить первые 3 элемента массива, который различается по размеру. Я хотел бы сделать эквивалент Linq take (n).

В моем файле Jsx у меня есть следующее:

var items = list.map(i => {
  return (
    <myview item={i} key={i.id} />
  );
});

Затем, чтобы получить первые 3 предмета, которые я пробовал

  var map = new Map(list);
    map.size = 3;
    var items = map(i => {
      return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />);
    });

Это не сработало, так как карта не имеет установленной функции.

Можете ли вы помочь?

javascript reactjs user1526912
источник
4
Может быть, я неправильно понимаю проблему, но почему бы не использовать что-то подобное, list.slice(0, 3);а затем повторить это?
Джесси Кернаган
Почему вы хотите использовать карту? Если я правильно понимаю ваше требование, вы можете просто использовать слайс, чтобы взять первые n элементов.
Абхишек Джайн
Если учитель сказал использовать карту? :) Прошу прощения, если это законный вопрос, но это было просто домашнее задание.
диневала
Пожалуйста, подумайте об изменении принятого ответа на тот, который оказался более полезным для общественности
Брайан Вебстер

Ответы:

405

Я считаю, что вы ищете это: 

// ...inside the render() function

var size = 3;
var items = list.slice(0, size).map(i => {
    return <myview item={i} key={i.id} />
}

return (
  <div>
    {items}
  </div>   
)
Патрик Шонесси
источник
623

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

array.slice(0, n);
Ориоль
источник
58
Обратите внимание, что sliceфункция для массивов возвращает поверхностную копию массива и не изменяет исходный массив. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Дэнни Хардинг
30

Это может быть удивительно, но lengthсвойство массива не только используется для получения количества элементов массива, но также доступно для записи и может использоваться для установки MDN-ссылки на длину массива. . Это изменит массив.

Если текущий массив больше не нужен и вы не заботитесь об неизменяемости или не хотите выделять память, то есть для игры самый быстрый способ

arr.length = n

очистить массив

arr.length = 0
Pawel
источник
ты уверен что это быстрее чем arr = []?
GrayedFox
3
Преимущество здесь состоит в том, чтобы избежать выделения памяти. Инициализация новых объектов во время выполнения, то есть для игр, запускает сборщик мусора и мусор.
Павел
Стоит отметить, что это приведет к изменению массива, где slice вернет мелкую копию. Это становится большой разницей, если вам нужно использовать предметы, которые вы только что урезали.
Ynot
1
@ Не ладно, я сделаю это немного более очевидным
Павел
4
Это также расширит массив, если он меньше, чем N
Svec
13

Не пытайтесь делать это с помощью функции карты. Функция карты должна использоваться для отображения значений из одного в другое. Когда количество входов и выходов совпадают.

В этом случае используйте функцию фильтра, которая также доступна в массиве. Функция фильтра используется, когда вы хотите выборочно принимать значения, обрабатывая определенные критерии. Тогда вы можете написать свой код как

var items = list
             .filter((i, index) => (index < 3))
             .map((i, index) => {
                   return (
                     <myview item={i} key={i.id} />
                   );
              });
Сандип
источник
1
В целом вы правы, но семантически вы должны использовать фильтр, чтобы сначала отфильтровать набор элементов, а затем отобразить отфильтрованный набор, если вы используете этот подход.
Крис
8
Функция фильтра будет проходить через все элементы в массиве, а срез - нет, так что лучше с точки зрения производительности использовать срез, верно?
elQueFaltaba
11

Вы можете фильтровать с помощью indexмассива.

var months = ['Jan', 'March', 'April', 'June'];
months = months.filter((month,idx) => idx < 2)
console.log(months);
Развернуть фрагмент

Фредди
источник
2
.filterсам по себе это не лучший выбор, по крайней мере, если входной массив может быть длинным. .filterпроходит через каждый элемент массива, проверяя его состояние. .sliceне будет делать этого, а просто извлечет первые n элементов, а затем остановит обработку - что определенно будет тем, что вам нужно для длинного списка. (Как @elQueFaltaba уже сказал в комментариях к другому ответу.)
MikeBeaton
9

Следующее сработало для меня.

array.slice( where_to_start_deleting, array.length )

Вот пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange  ->These first two we get as resultant
FlyingSnowGhost
источник
4
В первом примере вы используете, sliceно во втором вы используете splice.
Веслав
3
Это тоже неправильно. Вы получите ["Apple", "Mango"]от этого. Первая часть слайса - это не «с чего начать удаление», а с чего начать слайс. Он не изменяет исходный массив и ничего не удаляет.
Ангел Иосиф Пискола
0

Использовать фильтр

Не лучшая практика, а другой способ

const cutArrByN = arr.filter((item, idx) => idx < n);

Omer
источник