Як отримати першу N кількість елементів з масиву


383

Я працюю з реагуванням Javascript (ES6) / FaceBook і намагаюся отримати перші 3 елементи масиву, який залежить від розміру. Я хотів би зробити еквівалент Linq взяти (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} />);
    });

Це не спрацювало, оскільки карта не має встановленої функції.

Чи можете ви допомогти?


4
Можливо, я нерозумію проблему, але чому б не використати щось подібне list.slice(0, 3);і потім це повторити?
Джессі Кернаган

Чому ви хочете використовувати карту? Якщо я правильно розумію вашу вимогу, ви можете просто скористатися фрагментом, щоб взяти перші n елементів.
Abhishek Jain

Якщо вчитель наказав використовувати карту? :) Вибачте, якщо це законне запитання, але це просто відчувалося як домашнє завдання.
діневала

Будь ласка, подумайте про зміну прийнятої відповіді на ту, яка виявилася кориснішою для громадськості
Брайан Вебстер,

Відповіді:


401

Я вважаю, що ви шукаєте:

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


30

Це може бути дивно, але lengthвластивість масиву використовується не тільки для отримання кількості елементів масиву, але також є можливим для запису і може бути використана для встановлення MDN посилання довжини масиву . Це змінить масив.

Якщо поточний масив більше не потрібен і вам не байдуже про незмінність або не хочете виділяти пам'ять, тобто для гри, найшвидший спосіб - це

arr.length = n

щоб виповнити масив

arr.length = 0

ти впевнений, що це швидше, ніж arr = []?
GrayedFox

3
Перевага тут полягає у униканні розподілу пам'яті. Ініціалізація нових об’єктів у час роботи i..e для ігор викликає збирання сміття та дженк.
Pawel

Варто зазначити, що це буде мутувати масив, де фрагмент поверне дрібну копію. Це стає великою різницею, якщо вам потрібно використовувати предмети, які ви просто назавжди врізали.
Ynot

1
@Ynot ok, я зроблю це трохи очевидніше
Pawel

4
Це також дозволить розширити масив , якщо він менше , ніж N
Олдріч Швець

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

4
У першому прикладі ви використовуєте, sliceа в другому ви використовуєте splice.
Веслав

3
Це теж неправильно. Ви отримаєте ["Apple", "Mango"]від цього. Перша частина фрагмента - це не "з чого почати видалення", це з чого почати фрагмент. Він не змінює вихідний масив і нічого не видалить.
Ангел Йосиф Піскола


0

Використовуйте фільтр

Не найкраща практика, але інший спосіб

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.