
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
JavaScript
2017.10.30
配列変数を使用する際に、同じ値がいくつも格納されていると不都合な場合があります。
このような問題を回避するため、今回は、配列の重複チェックの方法について紹介します。
配列変数に格納されている値が重複していないか、値を1つずつチェックする方法があります。
値を個々にチェックして、重複する値を除去してみます。
表示ボタンをクリックして下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function dispAry() { var ary = [1,3,4,2,3,2,3,3,4,5,2]; var ary2 = []; var flag = true; ary2.push(ary[0]); for(var i = 0; i < ary.length; i++){ flag = true; for(var j = 0; j < ary2.length; j++){ if(ary[i] === ary2[j]){ flag = false; } } if(flag){ ary2.push(ary[i]); } } document.getElementById("dat").value = ary2; } //--> </script> <div style="background-color : #CCC; padding : 20px 20px 1px;"> <form> [1,3,4,2,3,2,3,3,4,5,2] 上記の配列の重複データを除去します <div style="display:inline-flex;"> <input type="button" value="表示" onClick="dispAry()"> <input type="text" id="dat" placeholder="ここに表示されます"> </div> </form> </div>
元の配列aryの値のうち、重複していない値を配列ary2にpushメソッドで格納して、配列ary2を表示しています。
(pushメソッドについては、pushメソッドとはをご参照下さい。)
まず「ary2.push(ary[0]);」として、配列aryの最初の値を配列ary2に格納して、配列aryの次の値から、配列ary2の中の値と重複しないかをチェックし、重複する場合は 変数flag に false を代入しています。
重複チェックの結果、変数flag が true の場合のみ、配列ary2に値を追加していく仕組みです。
for文の詳細については、for文の使い方をご参照下さい。
filterメソッドを使うと、先ほどのように複雑なfor文を使うことなく値の重複チェックを行うことができます。
filterメソッドは、Arrayオブジェクトで用意されているメソッドで、定義されたコールバック関数を配列の各要素に対して呼び出し、コールバック関数が true を返す値の配列を返します。
(Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。)
filterメソッドは、次のように記述します。
重複除去後の配列変数 = 元の配列変数 .filter( function( x, i, self ){
return self .indexOf( x ) === i ;
});
filterメソッドの引数に指定したコールバック関数を、 元の配列変数の要素1つ1つに順に適用して、true を返す要素のみを要素とした配列を生成して返します。
コールバック関数には3つの引数を指定することができます。
第1引数( x ) には、元の配列要素の値が代入されます。
第2引数( i ) は、元の配列要素のインデックス番号を表しています。
第3引数( self )は、元の配列自体です。
indexOf(x) は、配列の要素が初めて現れるインデックス番号を返します。
(indexOfメソッドについては、indexOfメソッドをご参照下さい。)
filterメソッドを使って、重複する値を除去します。
表示ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function dispAry() { var ary = [1,3,4,2,3,2,3,3,4,5,2]; var ary2 = ary.filter(function (x, i, self) { return self.indexOf(x) === i; }); document.getElementById("dat").value = ary2; } //--> </script> <div style="background-color : #CCC; padding : 20px 20px 1px;"> <form> [1,3,4,2,3,2,3,3,4,5,2] 上記の配列の重複データを除去します <div style="display:inline-flex;"> <input type="button" value="表示" onClick="dispAry()"> <input type="text" id="dat" placeholder="ここに表示されます"> </div> </form> </div>
ary の重複要素である「3」が初めて出現するインデックス番号( self.indexOf(3) の返り値 )は 1 となります。
「3」が格納されている要素のインデックス番号は 1、4、6、7 なので、このうち最小のインデックス番号 1 の要素である「3」のみが新しい配列の要素として抽出されます( self.indexOf(3) === i; が true となるのは最初に出現した「3」の場合のみです)。
「2」と「4」についても、同様に、self.indexOf(x) === i; が true を返すのはインデックス番号がそれぞれ 3 と 2 の場合のみとなり、そのインデックス番号の値のみが、新しい配列の要素として抽出されます。
重複する要素のうち、最後の要素を残したい場合は、indexOfメソッドの変わりに、lastIndexOfメソッドを使用します。
(lastIndexOfメソッドについては、lastIndexOfメソッドをご参照下さい。)
また、重複する要素を除去した後、ソートをかけたい場合は、配列のソートをご参照下さい。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.