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

JavaScriptのlengthプロパティで配列オブジェクトの長さを取得する方法

JavaScriptにおけるlengthプロパティとは

JavaScriptのlengthプロパティは、文字列や配列などのオブジェクトが持つ要素数（サイズ）を返すために使用されます。配列の場合は格納されている要素の個数、文字列の場合は文字数を取得できます。

ここでは、文字列と配列オブジェクトの長さをlengthプロパティで取得するサンプルコードを紹介します。

サンプルコード

以下の例では、ボタンをクリックすると配列の長さが画面に表示される仕組みを実装しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript lengthプロパティ</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample,
    .result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript lengthプロパティ</h1>
<div class="sample"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>
上のボタンをクリックすると、配列の長さが表示されます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let arr = [1, 2, "A", "B", "D"];
    sampleEle.innerHTML = arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML += "配列の長さ = " + arr.length;
    });
</script>
</body>
</html>

実行結果

ページを表示すると、まず配列の中身「1,2,A,B,D」が赤字で表示されます。

JavaScriptのlengthプロパティで配列オブジェクトの長さを取得する方法

続いて、「クリックしてください」ボタンを押すと、以下のように配列の長さが結果エリアに追記表示されます。

JavaScriptのlengthプロパティで配列オブジェクトの長さを取得する方法

コードのポイント

  • 配列 arr = [1, 2, "A", "B", "D"] には5つの要素が格納されています。
  • arr.length を呼び出すことで、要素数である「5」が取得できます。
  • addEventListener("click", ...) を使うことで、ボタンがクリックされたタイミングで処理を実行しています。

lengthプロパティは読み取り専用ではなく、値を代入して配列の長さを変更することも可能です。ただし、現在の長さより小さい値を設定すると、余分な要素は切り捨てられるため注意が必要です。

  1. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ

  2. JavaScriptのオブジェクト配列に配列メソッドを適用する方法

    JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。 コード例 以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8