web-dev-qa-db-ja.com

JavaScriptで文字列名を指定して（..のオブジェクトプロパティの）オブジェクトプロパティを設定する方法は？

与えられただけだとしよう

var obj = {};
var propName = "foo.bar.foobar";

プロパティobj.foo.bar.foobarを特定の値（「hello world」など）に設定するにはどうすればよいですか？そのため、文字列にはプロパティ名のみが含まれていますが、これを実現したいと思います。

obj.foo.bar.foobar = "hello world";
javascriptstringpropertiesnested
46
Chiel ten Brinke
function assign(obj, prop, value) {
    if (typeof prop === "string")
        prop = prop.split(".");

    if (prop.length > 1) {
        var e = prop.shift();
        assign(obj[e] =
                 Object.prototype.toString.call(obj[e]) === "[object Object]"
                 ? obj[e]
                 : {},
               prop,
               value);
    } else
        obj[prop[0]] = value;
}

var obj = {},
    propName = "foo.bar.foobar";

assign(obj, propName, "Value");
74
VisioN

この質問は間違った答えで答えられるように見えるので、 同様の質問 から正しい答えを参照します。

function setDeepValue(obj, value, path) {
    if (typeof path === "string") {
        var path = path.split('.');
    }

    if(path.length > 1){
        var p=path.shift();
        if(obj[p]==null || typeof obj[p]!== 'object'){
             obj[p] = {};
        }
        setDeepValue(obj[p], value, path);
    }else{
        obj[path[0]] = value;
    }
}

使用する：

var obj = {};
setDeepValue(obj, 'Hello World', 'foo.bar.foobar');
12
Cerbrus

編集： jsPerf.comテストケース を作成して、受け入れられた回答と私のバージョンを比較しました。特にあなたが非常に深く行くとき、私のバージョンはより速いことがわかります。

http://jsfiddle.net/9YMm8/

var nestedObjectAssignmentFor = function(obj, propString, value) {
    var propNames = propString.split('.'),
        propLength = propNames.length-1,
        tmpObj = obj;

    for (var i = 0; i <= propLength ; i++) {
        tmpObj = tmpObj[propNames[i]] = i !== propLength ?  {} : value;  
    }
    return obj;
}

var obj = nestedObjectAssignment({},"foo.bar.foobar","hello world");

4
Stephan Bönnemann

古いものであることは知っていますが、答えにはカスタム関数しかありません。
ライブラリの使用を気にしない場合は、lodash_.set および _.get 関数。

3
Michał Frączkiewicz

すべてのソリューションは、設定時に元のデータを上書きするため、次のように微調整し、それを単一のオブジェクトにしました。

 var obj = {}
 nestObject.set(obj, "a.b", "foo"); 
 nestObject.get(obj, "a.b"); // returns foo     

 var nestedObject = {
     set: function(obj, propString, value) {
         var propNames = propString.split('.'),
             propLength = propNames.length-1,
             tmpObj = obj;
         for (var i = 0; i <= propLength ; i++) {
             if (i === propLength){
                 if(tmpObj[propNames[i]]){
                     tmpObj[propNames[i]] = value;
                 }else{
                     tmpObj[propNames[i]] = value;
                 }
             }else{
                 if(tmpObj[propNames[i]]){
                     tmpObj = tmpObj[propNames[i]];
                 }else{
                     tmpObj = tmpObj[propNames[i]] = {};
                 }
             }
         }
         return obj;
     },
     get: function(obj, propString){
         var propNames = propString.split('.'),
             propLength = propNames.length-1,
             tmpObj = obj;
         for (var i = 0; i <= propLength ; i++) {
             if(tmpObj[propNames[i]]){
                 tmpObj = tmpObj[propNames[i]];
             }else{
                 break;
             }
         }
         return tmpObj;
     }
 };

Obj paramを次のように変更する関数をOject.prototypeメソッドに変更することもできます。

Object.prototype = { setNested = function(){ ... }, getNested = function(){ ... } } 

{}.setNested('a.c','foo')
3
Labithiotis

参照を使用してこれを行う簡単な関数を次に示します。

    function setValueByPath (obj, path, value) {
        var ref = obj;

        path.split('.').forEach(function (key, index, arr) {
            ref = ref[key] = index === arr.length - 1 ? value : {};
        });

        return obj;
    }
