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

JavaScriptのslice()メソッドとは？配列から要素を取り出す使い方を実例で解説

JavaScriptのslice()メソッドは、大きな配列の中から選択した範囲の要素を抜き出し、新しい配列として返すメソッドです。最大の特徴は、元の配列を一切変更しない（非破壊的な操作）という点にあります。そのため、元データを保持したまま部分的なコピーを作りたい場合に非常に便利です。

slice()メソッドの基本構文

arr.slice(start, end)
  • start：取り出しを開始するインデックス番号（省略可・デフォルトは0）
  • end：取り出しを終了する位置の直前のインデックス番号（省略可・デフォルトは配列の末尾まで）。endで指定した要素自体は結果に含まれない点に注意してください。

また、負の値を指定すると配列の末尾から数えた位置として扱われます。例えば slice(-2) と書けば、配列の最後の2要素を取得できます。

サンプルコード

以下は、配列から1番目から4番目の間の要素を取得する実装例です。

<!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;
    }
    .sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Array Slice</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、最初の要素から4番目の要素の間にある要素を取得できます
</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let arr = ["H", "E", "L", "L", "O"];
    fillEle.innerHTML = arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        fillEle.innerHTML = arr.slice(1,4);
    });
</script>
</body>
</html>

実行結果

ページを読み込んだ直後の初期状態は次のようになります。配列の全要素「H, E, L, L, O」がそのまま表示されています。

JavaScriptのslice()メソッドとは？配列から要素を取り出す使い方を実例で解説

続いて、「CLICK HERE」ボタンをクリックすると次のように変化します。

JavaScriptのslice()メソッドとは？配列から要素を取り出す使い方を実例で解説

arr.slice(1, 4) によって、インデックス1〜3の要素である "E", "L", "L" だけが新しい配列として取り出され、画面に表示されます。このとき元の配列 arr 自体は "H", "E", "L", "L", "O" のまま変更されていません。

まとめ

slice()メソッドを使うことで、元の配列を壊さずに任意の範囲の要素を簡単に切り出せます。部分配列の作成や配列の複製など、さまざまな場面で活用できる基本的なメソッドなので、ぜひマスターしておきましょう。

  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