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

JavaScriptのslice()メソッドとは？配列から要素を抽出する方法を実例付きで解説

slice()メソッドの基本

JavaScriptのslice()メソッドは、配列の中から指定した範囲の要素を選び出し、新しい配列として返すメソッドです。元の配列は変更されずそのまま残るため、安全に部分的なデータを取り出したい場合に活用できます。

基本構文

array.slice(start, end)

start：抽出を開始する位置を示す整数（インデックス番号）です。end：抽出を終了する位置を示す整数で、この位置にある要素自体は結果に含まれません。

それでは、実際にslice()メソッドをJavaScriptで使ってみましょう。

例1：配列の一部を切り取って表示する

<!DOCTYPE html>
<html>
<body>
    <h2>デモ見出し</h2>
    <p id="test"></p>
    <script>
        var arr = ["Accessories", "Electronics", "Books", "Pet Supplies"];
        document.getElementById("test").innerHTML = "Initial array = "+arr+", <br>Sliced =          "+arr.slice(2, 4);
    </script>
</body></html>

実行結果

JavaScriptのslice()メソッドとは？配列から要素を抽出する方法を実例付きで解説

この例では、インデックス2から4の直前までの要素、つまり「Books」と「Pet Supplies」が新しい配列として抽出されます。

例2：ボタンをクリックして要素を抽出する

<!DOCTYPE html>
<html>
<body>
    <h2>車のバリエーション</h2>
    <button onclick="display()">Result</button>
    <p id="test"></p>
    <script>
        var car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
        document.getElementById("test").innerHTML = "Initial Array = "+car;
        function display() {
            document.getElementById("test").innerHTML = "Array after slicing some elements =     "+car.slice(1,4);
        }
    </script>
</body></html>

実行結果

JavaScriptのslice()メソッドとは？配列から要素を抽出する方法を実例付きで解説

まずページを開くと、元の配列全体が表示されます。「Result」ボタンをクリックすると −

JavaScriptのslice()メソッドとは？配列から要素を抽出する方法を実例付きで解説

インデックス1から4の直前までの要素（Convertible、SUV、AUV）が抽出されて画面に表示されます。

slice()を使う際のポイント

  • 元の配列は変更されない：splice()と異なり、slice()は常に新しい配列を返し、元データには影響しません。
  • 負の値も指定できる：負の数を渡すと、配列の末尾から数えた位置として扱われます（例：slice(-2)は最後の2要素を取得）。
  • 引数は省略可能：endを省略すると配列の末尾まで、両方省略すると配列全体のコピーが作成されます。
  1. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

  2. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo