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

JavaScriptの配列lengthプロパティとは？使い方とサンプルコードを解説

JavaScriptのlengthプロパティは、配列に格納されている要素の総数（配列の長さ）を取得したり、設定したりできる便利なプロパティです。配列操作において最もよく使われるプロパティの一つであり、ループ処理や条件分岐など、さまざまな場面で活用されます。

lengthプロパティの基本

lengthプロパティは、以下のような特徴を持っています。

  • 配列内の要素数を数値として返す
  • 値を代入することで配列の長さを変更できる（短くすると要素が削除される）
  • インデックスは0から始まるため、最後の要素のインデックスは「length - 1」になる

サンプルコード

以下は、lengthプロパティを使って配列の長さを取得する具体例です。ボタンをクリックすると、配列の要素数が画面に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Array length property</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 length property</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると配列の長さが表示されます</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let arr = ['H','E','L','L','O'];
    fillEle.innerHTML = arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        fillEle.innerHTML = 'The length of the array is ' + arr.length;
    });
</script>
</body>
</html>

実行結果

ページを開くと、まず配列の内容「H,E,L,L,O」が表示されます。

JavaScriptの配列lengthプロパティとは？使い方とサンプルコードを解説

「CLICK HERE」ボタンをクリックすると、配列の長さである「5」が画面に表示されます。

JavaScriptの配列lengthプロパティとは？使い方とサンプルコードを解説

まとめ

lengthプロパティを使えば、配列の要素数を簡単に取得できます。配列の長さはループ処理の終了条件などにも頻繁に使われるため、JavaScriptの基礎としてしっかり押さえておきましょう。また、lengthに数値を代入して配列の長さを変更できる点も覚えておくと、配列の切り詰めや拡張など、より柔軟な操作が可能になります。

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

    JavaScriptにおけるlengthプロパティとはJavaScriptのlengthプロパティは、文字列や配列などのオブジェクトが持つ要素数（サイズ）を返すために使用されます。配列の場合は格納されている要素の個数、文字列の場合は文字数を取得できます。ここでは、文字列と配列オブジェクトの長さをlengthプロパティで取得するサンプルコードを紹介します。サンプルコード以下の例では、ボタンをクリックすると配列の長さが画面に表示される仕組みを実装しています。<!DOCTYPE html> <html lang="ja"> <head> <

  2. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta