Динамически устанавливаемое свойство вложенного объекта


88

У меня есть объект, который может иметь любое количество уровней глубины и может иметь любые существующие свойства. Например:

var obj = {
    db: {
        mongodb: {
            host: 'localhost'
        }
    }
};

При этом я хотел бы установить (или перезаписать) такие свойства:

set('db.mongodb.user', 'root');
// or:
set('foo.bar', 'baz');

Где строка свойств может иметь любую глубину, а значение может быть любым типом / предметом.
Объекты и массивы как значения не нужно объединять, если ключ свойства уже существует.

В предыдущем примере будет создан следующий объект:

var obj = {
    db: {
        mongodb: {
            host: 'localhost',
            user: 'root'
        }
    },
    foo: {
        bar: baz
    }
};

Как я могу реализовать такую ​​функцию?


Каков должен быть результат set('foo', 'bar'); set('foo.baz', 'qux');, где fooсначала держится, а Stringпотом становится Object? Что происходит 'bar'?
Джонатан Лоновски


может помочь эта помощь: stackoverflow.com/questions/695050/…
Рене М.

1
Если вы удалите set()метод, и у obj.db.mongodb.user = 'root';вас будет именно то, что вам кажется?
adeneo

@JonathanLonowski Lonowski barперезаписывается файлом Object. @adeneo и @rmertins В самом деле :) Но, к сожалению, мне приходится оборачивать другую логику. @Robert Levy Я нашел его и получил доступ к работе, но настройка кажется намного более сложной ...
Джон Б.

Ответы:


96

Эта функция, используя указанные вами аргументы, должна добавлять / обновлять данные в objконтейнере. Обратите внимание, что вам нужно отслеживать, какие элементы в objсхеме являются контейнерами, а какие - значениями (строки, целые числа и т. Д.), Иначе вы начнете генерировать исключения.

obj = {};  // global object

function set(path, value) {
    var schema = obj;  // a moving reference to internal objects within obj
    var pList = path.split('.');
    var len = pList.length;
    for(var i = 0; i < len-1; i++) {
        var elem = pList[i];
        if( !schema[elem] ) schema[elem] = {}
        schema = schema[elem];
    }

    schema[pList[len-1]] = value;
}

set('mongo.db.user', 'root');

2
@ bpmason1 не могли бы вы объяснить, почему вы использовали, var schema = objа не просто objвезде?
sman591

3
@ sman591 schema- это указатель, который перемещается по пути с помощью schema = schema[elem]. Итак, после цикла for schema[pList[len - 1]]указывает на mongo.db.user в obj.
webjay

это решило мою проблему, спасибо, не смог найти это в документах MDN. Но у меня есть еще одно сомнение, если оператор присваивания дает ссылку на внутренние объекты, тогда как сделать отдельный объект2 от объекта1, чтобы изменения, сделанные на объекте2, не отражались на объекте1.
Оникс

@Onix Для этого вы можете использовать cloneDeepфункцию lodash .
Аакаш Тхакур

@Onix const clone = JSON.parse (JSON.stringify (obj))
Майк Макуч

79

Lodash имеет метод _.set () .

_.set(obj, 'db.mongodb.user', 'root');
_.set(obj, 'foo.bar', 'baz');

1
Можно ли его также использовать для установки значения ключа? если да, можете ли вы привести пример? Спасибо
sage poudel

Это здорово, но как бы вы отслеживали / определяли путь?
Том

19

Немного поздно, но вот небиблиотечный, более простой ответ:

/**
 * Dynamically sets a deeply nested value in an object.
 * Optionally "bores" a path to it if its undefined.
 * @function
 * @param {!object} obj  - The object which contains the value you want to change/set.
 * @param {!array} path  - The array representation of path to the value you want to change/set.
 * @param {!mixed} value - The value you want to set it to.
 * @param {boolean} setrecursively - If true, will set value of non-existing path as well.
 */
function setDeep(obj, path, value, setrecursively = false) {
    path.reduce((a, b, level) => {
        if (setrecursively && typeof a[b] === "undefined" && level !== path.length){
            a[b] = {};
            return a[b];
        }

        if (level === path.length){
            a[b] = value;
            return value;
        } 
        return a[b];
    }, obj);
}

Эта функция, которую я сделал, может делать именно то, что вам нужно, и даже немного больше.

допустим, мы хотим изменить целевое значение, которое глубоко вложено в этот объект:

let myObj = {
    level1: {
        level2: {
           target: 1
       }
    }
}

Итак, мы бы назвали нашу функцию так:

setDeep(myObj, ["level1", "level2", "target1"], 3);

приведет к:

myObj = {level1: {level2: {target: 3}}}

Установка флага set recursively в значение true установит объекты, если они не существуют.

setDeep(myObj, ["new", "path", "target"], 3, true);

приведет к такому:

obj = myObj = {
    new: {
         path: {
             target: 3
         }
    },
    level1: {
        level2: {
           target: 3
       }
    }
}

1
Использовал этот код, чистый и простой. Вместо вычислений levelя использовал reduceтретий аргумент.
Хуан Ланус

1
Я считаю, что это levelдолжно быть +1 или path.length-1
ThomasReggi

12

Мы можем использовать функцию рекурсии:

/**
 * Sets a value of nested key string descriptor inside a Object.
 * It changes the passed object.
 * Ex:
 *    let obj = {a: {b:{c:'initial'}}}
 *    setNestedKey(obj, ['a', 'b', 'c'], 'changed-value')
 *    assert(obj === {a: {b:{c:'changed-value'}}})
 *
 * @param {[Object]} obj   Object to set the nested key
 * @param {[Array]} path  An array to describe the path(Ex: ['a', 'b', 'c'])
 * @param {[Object]} value Any value
 */
export const setNestedKey = (obj, path, value) => {
  if (path.length === 1) {
    obj[path] = value
    return
  }
  return setNestedKey(obj[path[0]], path.slice(1), value)
}

Все проще!


3
выглядит хорошо! просто нужно проверить параметр obj, чтобы убедиться, что он не является ложным, выдаст ошибку, если какой-либо из реквизитов в цепочке не существует.
C Smith

2
вы можете просто использовать path.slice (1);
Маркос Перейра

1
Отличный ответ, красивое и лаконичное решение.
chim

Я верю в этот оператор if, он должен был быть, obj[path[0]] = value;потому что pathон всегда имеет тип string[], даже когда осталась только одна строка.
Валорад

Объекты Javascript должны работать с использованием obj[['a']] = 'new value'. Проверьте код: jsfiddle.net/upsdne03
Хема Видал

12

Я просто пишу небольшую функцию, используя рекурсию ES6 + для достижения цели.

updateObjProp = (obj, value, propPath) => {
    const [head, ...rest] = propPath.split('.');

    !rest.length
        ? obj[head] = value
        : this.updateObjProp(obj[head], value, rest.join('.'));
}

const user = {profile: {name: 'foo'}};
updateObjProp(user, 'fooChanged', 'profile.name');

Я много использовал его для реакции на состояние обновления, у меня он работал очень хорошо.


1
это было удобно, мне пришлось поместить toString () в proPath, чтобы он работал с вложенными свойствами, но после этого он отлично работал. const [голова, ... отдых] = propPath.toString (). split ('.');
WizardsOfWor

1
@ user738048 @ Bruno-Joaquim, линия this.updateStateProp(obj[head], value, rest);должна бытьthis.updateStateProp(obj[head], value, rest.join());
ma.mehralian

9

В ES6 есть довольно крутой способ сделать это, используя имя вычисляемого свойства и параметр отдыха .

const obj = {
  levelOne: {
    levelTwo: {
      levelThree: "Set this one!"
    }
  }
}

const updatedObj = {
  ...obj,
  levelOne: {
    ...obj.levelOne,
    levelTwo: {
      ...obj.levelOne.levelTwo,
      levelThree: "I am now updated!"
    }
  }
}

Если levelThreeэто динамическое свойство, то есть для установки любого свойства в levelTwo, вы можете использовать [propertyName]: "I am now updated!"where, в котором propertyNameсодержится имя свойства levelTwo.


8

На основе ответа @ bpmason1:

function leaf(obj, path, value) {
  const pList = path.split('.');
  const key = pList.pop();
  const pointer = pList.reduce((accumulator, currentValue) => {
    if (accumulator[currentValue] === undefined) accumulator[currentValue] = {};
    return accumulator[currentValue];
  }, obj);
  pointer[key] = value;
  return obj;
}

Пример:

const obj = {
  boats: {
    m1: 'lady blue'
  }
};
leaf(obj, 'boats.m1', 'lady blue II');
leaf(obj, 'boats.m2', 'lady bird');
console.log(obj); // { boats: { m1: 'lady blue II', m2: 'lady bird' } }

7

В Lodash есть метод под названием update который делает именно то, что вам нужно.

