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

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

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

JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。

以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<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;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Replacing array of object property name</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to change the property name of an object in array</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    var person = [
        { name: "Rohan Sharma", age: 16 },
        { name: "Vinit Mehta", age: 18 },
    ];
    person = person.map((item) => {
        return {
            fullName: item.name,
            age: item.age,
        };
    });
    BtnEle.addEventListener("click", () => {
        person.forEach((item) => {
            resEle.innerHTML += "fullName = " + item.fullName + " : Age = " + item.age + "<br>";
        });
    });
</script>
</body>
</html>

コードのポイント

  • map()メソッドを使い、配列内の各オブジェクトを新しい形式のオブジェクトへ変換しています。
  • item.name を fullName として返すことで、プロパティ名が置き換えられます。
  • 変換後の配列は元の配列とは独立した新しいオブジェクトであるため、元のデータには影響しません。
  • ボタンがクリックされると、forEach()によって変換後の各オブジェクトの内容が画面に表示されます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

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

「CLICK HERE」ボタンをクリックすると、プロパティ名が置き換えられた結果が表示されます。

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

  1. JavaScriptでオブジェクトを新しい配列に変換する方法

    JavaScriptでは、オブジェクトのプロパティやネストされたデータを取り出し、扱いやすい形で新しい配列にフォーマットできます。本記事では、学校（school）オブジェクトに含まれる生徒情報を、文字列形式の配列へ変換する実践的なコード例を紹介します。 ポイントとなるテクニック このサンプルでは、以下の2つのJavaScript機能を活用しています。 分割代入（Destructuring assignment）：オブジェクトから特定のプロパティを簡潔に取り出す構文です。 for...of ループ：配列内の各要素を順番に処理するために使用します。 コード例 <!DOCTYPE html

  2. JavaScriptにおけるES6のプロパティ省略記法（ショートハンド）の使い方

    ES6（ECMAScript 2015）では、オブジェクトのキー名と、その値として代入したい変数名が同じである場合、値の指定を省略し、キー名だけを記述するだけで済む「プロパティ省略記法（Property Shorthand）」が使えます。この記法により、コードがより簡潔で読みやすくなります。以下に、JavaScriptでのプロパティ省略記法の実装例を示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <