Cara mendapatkan N pertama elemen dari array

387

Saya bekerja dengan Javascript (ES6) / FaceBook bereaksi dan mencoba untuk mendapatkan 3 elemen pertama dari array yang ukurannya bervariasi. Saya ingin melakukan yang setara dengan Linq take (n).

Dalam file Jsx saya, saya memiliki yang berikut ini:

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

Kemudian untuk mendapatkan 3 item pertama saya mencoba

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

Ini tidak berfungsi karena peta tidak memiliki fungsi yang ditetapkan.

Bisakah Anda membantu?

javascript reactjs pengguna1526912
sumber
4
Mungkin saya salah paham masalah, tetapi mengapa tidak menggunakan sesuatu seperti list.slice(0, 3);dan kemudian mengulanginya?
Jesse Kernaghan
Mengapa Anda ingin menggunakan peta? Jika saya memahami kebutuhan Anda dengan benar, Anda bisa menggunakan slice untuk mengambil elemen pertama.
Abhishek Jain
Jika guru disuruh menggunakan peta? :) Saya minta maaf jika ini adalah pertanyaan yang sah, tetapi hanya terasa seperti pekerjaan rumah.
diynevala
Harap pertimbangkan untuk mengubah jawaban yang diterima menjadi jawaban yang terbukti lebih bermanfaat bagi publik
Brian Webster

Jawaban:

404

Saya yakin yang Anda cari adalah: 

// ...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>   
)
Patrick Shaughnessy
sumber
30

Ini mungkin mengejutkan tetapi lengthproperti dari array tidak hanya digunakan untuk mendapatkan jumlah elemen array tetapi juga dapat ditulis dan dapat digunakan untuk mengatur panjang tautan MDN array . Ini akan mengubah array.

Jika array saat ini tidak diperlukan lagi dan Anda tidak peduli tentang kekekalan atau tidak ingin mengalokasikan memori yaitu untuk permainan cara tercepat adalah

arr.length = n

untuk mengosongkan array

arr.length = 0
Pawel
sumber
Anda yakin ini lebih cepat dari arr = []?
GrayedFox
3
Manfaatnya di sini adalah menghindari alokasi memori. Menginisialisasi objek baru dalam run time i..e untuk game memicu pemulung dan jank.
Pawel
Layak disebutkan bahwa ini akan mengubah array, di mana slice akan mengembalikan salinan yang dangkal. Ini menjadi perbedaan besar jika Anda perlu menggunakan barang-barang yang baru saja Anda potong secara permanen.
Ynot
1
@ Tidak ok, saya akan membuatnya sedikit lebih jelas
Pawel
4
Ini juga akan memperluas array jika lebih kecil dari N
Oldrich Svec
13

Jangan coba melakukan itu menggunakan fungsi peta. Fungsi peta harus digunakan untuk memetakan nilai dari satu hal ke hal lainnya. Ketika jumlah input dan output cocok.

Dalam hal ini gunakan fungsi filter yang juga tersedia pada array. Fungsi filter digunakan ketika Anda ingin secara selektif mengambil nilai dengan kriteria tertentu. Kemudian Anda dapat menulis kode seperti

var items = list
             .filter((i, index) => (index < 3))
             .map((i, index) => {
                   return (
                     <myview item={i} key={i.id} />
                   );
              });
sandeep
sumber
1
Anda sedang benar secara keseluruhan, tetapi secara semantik Anda harus menggunakan filter untuk pertama penyaring bawah set elemen, kemudian, memetakan disaring set jika Anda mengambil pendekatan ini.
Chris
8
Fungsi filter akan melewati semua elemen dalam array, sedangkan slice tidak, jadi lebih baik jika menggunakan slice, kan?
elQueFaltaba
11

Anda dapat memfilter menggunakan indexarray.

var months = ['Jan', 'March', 'April', 'June'];
months = months.filter((month,idx) => idx < 2)
console.log(months);
Luaskan cuplikan

Freddy
sumber
2
.filterpada itu sendiri bukanlah pilihan bagus, setidaknya tidak jika array input mungkin panjang. .filtermelewati setiap elemen array memeriksa kondisinya. .slicetidak akan melakukan ini, tetapi hanya akan mengekstrak elemen n pertama dan kemudian berhenti memproses - yang pasti akan menjadi apa yang Anda inginkan untuk daftar panjang. (Seperti @elQueFaltaba sudah mengatakan dalam komentar untuk jawaban lain.)
MikeBeaton
9

Berikut ini bekerja untuk saya.

array.slice( where_to_start_deleting, array.length )

Berikut ini sebuah contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange  ->These first two we get as resultant
FlyingSnowGhost
sumber
4
Dalam contoh pertama yang Anda gunakan slicetetapi yang kedua Anda gunakan splice.
Veslav
3
Ini juga salah. Anda akan dapatkan ["Apple", "Mango"]dari ini. Bagian pertama dari slice bukanlah "di mana untuk mulai menghapus", itu adalah tempat untuk memulai slice. Itu tidak mengubah array asli dan tidak akan menghapus apa pun.
Malaikat Joseph Piscola
0

Gunakan Filter

Bukan praktik terbaik tetapi cara lain

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

Omer
sumber