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

JavaScriptのArray.values()メソッドとは？使い方とサンプルコードを徹底解説

JavaScriptのArray.values()メソッドとは？

JavaScriptのArray.values()メソッドは、対象の配列に含まれるすべての値を格納したイテレーターオブジェクトを返します。ES2015（ES6）以降で利用可能なこのメソッドは、for...ofループやスプレッド構文（[...arr]）と組み合わせることで、配列の各要素を効率的に取り出せます。

なお、keys()やentries()がインデックス情報も一緒に返すのに対し、values()は純粋に「値」だけを順番に提供する点が大きな特徴です。

基本構文

arr.values()

引数は不要で、戻り値として新しいArray Iteratorオブジェクトが返されます。呼び出すたびに新しいイテレーターが生成されるため、同じ配列に対して何度でも繰り返し処理を実行できるのも便利なポイントです。

サンプルコード

以下は、array.values()を使用して、ボタンをクリックしたときに配列の値だけを画面へ表示する実装例です。

<!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.values()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると配列の値のみが表示されます</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = ["cow", "bull", "lion", "tiger", "sheep"];
var entries = arr.entries();
for (let x of entries) fillEle.innerHTML += x + "</br>";
document.querySelector(".Btn").addEventListener("click", () => {
    fillEle.innerHTML = "";
    for(let x of arr.values()){
        fillEle.innerHTML += x+ "</br>";
    }
});
</script>
</body>
</html>

実行結果

ページを読み込んだ直後は、比較用としてentries()メソッドによる「インデックスと値」のペアが表示されます。

JavaScriptのArray.values()メソッドとは？使い方とサンプルコードを徹底解説

その後、「CLICK HERE」ボタンをクリックすると、values()メソッドによって値のみが出力されます。

JavaScriptのArray.values()メソッドとは？使い方とサンプルコードを徹底解説

このように、values()を使えばインデックスを意識せずに配列の中身だけを簡潔に扱えるため、データの一覧表示やフィルタリング処理など、さまざまな場面で活用できます。

  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