Этот метод получает следующие параметры:

  1. Объект обновления
  2. Путь к обновляемому свойству (свойство может быть глубоко вложенным)
  3. Функция, которая возвращает значение для обновления (учитывая исходное значение в качестве параметра)

В вашем примере это будет выглядеть так:

_.update(obj, 'db.mongodb.user', function(originalValue) {
  return 'root'
})

2

Я создал суть для установки и получения значений obj по строке на основе правильного ответа. Вы можете скачать его или использовать как пакет npm / yarn.

// yarn add gist:5ceba1081bbf0162b98860b34a511a92
// npm install gist:5ceba1081bbf0162b98860b34a511a92
export const DeepObject = {
  set: setDeep,
  get: getDeep
};

// https://stackoverflow.com/a/6491621
function getDeep(obj: Object, path: string) {
  path = path.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
  path = path.replace(/^\./, '');           // strip a leading dot
  const a = path.split('.');
  for (let i = 0, l = a.length; i < l; ++i) {
    const n = a[i];
    if (n in obj) {
      obj = obj[n];
    } else {
      return;
    }
  }

  return obj;
}

// https://stackoverflow.com/a/18937118
function setDeep(obj: Object, path: string, value: any) {
  let schema = obj;  // a moving reference to internal objects within obj
  const pList = path.split('.');
  const len = pList.length;
  for (let i = 0; i < len - 1; i++) {
    const elem = pList[i];
    if (!schema[elem]) {
      schema[elem] = {};
    }
    schema = schema[elem];
  }

  schema[pList[len - 1]] = value;
}

// Usage
// import {DeepObject} from 'somePath'
//
// const obj = {
//   a: 4,
//   b: {
//     c: {
//       d: 2
//     }
//   }
// };
//
// DeepObject.set(obj, 'b.c.d', 10); // sets obj.b.c.d to 10
// console.log(DeepObject.get(obj, 'b.c.d')); // returns 10

1

Если вам нужно изменить только более глубокие вложенные объекты, тогда другой метод может заключаться в ссылке на объект. Поскольку объекты JS обрабатываются их ссылками, вы можете создать ссылку на объект, к которому у вас есть доступ по строковому ключу.

Пример:

// The object we want to modify:
var obj = {
    db: {
        mongodb: {
            host: 'localhost',
            user: 'root'
        }
    },
    foo: {
        bar: baz
    }
};

var key1 = 'mongodb';
var key2 = 'host';

var myRef = obj.db[key1]; //this creates a reference to obj.db['mongodb']

myRef[key2] = 'my new string';

// The object now looks like:
var obj = {
    db: {
        mongodb: {
            host: 'my new string',
            user: 'root'
        }
    },
    foo: {
        bar: baz
    }
};

1

Другой подход - использовать рекурсию для рытья объекта:

(function(root){

  function NestedSetterAndGetter(){
    function setValueByArray(obj, parts, value){

      if(!parts){
        throw 'No parts array passed in';
      }

      if(parts.length === 0){
        throw 'parts should never have a length of 0';
      }

      if(parts.length === 1){
        obj[parts[0]] = value;
      } else {
        var next = parts.shift();

        if(!obj[next]){
          obj[next] = {};
        }
        setValueByArray(obj[next], parts, value);
      }
    }

    function getValueByArray(obj, parts, value){

      if(!parts) {
        return null;
      }

      if(parts.length === 1){
        return obj[parts[0]];
      } else {
        var next = parts.shift();

        if(!obj[next]){
          return null;
        }
        return getValueByArray(obj[next], parts, value);
      }
    }

    this.set = function(obj, path, value) {
      setValueByArray(obj, path.split('.'), value);
    };

    this.get = function(obj, path){
      return getValueByArray(obj, path.split('.'));
    };

  }
  root.NestedSetterAndGetter = NestedSetterAndGetter;

})(this);

var setter = new this.NestedSetterAndGetter();

var o = {};
setter.set(o, 'a.b.c', 'apple');
console.log(o); //=> { a: { b: { c: 'apple'}}}

var z = { a: { b: { c: { d: 'test' } } } };
setter.set(z, 'a.b.c', {dd: 'zzz'}); 

console.log(JSON.stringify(z)); //=> {"a":{"b":{"c":{"dd":"zzz"}}}}
console.log(JSON.stringify(setter.get(z, 'a.b.c'))); //=> {"dd":"zzz"}
console.log(JSON.stringify(setter.get(z, 'a.b'))); //=> {"c":{"dd":"zzz"}}

