首頁 >web前端 >js教程 >如何使用字串路徑動態設定 JavaScript 物件中的嵌套屬性值?

如何使用字串路徑動態設定 JavaScript 物件中的嵌套屬性值?

DDD
DDD原創
2024-12-09 16:55:11840瀏覽

How Can I Dynamically Set Nested Property Values in JavaScript Objects Using a String Path?

JavaScript 物件中的動態屬性設定

假設我們給定一個物件 obj 和一個儲存為字串 propName 的屬性名稱,其中 propName可以表示巢狀屬性,例如為「foo.bar.foobar.」

問題:我們怎麼能使用propName作為路徑動態設定obj.foo.bar.foobar的值?

解決方案:我們可以使用下面的分配函數來動態設置屬性值:

function assign(obj, prop, value) {
    // Convert the string property name into an array of nested levels
    if (typeof prop === "string")
        prop = prop.split(".");

    // Check if the current level is the last (length == 1) or nested
    if (prop.length > 1) {
        // Shift the first level of nesting (e.g., "foo")
        var e = prop.shift();
        // Recursively call `assign` on the child object (e.g., obj.foo)
        assign(obj[e] =
                 Object.prototype.toString.call(obj[e]) === "[object Object]"
                 ? obj[e]
                 : {},
               prop,
               value);
    } else
        // For the last level, set the value directly
        obj[prop[0]] = value;
}

用法:

// Object to modify
var obj = {};
// String representing the nested property path
var propName = "foo.bar.foobar";
// Value to set
var newValue = "hello world";

// Call the `assign` function to dynamically set the property value
assign(obj, propName, newValue);

// Check the updated value (for debugging purposes)
console.log(obj.foo.bar.foobar); // Output: "hello world"

以上是如何使用字串路徑動態設定 JavaScript 物件中的嵌套屬性值?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn