配列から最初のN個の要素を取得する方法


384

私は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} />);
    });

マップにはセット関数がないため、これは機能しませんでした。

手伝ってくれませんか?


4
多分私は問題を誤解しているかもしれませんが、なぜlist.slice(0, 3);そのようなものを使用してからそれを繰り返しませんか?
Jesse Kernaghan、2016年

なぜ地図を使いたいのですか?要件を正しく理解している場合は、スライスを使用して最初のn個の要素を取得できます。
Abhishek Jain

先生が地図を使うように言ったら?:)これが正当な質問である場合は申し訳ありませんが、それは宿題のように感じました。
diynevala

受け入れられた回答を、より有用であることが証明された回答に変更することを検討してください
ブライアンウェブスター

回答:


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 2018年

3
ここでの利点は、メモリ割り当てを回避できることです。実行時に新しいオブジェクトを初期化すると、つまりゲームの場合、ガベージコレクターとジャンクがトリガーされます。
Pawel

これは配列が変更され、スライスが浅いコピーを返すことを言及する価値があります。完全に切り捨てたアイテムを利用する必要がある場合、これは大きな違いになります。
Ynot

1
@Ynot ok、もう少しわかりやすくします
Pawel

4
これは、配列がN
Oldrich Svec

13

マップ機能を使用してそれを試みないでください。値をあるものから別のものにマップするには、マップ関数を使用する必要があります。入力数と出力数が一致した場合。

この場合、配列でも使用可能なフィルター関数を使用します。フィルター機能は、特定の基準を組み合わせて値を選択的に取得する場合に使用されます。次に、次のようなコードを書くことができます

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

1
あなたは全体的に正しいですが、意味的には、最初に要素のセットをフィルタリングするためにフィルターを使用し、次にこのアプローチを採用している場合はフィルタリングされたセットをマップする必要があります。
クリス

8
フィルター関数は配列内のすべての要素を通過しますが、スライスは通過しないため、スライスを使用する方がパフォーマンスが優れていますよね?
elQueFaltaba 2017年

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が、2番目の例ではを使用しますsplice
Veslav、

3
これも間違っています。あなたはこれから得るでしょう["Apple", "Mango"]。スライスの最初の部分は「削除を開始する場所」ではなく、スライスを開始する場所です。元の配列は変更されず、何も削除されません。
エンジェルジョセフピスコラ


0

フィルターを使用

ベストプラクティスではなく、別の方法

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.