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

JavaScriptで配列の要素を同じ配列内に複製する方法

JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。

コード例

以下は、配列の要素を同じ配列内に複製するためのコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>同じ配列内に配列の要素を複製する</h1>
<div class="sample">[1,2,3,4,'A']</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、配列の要素が複製されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let arr = [1, 2, 3, 4, "A"];
        BtnEle.addEventListener("click", () => {
            arr = arr.concat(arr).sort();
            resEle.innerHTML = arr;
        });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで配列の要素を同じ配列内に複製する方法

「CLICK HERE」ボタンをクリックすると −

JavaScriptで配列の要素を同じ配列内に複製する方法

コードの解説

このコードのポイントは、次の1行です。

arr = arr.concat(arr).sort();

concat()メソッドは、引数に指定した配列を元の配列と結合した新しい配列を返します。ここでは元の配列自身を引数に渡しているため、すべての要素が2倍になった配列が生成されます。その後、sort()メソッドによって要素が並べ替えられ、複製された要素同士が隣り合う状態で表示されます。

このように、concat()とsort()を組み合わせるだけで、追加のライブラリや複雑なループ処理なしに、配列の要素を同じ配列内に簡単に複製できます。

  1. JavaScriptで指定した個数の要素による配列の重複順列をすべて生成する方法

    はじめに リテラル値の配列を第1引数として、数値を第2引数として受け取るJavaScript関数を作成する必要があります。この関数は、第2引数で指定された個数と同じ長さを持ち、入力配列の要素から作り得るすべての順列（重複あり）を格納した配列を返すものです。 要件の整理 例えば、入力配列と数値が以下のような場合を考えてみましょう。 const arr = [k, 5]; const num = 3; この場合、期待される出力は次のようになります。各要素は長さ3の配列で、「k」と「5」の組み合わせがすべて網羅されています。 const output = [    &n

  2. JavaScriptのreduce()メソッドで配列要素の積を求める方法

    問題JavaScriptで、配列 arr を引数として受け取る関数を作成します。この関数は、配列内のすべての要素を掛け合わせた積を計算し、その結果を返す必要があります。解決策：reduce()メソッドを使う配列の全要素を集約して単一の値を得たい場合、Array.prototype.reduce() メソッドが最適です。reduce() は配列の各要素に対してコールバック関数を順に実行し、結果をアキュムレータ（累積値）に蓄えていきます。積を求める場合は、初期値として「1」を指定するのがポイントです。1は乗法における単位元のため、計算結果に影響を与えず、さらに空の配列が渡された場合でも正しく 1