仅使用属性访问器（点符号或方括号符号），如何直接设置未定义的嵌套属性？

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"
        }
    }
}