僅使用屬性訪問器（點符號或方括號符號），如何直接設置未定義的嵌套屬性？

Question

在javascript對象中，是否可以僅通過使用屬性訪問器 （例如點符號或方括號符號）來設置未定義的嵌套鍵的屬性值？

Lodash的_.set函數（和TJ Crowder的答案）與我想要的類似，但是代碼的結構不同，即_.set(state, "some.future.key", "baz") 。

是否有任何庫可以讓我直接設置值，即state.some.future.key = "baz" ？

理想情況下，我希望狀態自動采用以下形式：

state = {
    some: {
        future: {
            key: "baz"
        }
    }
}

Answer 1

您只需創建所有丟失的東西。

 const state = { foo: "bar" }; if (!state.some) { state.some = {}; } if (!state.some.future) { state.some.future = {}; } state.some.future.key = "baz"; console.log(state); 

如果需要很多內聯代碼，則可以為自己提供一個函數來執行此操作。 如果您想這樣做， 這個問題和這個問題的答案應該可以讓您正確地前進。 一個簡單的版本：

 function setDeep(obj, path, value) { if (typeof path === "string") { path = path.split("."); } const final = path[path.length - 1]; path = path.slice(0, -1); for (const entry of path) { if (!obj[entry]) { obj = obj[entry] = {}; } else { obj = obj[entry]; } } return obj[final] = value; } const state = { foo: "bar" }; setDeep(state, "some.future.key", "baz"); // Or: setDeep(state, ["some", "future", "key"], "baz"); console.log(state); 

...但是有很多變化。

Answer 2

解決此問題的最簡單方法是Proxy對象，如下所示：

const state = {
    foo: "bar"
}

var stateHandler = {

    get : function(obj,prop){
         if(obj[prop] == undefined){
            obj[prop]= new Proxy({},stateHandler);
         }
         return obj[prop];
    }
  };

var proxyState = new Proxy(state,stateHandler);

proxyState.koo.loo= 9; 
proxyState.too.noo.too.y = 10899;
console.log(proxyState.koo.loo); //9 
console.log(proxyState.too.noo.too.y); // 10899
console.log(proxyState.foo); // bar 

這將允許您在任何嵌套級別設置屬性。

Answer 3

要執行此state.some.future.key = "baz"使用此代碼

state.foo='newbar';
state.some={};
state.some.future={};
state.some.future.key='baz';

當您打印狀態時，您將得到

state = {
    foo: "newbar",
    some: {
        future: {
            key: "baz"
        }
    }
}