2
Thiago Kroger

更新されたオブジェクトを返すものは次のとおりです

function deepUpdate(value, path, tree, branch = tree) {
  const last = path.length === 1;
  branch[path[0]] = last ? value : branch[path[0]];
  return last ? tree : deepUpdate(value, path.slice(1), tree, branch[path[0]]);
}

const path = 'cat.dog';
const updated = deepUpdate('a', path.split('.'), {cat: {dog: null}})
// => { cat: {dog: 'a'} }
2
Daniel Lizik

これは、いくつかのスレッドといくつかのカスタムコードからコンパイルされたgetおよびset関数です。

また、セットに存在しないキーも作成します。

function setValue(object, path, value) {
    var a = path.split('.');
    var o = object;
    for (var i = 0; i < a.length - 1; i++) {
        var n = a[i];
        if (n in o) {
            o = o[n];
        } else {
            o[n] = {};
            o = o[n];
        }
    }
    o[a[a.length - 1]] = value;
}

function getValue(object, path) {
    var o = object;
    path = path.replace(/\[(\w+)\]/g, '.$1');
    path = path.replace(/^\./, '');
    var a = path.split('.');
    while (a.length) {
        var n = a.shift();
        if (n in o) {
            o = o[n];
        } else {
            return;
        }
    }
    return o;
}
1
Dieter Gribnitz

非常に簡単です。

再帰やコールバックのオーバーヘッドはありません。

function setDeepVal(obj, path, val) {
  var props = path.split('.');
  for (var i = 0, n = props.length - 1; i < n; ++i) {
    obj = obj[props[i]] = obj[props[i]] || {};
  }
  obj[props[i]] = val;
  return obj;
}



// TEST
var obj = { hello : 'world' };
setDeepVal(obj, 'foo.bar.baz', 1);
setDeepVal(obj, 'foo.bar2.baz2', 2);
console.log(obj);
1
Vitim.us

既存の値を上書きしないという答えを探していましたが、読みやすく、これを思いつくことができました。同じニーズを持つ他の人に役立つ場合に備えて、ここに残します

function setValueAtObjectPath(obj, pathString, newValue) {
  // create an array (pathComponents) of the period-separated path components from pathString
  var pathComponents = pathString.split('.');
  // create a object (tmpObj) that references the memory of obj
  var tmpObj = obj;

  for (var i = 0; i < pathComponents.length; i++) {
    // if not on the last path component, then set the tmpObj as the value at this pathComponent
    if (i !== pathComponents.length-1) {
      // set tmpObj[pathComponents[i]] equal to an object of it's own value
      tmpObj[pathComponents[i]] = {...tmpObj[pathComponents[i]]}
      // set tmpObj to reference tmpObj[pathComponents[i]]
      tmpObj = tmpObj[pathComponents[i]]
    // else (IS the last path component), then set the value at this pathComponent equal to newValue 
    } else {
      // set tmpObj[pathComponents[i]] equal to newValue
      tmpObj[pathComponents[i]] = newValue
    }
  }
  // return your object
  return obj
}
0
Rbar

パスを分割して、次の要素が存在するかどうかを確認できます。オブジェクトを新しいプロパティに割り当てない場合。

プロパティの値を返します。

最後に値を割り当てます。

function setValue(object, path, value) {
    var fullPath = path.split('.'),
        way = fullPath.slice(),
        last = way.pop();

    way.reduce(function (r, a) {
        return r[a] = r[a] || {};
    }, object)[last] = value;
}

var object = {},
    propName = 'foo.bar.foobar',
    value = 'hello world';

setValue(object, propName, value);
console.log(object);
0
Nina Scholz

Rbarの回答と同じで、redux reducersで作業しているときに非常に便利です。スプレッド演算子の代わりにlodashクローンを使用して、配列もサポートします。

export function cloneAndPatch(obj, path, newValue, separator='.') {
    let stack = Array.isArray(path) ? path : path.split(separator);
    let newObj = _.clone(obj);

    obj = newObj;

    while (stack.length > 1) {
        let property = stack.shift();
        let sub = _.clone(obj[property]);

        obj[property] = sub;
        obj = sub;
    }

    obj[stack.shift()] = newValue;

    return newObj;
}
0
makeroo