JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列の先頭のn個の要素を取得する方法｜_.first()の使い方を解説

JavaScriptで配列の先頭からn個の要素を取得したい場合、自前でロジックを書くこともできますが、JavaScriptライブラリであるunderscore.jsには、この用途に特化した便利な関数_.first()が用意されています。配列操作の際に広く使われる定番メソッドです。

基本構文

_.first(array, n);

第1引数には対象となる配列、第2引数には取得したい要素数（n）を渡します。第2引数の数値を指定すると、配列の先頭からその個数分の要素が出力として返されます。なお、nを省略した場合は先頭の1要素のみが返ります。

例1：引数に配列のみを渡した場合

次の例では、引数として配列だけを渡しています。この場合、戻り値は先頭の1要素、つまりインデックス0の値のみとなります。

<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script>
  var res = JSON.stringify(_.first([
    {name: 'Dhoni', age: 38},
    {name: 'Kohli', age: 35},
    {name: 'Rohit', age: 32},
    {name: 'Dhawan', age: 27}
  ]));
  document.write(res);
</script>
</body>
</html>

実行結果

{"name":"Dhoni","age":38}

例2：取得する個数（n）を指定した場合

次の例では、配列に加えて数値「2」も渡しています。そのため、先頭から2つの要素が配列として返されます。

<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script>
  var res = JSON.stringify(_.first([
    {name: 'Dhoni', age: 38},
    {name: 'Kohli', age: 35},
    {name: 'Rohit', age: 32},
    {name: 'Dhawan', age: 27}
  ], 2));
  document.write(res);
</script>
</body>
</html>

実行結果

[{"name":"Dhoni","age":38},{"name":"Kohli","age":35}]

補足：標準JavaScriptでの代替方法

ライブラリに依存せずに同じ処理を行いたい場合は、ES6以降の標準メソッドArray.prototype.slice()を利用するのが一般的です。

const arr = [{name: 'Dhoni', age: 38}, {name: 'Kohli', age: 35}, {name: 'Rohit', age: 32}];
const firstTwo = arr.slice(0, 2);
console.log(firstTwo); // 先頭の2要素が返る

また、最近のバージョンのlodashでは、_.first()は_.head()というエイリアスとしても利用できます。用途に応じて使い分けるとよいでしょう。

  1. JavaScript配列から一意の値（重複なし）を取得する方法

    JavaScriptの配列に含まれる重複した値を取り除き、一意の値（ユニークな値）だけを取得したい場合は、Setオブジェクトを使うのが最もシンプルで効率的な方法です。 Setは同じ値を1つしか格納できないデータ構造のため、配列をnew Set()に渡すだけで自動的に重複が排除されます。その後、スプレッド構文（[...set]）を使えば、簡単に元の配列形式へ戻すことができます。 サンプルコード 以下は、JavaScriptの配列からすべての一意の値を取得する実際のコード例です。 <!DOCTYPE html> <html lang=ja> <head> <

  2. JavaScriptでオブジェクトの値を取得する方法：Object.values()と_.values()の違いを解説

    JavaScriptにはObject.values()など、オブジェクトの値を取得するためのメソッドがいくつか用意されています。しかし、これらの標準メソッドでは値を取り出すまでの手順がやや長くなりがちです。そこで便利なのが、JavaScriptライブラリ「Underscore.js」が提供する_.values()メソッドです。このメソッドを使えば、forループを記述することなく、オブジェクトの値を直接取得できます。 Object.values()を使った例 まずは標準メソッドであるObject.values()を使った例です。このメソッドで取得した値を順番に表示するには、for...ofループ