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

JavaScriptの_.union()メソッドとは？配列の重複を除去して結合する使い方を解説

_.union()メソッドの基本

_.union()は、JavaScriptの便利なライブラリであるunderscore.jsに用意されているメソッドです。この関数は、複数の配列を受け取り、それらすべてに含まれる要素を統合したうえで、重複のない新しい配列（いわゆる「和集合」）を返します。各配列の値をすべて精査し、ユニークな値だけを新しい配列へと取り込んでくれるため、データの整理や重複排除の処理を簡潔に記述できるのが大きな魅力です。

構文

_.union( array1, array2, .... );

引数として渡せる配列の数に制限はなく、2つでも3つでも、必要な数だけ指定できます。

使用例：数値配列の結合

次の例では、_.union()を使って、3つの配列から重複しない要素のみを集めた配列を取得しています。

<html>
<body>
<script 
   src ="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >
</script>
</head>
<body>
<script type="text/javascript">
   document.write(_.union([1, 2, 9, 40],
                          [1, 20, 3, 2],
                          [9, 2]));
</script>
</body>
</html>

出力結果

1,2,9,40,20,3

ご覧のとおり、複数の配列にまたがって重複していた「1」「2」「9」は1回だけ出力され、それぞれ初めて登場した順序で新しい配列に格納されています。

文字列やfalsy値も扱える

_.union()が処理できるのは、数値や文字列だけではありません。空文字列（""）やundefined、nullといったfalsy値（偽と評価される値）を含む配列でも問題なく動作します。

使用例：さまざまな型の値を含む配列

次の例では、文字列・数値・空文字列・undefined・nullなど、あらゆる種類の値を含む配列を_.union()に渡しています。それでも同様に、重複を除いた新しい配列が正しく生成されます。

<html>
<body>
<script 
    src ="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >
</script>
</head>
<body>
<script type="text/javascript">
    document.write(_.union(["hello",2, "hi", 1, ""], 
                           ['the', undefined], 
                           ['', null], 
                           ["*", ""]));
</script>
</body>
</html>

出力結果

hello,2,hi,1,,the,,,*

このように、値の型に関わらず一貫して重複排除を行ってくれるため、実務においても柔軟に活用できます。複数のデータソースから集めた配列をマージしたい場合や、IDリストの重複チェックなどを行いたい場合に、_.union()は非常に有用なツールと言えるでしょう。

  1. JavaScriptの_.size()メソッドとは？配列のサイズを取得する方法を解説

    _.size()メソッドとは_.size()は、JavaScriptの定番ユーティリティライブラリであるunderscore.jsに用意されている関数です。主に配列の要素数（サイズ）を取得するために使われます。このメソッドを使用する前に、underscore.jsのCDNをページに読み込んでおく必要がある点に注意してください。構文_.size(array);例1：通常の配列の場合次の例では、数値を格納した通常の配列を_.size()メソッドに渡し、配列のサイズを取得しています。<html> <body> <head> <script src =

  2. JavaScriptのpadStart()メソッドとは？文字列の先頭にパディングを追加する方法を解説

    padStart()メソッドとはJavaScriptでは、concat()メソッドを使うことで2つの文字列を連結できます。しかし、元の文字列の先頭に特定の文字列を追加したい場合、最も簡単な方法がstring.padStart()メソッドです。このメソッドは、単に文字列を先頭に追加するだけでなく、追加後の合計文字数も管理してくれます。引数は2つあり、1つ目は目標となる長さ（length）、2つ目は追加する文字列です。指定された長さに達するまで、2つ目の文字列が元の文字列の先頭に繰り返し追加されます。構文string.padStart(length, string);length：結果として得られ