-
JavaScriptで配列から一意な最長文字列値を検索・抽出する方法
JavaScriptでは、オブジェクトの配列から特定の条件を満たす要素を抽出したい場面がよくあります。本記事では、「text」というキーを持つオブジェクトの配列から、文字列が最も長い要素を重複なしで指定件数だけ取り出す関数の実装方法を解説します。 問題の定義 まず、次のようなオブジェクト配列を例に考えてみましょう。 サンプルデータ const arr = [ {text:use}, {text: secur}, {text: form}, {text: user}, {text: users}, {text: form}, {text
-
JavaScriptで条件に基づいてオブジェクト配列を並べ替える方法
問題の概要カードゲームに参加するプレイヤーのスコアを格納した、次のようなオブジェクトの配列があるとします。const scorecard = [{ name: Zahir, score: 23 }, { name: Kabir, score: 13 }, { &n
-
JavaScriptで配列を並べ替えずに一意な要素の数をカウントする方法
文字列リテラルを含む配列の中に、重複した値がいくつか混在しているケースを考えてみましょう。const arr = [Cat, Dog, Cat, Elephant, Dog, Grapes, Dog, Lion, Grapes, Lion];ここで求められているのは、配列内に存在する一意(ユニーク)な要素の個数を返す関数です。この処理には Array.prototype.reduce() と Array.prototype.lastIndexOf() を組み合わせて使用します。仕組みの解説lastIndexOf() は、指定した値が配列内で最後に出現するインデックスを返すメソッドです。そのため
-
JavaScriptでオブジェクト配列から上位n個の最大値を取得する方法
次のような、オブジェクトを要素に持つ配列があるとします。const arr = [ {id:0,start:0,duration:117,slide:4,view:0}, {id:0,start:0,duration:12,slide:1,view:0}, {id:0,start:0,duration:41,slide:2,view:0}, {id:0,start:0,duration:29,slide:3,view:0}, {id:0,start:0,duration:123,slide:3,view:0}, {id:0,start:0,dur
-
JavaScriptで別の配列の対応する値に基づいて配列の要素を取得する方法
今回は、同じ長さを持つ2つの配列を扱います。例として、次の2つの配列を考えてみましょう。const array1 = [a,b,c,d,e,f,g,h]; const array2 = [ 1, 0, 0, 1 , 0, 0, 1, 0];両方の配列は必ず同じ長さであるものとします。今回作成するのは、第2の配列から渡された値を受け取り、その値が第2の配列内に存在するインデックスと同じ位置にある、第1の配列のすべての要素からなる部分配列を返す関数です。たとえば findSubArray(0) を呼び出すと、戻り値は次のようになります。[b, c, e, f, h]これは、第2の配列で 0 が存在
-
JavaScriptでネストされた配列から最大値を見つける方法
JavaScriptでは、数値が入れ子になった配列(ネストされた配列)から最大値を取り出したい場面があります。この記事では、任意の深さまでネストされた数値配列を受け取り、その中に含まれる最大の数値を返すシンプルな関数を実装していきます。 問題の例 まず、次のような配列を入力として渡すケースを考えてみましょう。 const arr = [ 34, 65, 67, [ 43, 76, 87, 23, 56, 7, [ 54, 7, 87, 23, 79, 314, 2 ], 54 ], 54, 4, 2 ]; この場合、期待される出力は次の
-
【JavaScript】配列の長さを保ったまま重複要素を削除する方法
この記事では、配列を受け取り、重複する要素をすべて削除し、削除した数と同じ数の空文字列()を末尾に追加することで、配列全体の長さを元のまま維持する関数をJavaScriptで実装する方法を解説します。 たとえば、重複した値が4つ見つかった場合は、その4つをすべて取り除き、代わりに4つの空文字列を配列の末尾に挿入します。こうすることで、処理後も配列の要素数はまったく変わりません。 reduce() を使った実装例 const arr = [1, 2, 3, 1, 2, 3, 2, 2, 3, 4, 5, 5, 12, 1, 23, 4, 1]; const deleteAndInsert =
-
JavaScriptで配列をネストした配列(サブ配列)に変換する方法
今回は、数値の配列と数値 n を受け取る関数を作成します。ただし、n は配列内のどの要素以上であるものとします。この関数の役割は、連続する要素の合計が n を超えた時点で配列をサブ配列に分割することです。処理のイメージたとえば、次のようなケースを考えてみましょう。// 元の配列が次の場合: const arr = [2, 1, 2, 1, 1, 1, 1, 1]; // 数値 n が 4 であれば、出力は以下のようになります: const output = [ [ 2, 1 ], [ 2, 1, 1 ], [ 1, 1, 1 ] ];ご覧のとおり、各サブ配列内の要素の合計は n(= 4)を超え
-
JavaScriptで文字列に含まれる数値に従って配列をソートする方法
次のような、各要素が1つ以上の数字を含む文字列の配列があるとします。const arr = [di5aster, ca1amity, cod3, ho2me3, ca11ing];ここでは、この配列を各文字列に含まれる数字の昇順で並べ替える関数を作成する必要があります。期待される正しい並び順は以下のとおりです。const output = [ ca1amity, cod3, di5aster, ca11ing, ho2me3 ];各文字列から抽出される数値は、それぞれ 5、1、3、23、11 となるため、この順序で並ぶことになります。実装コードまず、文字列から数字部分だけを取り出す関数を用意し
-
JavaScriptで親キーをもとに子キー(子孫ID一覧)を生成する方法を解説
Webアプリケーションの開発では、カテゴリやフォルダ階層のように親子関係を持つデータを扱う機会が多くあります。本記事では、parent_id を持つオブジェクトの配列から、各要素に「直接・間接の子孫すべてのID」をまとめた childs プロパティを付与する方法を解説します。 元データの確認 まず、今回使用するサンプルデータです。各オブジェクトは id、parent_id、title の3つのプロパティを持ち、parent_id が 0 のものは最上位(親を持たない)要素を表します。 const arr = [ { id: 1, parent_id: 0, title: Movi
-
JavaScriptで2つの配列を比較し、共通しない要素を取得する方法
はじめに共通の値を一部含む2つの配列があるとき、「どちらか一方にしか存在しない要素」だけを抽出した新しい配列を返す関数を作成する方法を解説します。例を見てみましょう。// 2つの配列が以下の場合:const first = [cat, dog, mouse];const second = [zebra, tiger, dog, mouse];// 期待される出力:const output = [cat, zebra, tiger]// この3つの要素だけが両方の配列に共通しないためです実装方法この問題は、スプレッド構文(...)を使って2つの配列を結合し、filter()メソッドで「両方の配列
-
JavaScriptで配列からすべてのN番目の要素を削除する方法
今回は、配列と数値nを受け取り、配列内のn番目ごとの要素をその場で(in place)削除する関数「removeNth」を作成する方法を解説します。 この処理は、Array.prototype.splice()メソッドを使うことで簡単に実現できます。splice()は指定した位置の要素を削除できるメソッドで、filter()のように新しい配列を生成するのではなく、元の配列そのものを直接変更するのが特徴です。 実装例 以下のコードでは、forループでn番目ごとのインデックスにアクセスしながら、splice()で要素を1つずつ削除しています。ループの開始位置が「n - 1」となっているのは、Ja
-
JavaScriptで動的なJSON配列の各要素を1つのオブジェクトに統合する方法
JavaScriptで開発を行っていると、「複数のプロパティを持つオブジェクトが並んだJSON配列」を、すべてのプロパティを1つのオブジェクトにまとめた形に変換したい場面によく出会います。例えば、次のようなオブジェクトの配列があるとします。const arr = [ {name1: firstString}, {name2: secondString}, {name3: thirdString}, {name4: fourthString}, {name5: fifthString}, {name6: sixthString}, ];実現したいこ
-
JavaScriptで配列の2つの文字列を比較し、すべての文字が含まれるか判定する方法
今回は、配列の第1要素に含まれる文字列が、第2要素の文字列のすべての文字を含んでいる場合に true を返す関数を作成してみましょう。例えば、次のようなケースが考えられます。[hello, Hello] → true大文字・小文字を無視すれば、2つ目の文字列のすべての文字が1つ目に含まれているため一方、引数が [hello, hey] の場合は false を返します。「hello」には「y」という文字が含まれていないからです。また、[Alien, line] の場合は、「line」のすべての文字が「Alien」に含まれているため true となります。解決のアプローチこの問題は比較的シンプル
-
【JavaScript】オブジェクトから指定したプロパティを抽出して別オブジェクトへ移す方法
JavaScriptでは、あるオブジェクトから特定のプロパティだけを取り出して、別のオブジェクトに移したいケースがよくあります。この記事では、その処理を行うextract()関数の実装方法を解説します。この関数の仕様は以下のとおりです。元のオブジェクトと、取り出したいプロパティ名(キー)のリストを受け取る指定されたキーのプロパティを新しいオブジェクトにコピーする同時に、元のオブジェクトからそれらのプロパティを削除する動作イメージたとえば、次のような2つのオブジェクトがあるとします。obj1 = {color:red, age:23, name:cindy} obj2 = extract(obj
-
JavaScriptで連続する要素と直前の要素の平均値を求める方法
連続する要素の平均を計算するとはここでは、次のような数値の配列を例に考えてみましょう。const arr = [3, 5, 7, 8, 3, 5, 7, 4, 2, 8, 4, 2, 1];この配列に対して、「各要素と、その直前の要素(隣接する先行要素)の平均値」を格納した新しい配列を返す関数を作成します。ただし、最初の要素には直前の要素が存在しないため、その場合は例外として元の要素をそのまま返すものとします。実装コード:Array.prototype.map() を活用このような処理には、Array.prototype.map() メソッドを使うのが便利です。mapは各要素に対してコールバッ
-
JavaScriptのmap()メソッドを使って各配列の最大値を抽出する方法
JavaScriptでは、配列の中に配列が入った2次元配列(ネストされた配列)を扱うことがよくあります。例えば、次のような数値の2次元配列を考えてみましょう。const arr = [ [12, 56, 34, 88], [65, 66, 32, 98], [43, 87, 65, 43], [32, 98, 76, 83], [65, 89, 32, 54
-
JavaScriptで2進数の配列を対応する整数に変換する方法
まず、0と1だけを含む数値の配列を用意します。const arr = [0, 1, 0, 1];ここでの課題は、配列に対して呼び出すと、その配列が表す2進数に対応する10進数の整数を返す関数 toBinary() を作成することです。例えば、配列が以下の場合を考えてみましょう。const arr = [1, 0, 1, 1];この場合の出力は 11 になるはずです。2進数「1011」の10進数表現が11だからです。それでは、この関数を実装していきましょう。方法1: parseInt() ライブラリメソッドを使うJavaScriptには parseInt() という組み込みメソッドがあります。こ
-
JavaScriptでレコードを集計する方法|reduceを使った実装例
ここでは、複数の人物が行った取引の情報を格納した、オブジェクトの配列を例に考えてみましょう。 const transactions = [{ name: Rakesh, amount: 1500 }, { name: Rajesh, amount: 1200 }, { name: Ramesh, amount: 1750 }, { name: Rakesh, amount: 2100 }, { name: Mukesh, amount: 1100 }, { name: Rajesh, amount
-
JavaScriptでオブジェクト配列をマージし、同じIDの数量を合計する方法
はじめに 例えば、ある会社の製品情報を含む2つのオブジェクト配列があるとします。各オブジェクトは製品を識別するidと、その数量を表すquantityというプロパティを持っています。 const first = [ { id: 57e7a1cd6a3f3669dc03db58, quantity:3 }, { id: 57e77b06e0566d496b51fed5, quantity:3 }, { id: 57e7a1cd6a3f3669dc03db58, q