1

Мне нужно было добиться того же, но в Node.js ... Итак, я нашел этот замечательный модуль: https://www.npmjs.com/package/nested-property

Пример:

var mod = require("nested-property");
var obj = {
  a: {
    b: {
      c: {
        d: 5
      }
    }
  }
};
console.log(mod.get(obj, "a.b.c.d"));
mod.set(obj, "a.b.c.d", 6);
console.log(mod.get(obj, "a.b.c.d"));

как решать сложные вложенные объекты. `` `const x = {'один': 1, 'два': 2, 'три': {'один': 1, 'два': 2, 'три': [{'один': 1}, { 'one': 'ONE'}, {'one': 'I'}]}, 'четыре': [0, 1, 2]}; console.log (np.get (x, 'three.three [0] .one')); ''
Sumukha HS

1

Я придумал собственное решение, использующее чистый es6 и рекурсию, которая не изменяет исходный объект.

const setNestedProp = (obj = {}, [first, ...rest] , value) => ({
  ...obj,
  [first]: rest.length
    ? setNestedProp(obj[first], rest, value)
    : value
});

const result = setNestedProp({}, ["first", "second", "a"], 
"foo");
const result2 = setNestedProp(result, ["first", "second", "b"], "bar");

console.log(result);
console.log(result2);


Вы можете исключить первый блок if, объявив "obj" со значением по умолчанию setNestedProp = (obj = {}, keys, value) => {
blindChicken

1
Да мило. Оглядываясь назад, можно разрушить аргумент о ключах на месте и сохранить еще одну строчку кода
Генри Инг-Симмонс

По сути, теперь однострочный 👍
Генри Инг-Симмонс

0

Если вы хотите, чтобы функция, для которой существовали предыдущие свойства, вы можете использовать что-то вроде этого, она также вернет флаг, указывающий, удалось ли ей найти и установить вложенное свойство.

function set(obj, path, value) {
    var parts = (path || '').split('.');
    // using 'every' so we can return a flag stating whether we managed to set the value.
    return parts.every((p, i) => {
        if (!obj) return false; // cancel early as we havent found a nested prop.
        if (i === parts.length - 1){ // we're at the final part of the path.
            obj[parts[i]] = value;          
        }else{
            obj = obj[parts[i]]; // overwrite the functions reference of the object with the nested one.            
        }   
        return true;        
    });
}

0

Вдохновленный ClojureScript assoc-in( https://github.com/clojure/clojurescript/blob/master/src/main/cljs/cljs/core.cljs#L5280 ) с использованием рекурсии:

/**
 * Associate value (v) in object/array (m) at key/index (k).
 * If m is falsy, use new object.
 * Returns the updated object/array.
 */
function assoc(m, k, v) {
    m = (m || {});
    m[k] = v;
    return m;
}

/**
 * Associate value (v) in nested object/array (m) using sequence of keys (ks)
 * to identify the path to the nested key/index.
 * If one of the values in the nested object/array doesn't exist, it adds
 * a new object.
 */
function assoc_in(m={}, [k, ...ks], v) {
    return ks.length ? assoc(m, k, assoc_in(m[k], ks, v)) : assoc(m, k, v);
}

/**
 * Associate value (v) in nested object/array (m) using key string notation (s)
 * (e.g. "k1.k2").
 */
function set(m, s, v) {
    ks = s.split(".");
    return assoc_in(m, ks, v);
}

Заметка:

С предоставленной реализацией,

assoc_in({"a": 1}, ["a", "b"], 2) 

возвращается

{"a": 1}

Я бы предпочел, чтобы в этом случае он выдавал ошибку. При желании вы можете добавить проверку, assocчтобы убедиться, mчто это объект или массив, и выдать ошибку в противном случае.


0

Попробовал вкратце написать этот метод набора , может кому то поможет!

function set(obj, key, value) {
 let keys = key.split('.');
 if(keys.length<2){ obj[key] = value; return obj; }

 let lastKey = keys.pop();

 let fun = `obj.${keys.join('.')} = {${lastKey}: '${value}'};`;
 return new Function(fun)();
}

var obj = {
"hello": {
    "world": "test"
}
};

set(obj, "hello.world", 'test updated'); 
console.log(obj);

set(obj, "hello.world.again", 'hello again'); 
console.log(obj);

set(obj, "hello.world.again.onece_again", 'hello once again');
console.log(obj);


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.