Как получить первое 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"]от этого. Первая часть слайса - это не «с чего начать удаление», а с чего начать слайс. Он не изменяет исходный массив и ничего не удаляет.

— Ангел Иосиф Пискола

1

С https://github.com/Siderite/LInQer вы можете Enumerable.from (список) .take (3) .toArray ();

— Сидерит Zackwehdex
источник

0

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

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

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

— Omer
источник