JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptでオブジェクトの値を数値順にソートして配列として取得する方法

    JavaScriptでは、オブジェクトに格納された数値を昇順(または降順)に並べ替えて、配列として取り出したいケースがよくあります。本記事では、オブジェクトの値を数値順にソートし、新しい配列として返す方法を解説します。 前提となるオブジェクト まず、次のようなオブジェクトを想定します。 const obj = { key1: 56, key2: 67, key3: 23, key4: 11, key5: 88 }; このオブジェクトを受け取り、値を数値順に並べ替えた次のような配列を返す関数を作成します。 const arr = [11, 23, 56,

  2. JavaScriptで配列内の最初の重複要素のインデックスを検索する方法

    今回は、配列の中で少なくとも2回出現する最初の要素のインデックスを返す関数を作成する方法を解説します。すべての要素が1回しか現れない場合は -1 を返す仕様とし、さらに定数空間(追加のメモリを使用しない)で処理を行うという条件も課します。アプローチの考え方この問題に対するシンプルかつ効果的な解決策は、for ループで配列を先頭から順に走査しながら、Array.prototype.lastIndexOf() メソッドを使って各要素の重複の有無をチェックする方法です。具体的には、現在注目している要素 arr[i] について、lastIndexOf() が返すインデックスが現在のインデックス i と

  3. JavaScriptで隣接要素との平均値からなる配列を生成する方法

    隣接要素の平均値を求める配列処理とはたとえば、次のような数値の配列があるとします。const arr = [3, 5, 7, 8, 3, 5, 7, 4, 2, 8, 4, 2, 1];ここで求められているのは、各要素とその直前の要素(隣接する前の要素)の平均値を格納した新しい配列を返す関数を作成することです。最初の要素には前の要素が存在しないため、その要素の値をそのまま返します。それでは、この関数のコードを書いてみましょう。この問題は Array.prototype.map() メソッドを使うことで簡潔に解決できます。コード例const arr = [3, 5, 7, 8, 3, 5, 7,

  4. JavaScriptで2次元配列の各サブ配列から最大値を抽出して新しい配列を作成する方法

    例えば、以下のような数値からなる2次元配列(配列の配列)があるとします。const arr = [ [1, 16, 34, 48], [6, 66, 2, 98], [43, 8, 65, 43], [32, 98, 76, 83], [65, 89, 32, 4], ];この2次元配列に対してmap処理を行い、各サブ配列に含まれる最大値を要素として持つ新しい配列を返す関数を作成する必要があります。上記の配列の場合、期待される出力は次のとおりです。const output = [ 48, 98, 65, 98, 89 ];実装例以下は

  5. 【JavaScript】ネストされた配列から最大値を取得する方法

    JavaScriptでネストされた配列から最大値を取得する方法 JavaScriptでは、数値が任意の階層で入れ子になった(ネストされた)配列から、全体の中で最も大きな値を取り出したいことがあります。単純なMath.max(...arr)では内側の配列まで展開できないため、再帰処理や配列のフラット化が必要になります。本記事では、その具体的な実装方法を2つのアプローチで解説します。 問題の例 まず、配列の中にさらに配列が含まれる次のようなデータを考えてみましょう。 const arr = [ 34, 65, 67, [ 43, 76, 87, 23, 56, 7

  6. 【JavaScript】配列の重複を削除しつつ、末尾に空文字列を追加して元の長さを保つ方法

    今回は、配列を受け取って重複する要素をすべて取り除き、その分だけ空文字列()を末尾に追加することで、元の配列と同じ長さを維持する関数を作成します。例えば、重複した値が4つ見つかった場合には、それらをすべて削除し、代わりに4つの空文字列を配列の末尾に挿入します。実装の考え方この処理では、reduce() メソッドを使って配列を1回走査します。各要素について lastIndexOf() を呼び出し、現在のインデックスと一致するかどうか(=その値が最後に出現する位置かどうか)を判定します。最後の出現であれば、結果用の配列にその値を残すそうでなければ重複とみなし、カウンターを1つ増やす最後に、カウント

  7. 【JavaScript】配列と、値が配列のオブジェクトをマージ(zip)する方法

    配列と、値が配列のオブジェクトをマージするとは まず、次のような配列とオブジェクトがあるとします。 const arr = [1, 2, 3, 4, 5]; const obj = {     group1: ["Ram", "Mohan", "Shyam"],     group2: ["Jai", "Dinesh"], }; ここでやりたいのは、この配列とオブジェクトを「zip」して、配列の値をオブジェクト内の

  8. JavaScriptのfilter()メソッドを使って、別の配列に含まれる要素を配列から除外する方法

    はじめにJavaScriptでは、filter()メソッドを活用することで、ある配列から特定の要素だけを取り除いた新しい配列を簡単に作成できます。本記事では、「2つの配列を比較し、1つ目の配列から2つ目の配列に含まれていない要素だけを抽出する」というよくある課題の解決方法を解説します。問題の概要たとえば、次のような2つの数値の配列があるとしましょう。const arr1 = [4, 23, 7, 6, 3, 6, 4, 3, 56, 4]; const arr2 = [4, 56, 23];このとき、arr2 に含まれていない要素のみを arr1 から抽出し、結果として次のような出力が得られる

  9. JavaScriptで文字列を階層オブジェクトに変換する方法

    文字列から階層的なオブジェクトを作る JavaScriptでは、2文字ずつのペアで構成された特殊な文字列を、ネスト(入れ子)構造のオブジェクトへ変換したいケースがあります。例えば、次のような文字列を考えてみましょう。 const str = AABBCCDDEE; この文字列をもとに、以下のような階層構造を持つオブジェクトを作成することを目標とします。 const obj = { code: AA, sub: { code: BB, sub: { code: CC, sub: {

  10. 配列の要素を順番に等しいか比較する方法 – JavaScript

    はじめにJavaScriptでは、2つの配列を用意し、同じインデックス(位置)にある要素同士を比較して、一致している値がいくつあるかを数える関数が必要になることがあります。この比較は順序に依存します。つまり、1つ目の配列の先頭の要素は、2つ目の配列の先頭の要素と比較され、その次は2番目の要素同士、というように対応する位置ごとに評価していきます。順番が入れ替わっていれば、たとえ同じ値が含まれていても一致とはみなされません。問題の例例として、次の2つの入力配列を考えてみましょう。const arr1 = [4, 7, 4, 3, 3, 3, 7, 6, 5]; const arr2 = [6, 5

  11. 【JavaScript】2つの非同期関数の完了後に関数を実行する方法

    2つの非同期関数を要素として持つ配列を想定してみましょう。そして、両方の非同期関数の実行が完了したタイミングで、何らかの処理(ここでは例としてコンソールへの出力)を実行したいとします。 この課題には、どのようにアプローチすればよいのでしょうか? 非同期処理の完了後にタスクを実行する方法は、基本的に次の2つがあります。 Promise を使う方法 async/await 関数を使う方法 しかし、複数(2つ以上)の非同期関数を扱うコードでは、前者の Promise.all() メソッドの方が後者よりも有利です。Promise.all() は、渡されたすべての Promise が解決(resol

  12. JavaScriptで文字列のn番目に出現する部分文字列を削除するString.prototype関数の書き方

    今回は、3つの引数を受け取る String.prototype 関数を書いていきます。第1引数:検索対象となる文字列(実装では this として参照されます)第2引数:削除したい部分文字列第3引数:数値 n。文字列から削除する部分文字列の「n番目の出現」を指定しますこの関数は、部分文字列の削除に成功した場合は新しい文字列を返し、それ以外のあらゆるケースでは -1 を返す必要があります。サンプルコード以下がその実装例です。const str = jkdsttjkdsre;const subStr = jk;const num = 2;removeStr = function(subStr, nu

  13. 【JavaScript】文字列内のすべての特殊文字をASCIIコードに置き換える方法

    本記事では、JavaScriptで「特殊文字を含む可能性のある文字列」を受け取り、すべての特殊文字を対応するASCIIコード(10進数)に置き換えた新しい文字列を返す関数の実装方法を解説します。 処理の考え方 実装のポイントは以下の通りです。 文字列を1文字ずつループで走査します。 対象の文字が数字・英字・半角スペースのいずれかであれば、そのまま結果に追加します。 それ以外の文字(特殊文字)は、charCodeAt()メソッドを使ってASCIIコード値に変換してから連結します。 サンプルコード 以下が実際のコード例です。 const str = Th!s !s @ str!ng th@t

  14. 【JavaScript】数値の各桁の積を再帰的に計算する方法

    本記事では、与えられた数値のすべての桁を掛け合わせた結果を求めるJavaScript関数の実装方法について解説します。 問題の概要 作成するのは、数値を引数として受け取り、その各桁すべての積を返す関数です。ただし、数値の中に「0」が含まれていた場合は、0のまま計算するのではなく「1」として扱います。 具体例 例えば、入力された数値が5720だった場合を考えてみましょう。各桁は「5」「7」「2」「0」ですが、0は1として扱われるため、計算式は次のようになります。 5 × 7 × 2 × 1 = 70 したがって、この場合の出力は70となります。 再帰を使った実装コード 以下が実際のコードです。

  15. 【JavaScript】配列から重複する要素を完全に削除する方法

    今回は「配列を受け取り、その中から重複している値をすべて取り除いた新しい配列を返す関数」を作成する方法を解説します。 ポイントは、単なる重複排除(ユニーク化)とは異なり、元の配列で2回以上出現した値は新しい配列に一切含めないという点です。つまり、1度しか登場しなかった要素だけが残ります。 入力と出力のイメージ たとえば、次のような配列が入力されたとします。 const arr = [763, 55, 43, 22, 32, 43, 763, 43]; このとき、763 と 43 は複数回出現しているため完全に除外され、期待される出力は次のようになります。 const output = [55,

  16. 【JavaScript】ハイフン区切りの文字列配列を分割してオブジェクトに変換する方法

    ここでは、各要素にハイフン(-)が含まれる文字列リテラルの配列を扱います。ハイフンの左側にプロパティのキーが、右側にその値が記述されています。サンプルの入力配列は次のようになります。const arr = [playerName-Kai Havertz, age-21, nationality-German, postion-CAM, languages-German,English,Spanish, club-Chelsea];求められているのは、これらの文字列をハイフンで分割し、配列全体から1つのオブジェクトを組み立てる関数を作成することです。実装の方針それでは実際にコードを書いてみましょ

  17. ライブラリ関数を使わずに真偽値を含むネスト配列をフラット化する方法 - JavaScript

    JavaScriptで、falseやnullといった偽値を含むネストされた配列を受け取り、ネストを一切含まない平坦な配列を返す関数を作成する必要があります。たとえば、入力が次の場合 −const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];期待される出力は次のとおりです −const output = [1, 2, 3, 4, 5, false, 6, 5, 8, null, 6];実装の考え方この問題を解くポイントは以下の3つです。配列の各要素を順番に走査する要素が配列であれば、その配列に対して再帰的に同じ処理を行い

  18. JavaScriptで同一の要素をサブ配列にグループ化する方法

    同じ値のエントリが含まれる数値の配列があるとします。この配列を受け取り、同一の要素同士を1つのサブ配列にまとめた新しい配列を返す関数を作成する必要があります。 例 入力配列が次のような場合: const arr = [234, 65, 65, 2, 2, 234]; 期待される出力は以下のとおりです。同じ値がそれぞれ1つのサブ配列にまとめられています。 const output = [[234, 234], [65, 65], [2, 2]]; 実装のアプローチ この問題を解くには、ハッシュマップ(オブジェクト)を使って、すでに出現した要素と、その要素が格納されているサブ配列のインデックスを記

  19. JavaScriptで再帰を使って配列の連続する重複要素を削除する方法

    はじめに本記事では、数値や文字列のリテラルを含む配列を受け取り、余分なメモリ領域を使わずに連続する重複要素をすべて削除する関数を、JavaScriptの再帰処理を用いて実装する方法を解説します。例えば、入力配列が以下の場合を見てみましょう。const arr = [17, 17, 17, 12, 12, 354, 354, 1, 1, 1];この場合、期待される出力は次のとおりです。const output = [17, 12, 354, 1];ポイントは、重複する値そのものをすべて消すのではなく、「隣り合って連続している重複」だけを取り除くことです。再帰を使った実装例以下が実際のコードです。

  20. JavaScriptで交互シャッフル配列を作成する方法【サンプルコード付き】

    交互シャッフルとは?JavaScriptにおける「交互シャッフル」とは、数値の配列を並べ替えて、最大値の直後に最小値、2番目に大きい値の直後に2番目に小さい値……というように、大きい値と小さい値を交互に配置する手法のことです。たとえば、次の入力配列があったとします。const arr = [11, 7, 9, 3, 5, 1, 13];この場合、期待される出力は以下のとおりです。const output = [13, 1, 11, 3, 9, 5, 7];実装コード以下が交互シャッフルを実現するコードです。slice() で元の配列のコピーを作成してから処理するため、入力元の配列は変更されませ

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:89/297  20-コンピューター/Page Goto:1 83 84 85 86 87 88 89 90 91 92 93 94 95