Javascript：如何使用数组给出的对象名称动态创建嵌套对象

Question

我希望有人可以帮我解决这个Javascript。

我有一个名为“设置”的对象，我想编写一个向该对象添加新设置的函数。

新设置的名称和值以字符串形式提供。然后，提供设置名称的字符串将下划线拆分为数组。通过使用数组的每个部分给出的名称创建新的嵌套对象，新设置应添加到现有的“设置”对象中，除了最后一部分应该是给出设置值的字符串。然后，我应该可以参考设置，例如警惕它的价值。我可以像这样静态地做到这一点......

var Settings = {};
var newSettingName = "Modules_Video_Plugin";
var newSettingValue = "JWPlayer";
var newSettingNameArray = newSettingName.split("_");

Settings[newSettingNameArray[0]] = {};
Settings[newSettingNameArray[0]][newSettingNameArray[1]] = {};
Settings[newSettingNameArray[0]][newSettingNameArray[1]][newSettingNameArray[2]] = newSettingValue;

alert(Settings.Modules.Mediaplayers.Video.Plugin);

...创建嵌套对象的部分正在执行此操作......

Settings["Modules"] = {};
Settings["Modules"]["Video"] = {};
Settings["Modules"]["Video"]["Plugin"] = "JWPlayer";

但是，由于构成设置名称的部件数量可能不同，例如， newSettingName可以是“Modules_Floorplan_Image_Src”，我想使用诸如...之类的函数动态地执行此操作。

createSetting (newSettingNameArray, newSettingValue);

function createSetting(setting, value) {
    // code to create new setting goes here
}

任何人都可以帮我解决如何动态完成这项工作吗？

我认为在那里必须有一个for循环才能通过数组进行迭代，但是我还没有找到一种方法来创建嵌套对象。

如果你有这么远，非常感谢你花时间阅读，即使你无法帮助。

Answer 1

放入一个简短快速的函数（无递归）。

var createNestedObject = function( base, names ) {
    for( var i = 0; i < names.length; i++ ) {
        base = base[ names[i] ] = base[ names[i] ] || {};
    }
};

// Usage:
createNestedObject( window, ["shapes", "triangle", "points"] );
// Now window.shapes.triangle.points is an empty object, ready to be used.

它会跳过层次结构中已存在的部分。如果您不确定是否已创建层次结构，则非常有用。

或者：

一个更高级的版本，您可以直接将值分配给层次结构中的最后一个对象，并且可以链接函数调用，因为它返回最后一个对象。

// Function: createNestedObject( base, names[, value] )
//   base: the object on which to create the hierarchy
//   names: an array of strings contaning the names of the objects
//   value (optional): if given, will be the last object in the hierarchy
// Returns: the last object in the hierarchy
var createNestedObject = function( base, names, value ) {
    // If a value is given, remove the last name and keep it for later:
    var lastName = arguments.length === 3 ? names.pop() : false;

    // Walk the hierarchy, creating new objects where needed.
    // If the lastName was removed, then the last object is not set yet:
    for( var i = 0; i < names.length; i++ ) {
        base = base[ names[i] ] = base[ names[i] ] || {};
    }

    // If a value was given, set it to the last name:
    if( lastName ) base = base[ lastName ] = value;

    // Return the last object in the hierarchy:
    return base;
};

// Usages:

createNestedObject( window, ["shapes", "circle"] );
// Now window.shapes.circle is an empty object, ready to be used.

var obj = {}; // Works with any object other that window too
createNestedObject( obj, ["shapes", "rectangle", "width"], 300 );
// Now we have: obj.shapes.rectangle.width === 300

createNestedObject( obj, "shapes.rectangle.height".split('.'), 400 );
// Now we have: obj.shapes.rectangle.height === 400

注意：如果您的层次结构需要从标准对象以外的值构建（即不是{}），请参阅下面的TimDog答案。

编辑：使用常规循环而不是for...in循环。如果库修改了Array原型，它会更安全。

Answer 2

function assign(obj, keyPath, value) {
   lastKeyIndex = keyPath.length-1;
   for (var i = 0; i < lastKeyIndex; ++ i) {
     key = keyPath[i];
     if (!(key in obj))
       obj[key] = {}
     obj = obj[key];
   }
   obj[keyPath[lastKeyIndex]] = value;
}

用法：

var settings = {};
assign(settings, ['Modules', 'Video', 'Plugin'], 'JWPlayer');

Answer 3

My ES2015 solution. Keeps existing values.

const set = (obj, path, val) => { 
    const keys = path.split('.');
    const lastKey = keys.pop();
    const lastObj = keys.reduce((obj, key) => 
        obj[key] = obj[key] || {}, 
        obj); 
    lastObj[lastKey] = val;
};

Example:

const obj = {'a': {'prop': {'that': 'exists'}}};
set(obj, 'a.very.deep.prop', 'value');
console.log(JSON.stringify(obj));
// {"a":{"prop":{"that":"exists"},"very":{"deep":{"prop":"value"}}}}

Answer 4

另一种递归解决方案：

var nest = function(obj, keys, v) {
    if (keys.length === 1) {
      obj[keys[0]] = v;
    } else {
      var key = keys.shift();
      obj[key] = nest(typeof obj[key] === 'undefined' ? {} : obj[key], keys, v);
    }

    return obj;
};

使用示例：

var dog = {bark: {sound: 'bark!'}};
nest(dog, ['bark', 'loudness'], 66);
nest(dog, ['woff', 'sound'], 'woff!');
console.log(dog); // {bark: {loudness: 66, sound: "bark!"}, woff: {sound: "woff!"}}

Answer 5

缩短ES6的使用时间。将路径设置为数组。 首先，您必须反转数组，才能开始填充对象。

let obj = ['a','b','c'] // {a:{b:{c:{}}}
obj.reverse();

const nestedObject = obj.reduce((prev, current) => (
    {[current]:{...prev}}
), {});

Answer 6

这是对jlgrall的回答的简单调整，允许在嵌套层次结构中的每个元素上设置不同值：

var createNestedObject = function( base, names, values ) {
    for( var i in names ) base = base[ names[i] ] = base[ names[i] ] || (values[i] || {});
};

希望它有所帮助。

Answer 7

这是一个动态创建嵌套对象的功能解决方案。

const nest = (path, obj) => {
  const reversedPath = path.split('.').reverse();

  const iter = ([head, ...tail], obj) => {
    if (!head) {
      return obj;
    }
    const newObj = {[head]: {...obj}};
    return iter(tail, newObj);
  }
  return iter(reversedPath, obj);
}

示例：

const data = {prop: 'someData'};
const path = 'a.deep.path';
const result = nest(path, data);
console.log(JSON.stringify(result));
// {"a":{"deep":{"path":{"prop":"someData"}}}}

Answer 8

欣赏这个问题已经过去了！但是在遇到需要在节点中执行此类操作之后，我制作了一个模块并将其发布到npm。 Nestob

var nestob = require('nestob');

//Create a new nestable object - instead of the standard js object ({})
var newNested = new nestob.Nestable();

//Set nested object properties without having to create the objects first!
newNested.setNested('biscuits.oblong.marmaduke', 'cheese');
newNested.setNested(['orange', 'tartan', 'pipedream'], { poppers: 'astray', numbers: [123,456,789]});

console.log(newNested, newNested.orange.tartan.pipedream);
//{ biscuits: { oblong: { marmaduke: 'cheese' } },
  orange: { tartan: { pipedream: [Object] } } } { poppers: 'astray', numbers: [ 123, 456, 789 ] }

//Get nested object properties without having to worry about whether the objects exist
//Pass in a default value to be returned if desired
console.log(newNested.getNested('generic.yoghurt.asguard', 'autodrome'));
//autodrome

//You can also pass in an array containing the object keys
console.log(newNested.getNested(['chosp', 'umbridge', 'dollar'], 'symbols'));
//symbols

//You can also use nestob to modify objects not created using nestob
var normalObj = {};

nestob.setNested(normalObj, 'running.out.of', 'words');

console.log(normalObj);
//{ running: { out: { of: 'words' } } }

console.log(nestob.getNested(normalObj, 'random.things', 'indigo'));
//indigo
console.log(nestob.getNested(normalObj, 'improbable.apricots'));
//false

Answer 9

我喜欢这种ES6不变的方式来在嵌套字段上设置某些值：

const setValueToField = (fields, value) => {
  const reducer = (acc, item, index, arr) => ({ [item]: index + 1 < arr.length ? acc : value });
  return fields.reduceRight(reducer, {});
};

然后将其用于创建目标对象。

const targetObject = setValueToField(['one', 'two', 'three'], 'nice');
console.log(targetObject); // Output: { one: { two: { three: 'nice' } } }

Answer 10

设置嵌套数据：

function setNestedData(root, path, value) {
  var paths = path.split('.');
  var last_index = paths.length - 1;
  paths.forEach(function(key, index) {
    if (!(key in root)) root[key] = {};
    if (index==last_index) root[key] = value;
    root = root[key];
  });
  return root;
}

var obj = {'existing': 'value'};
setNestedData(obj, 'animal.fish.pet', 'derp');
setNestedData(obj, 'animal.cat.pet', 'musubi');
console.log(JSON.stringify(obj));
// {"existing":"value","animal":{"fish":{"pet":"derp"},"cat":{"pet":"musubi"}}}

获取嵌套数据：

function getNestedData(obj, path) {
  var index = function(obj, i) { return obj && obj[i]; };
  return path.split('.').reduce(index, obj);
}
getNestedData(obj, 'animal.cat.pet')
// "musubi"
getNestedData(obj, 'animal.dog.pet')
// undefined

Answer 11

自从我从这个页面开始做一些事情以来，我想回馈

其他示例即使设置了最终节点也会覆盖它，这不是我想要的。

此外，如果 returnObj 设置为 true，则返回基础对象。默认情况下，falsy，它返回最深的节点。

function param(obj, path, value, returnObj) {
  if (typeof path == 'string') path = path.split(".");
  var child = obj;
  path.forEach((key, i) => {
    if (!(key in child)) {
      child[key] = (i < path.length-1) ? {} : value || {};
    }
    child = child[key];
  });
  return returnObj ? obj : child;
}

var x = {};
var xOut = param(x, "y.z", "setting")
console.log(xOut);
xOut = param(x, "y.z", "overwrite") // won't set
console.log(xOut);
xOut = param(x, "y.a", "setting2")
console.log(xOut);
xOut = param(x, "y.a", "setting2", true) // get object rather than deepest node.
console.log(xOut);

您还可以将数字键放在数组中（如果它们尚不存在）。请注意，数字键不会转换为路径第一个元素的数组，因为它是由基础对象的类型设置的。

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function param(obj, path, value, returnObj) {
  if (typeof path == 'string') path = path.split(".");
  var child = obj;
  path.forEach((key, i) => {
    var nextKey = path[i+1];
    if (!(key in child)) {
      child[key] = (nextKey == undefined && value != undefined 
        ? value 
        : isNumber(nextKey)
          ? []
          : {});
    }
    child = child[key];
  });
  return returnObj ? obj : child;
}

var x = {};

var xOut = param(x, "y.z", "setting")
console.log(xOut);
xOut = param(x, "y.z", "overwrite") // won't set
console.log(xOut);
xOut = param(x, "y.a", "setting2")
console.log(xOut);
xOut = param(x, "y.a", "setting2", true) // get object rather than deepest node.
xOut = param(x, "1.0.2.a", "setting")
xOut = param(x, "1.0.1.a", "try to override") // won't set
xOut = param(x, "1.0.5.a", "new-setting", true) // get object rather than deepest node.
console.log(xOut);

当然，当数字键大于 0 时，您可能会看到一些 undefined 间隙。

实际用途可能是

function AddNote(book, page, line) {
  // assume a global global notes collection
  var myNotes = param(allNotes, [book, page, line], []);
  myNotes.push('This was a great twist!')
  return myNotes;
}

var allNotes = {}
var youthfulHopes = AddNote('A Game of Thrones', 4, 2, "I'm already hooked, at least I won't have to wait long for the books to come out!");

console.log(allNotes)
// {"A Game of Thrones": [undefined, undefined, undefined, undefined, [undefined, undefined, ["I'm already hooked, at least I won't have to wait long for the books to come out!"]]]}
console.log(youthfulHopes)
// ["I'm already hooked, at least I won't have to wait long for the books to come out!"]

Answer 12

这里是对几个有用函数的分解，每个函数都保留现有数据。不处理数组。

• setDeep：回答问题。对对象中的其他数据无损。
• setDefaultDeep：相同，但仅在尚未设置的情况下设置。
• setDefault：设置密钥（如果尚未设置）。与Python的setdefault相同。
• setStructure：构建路径的帮助程序功能。

// Create a nested structure of objects along path within obj. Only overwrites the final value.
let setDeep = (obj, path, value) =>
    setStructure(obj, path.slice(0, -1))[path[path.length - 1]] = value

// Create a nested structure of objects along path within obj. Does not overwrite any value.
let setDefaultDeep = (obj, path, value) =>
    setDefault(setStructure(obj, path.slice(0, -1)), path[path.length - 1], value)

// Set obj[key] to value if key is not in object, and return obj[key]
let setDefault = (obj, key, value) =>
    obj[key] = key in obj ? obj[key] : value;

// Create a nested structure of objects along path within obj. Does not overwrite any value.
let setStructure = (obj, path) => 
    path.reduce((obj, segment) => setDefault(obj, segment, {}), obj);



// EXAMPLES
let temp = {};

// returns the set value, similar to assignment
console.log('temp.a.b.c.d:', 
            setDeep(temp, ['a', 'b', 'c', 'd'], 'one'))

// not destructive to 'one'
setDeep(temp, ['a', 'b', 'z'], 'two')

// does not overwrite, returns previously set value
console.log('temp.a.b.z:  ', 
            setDefaultDeep(temp, ['a', 'b', 'z'], 'unused'))

// creates new, returns current value
console.log('temp["a.1"]: ', 
            setDefault(temp, 'a.1', 'three'))

// can also be used as a getter
console.log("temp.x.y.z:  ", 
            setStructure(temp, ['x', 'y', 'z']))


console.log("final object:", temp)

我不确定为什么有人会想要字符串路径：

1. 它们对于带有句点的键不明确
2. 您必须首先构建字符串

Answer 13

在循环中，您可以使用public errorDownloadingDoc$ = new Subject<any>(); const allErrorsArrary = []; getDocError(doc): Observable<boolean> { return new Observable((observer: Observer<boolean>) => { this.dataService.getDoc(doc).subscribe((content) => { if (content) { observer.next(true); observer.complete(); } }, (error) => { if (error) { allErrorsArrary.push(doc); console.log(allErrorsArrary); this.errorDownloadingDoc$.next(allErrorsArrary); } } ); }); } 并为您创建路径：

lodash.set

Answer 14

试试这个：https://github.com/silkyland/object-to-formdata

var obj2fd = require('obj2fd/es5').default
var fd = obj2fd({
             a:1,
             b:[
                {c: 3},
                {d: 4}
             ]
})

结果：

fd = [
       a => 1,
       b => [
         c => 3,
         d => 4
       ]
]

Answer 15

Eval可能有点过分，但结果很容易可视化，没有嵌套循环或递归。

 function buildDir(obj, path){
   var paths = path.split('_');
   var final = paths.pop();
   for (let i = 1; i <= paths.length; i++) {
     var key = "obj['" + paths.slice(0, i).join("']['") + "']"
     console.log(key)
     eval(`${key} = {}`)
   }
   eval(`${key} = '${final}'`)
   return obj
 }

 var newSettingName = "Modules_Video_Plugin_JWPlayer";
 var Settings = buildDir( {}, newSettingName );

基本上你正在逐步编写一个字符串"obj['one']= {}", "obj['one']['two']"= {}并对其进行评估;

Answer 16

需要创建支持数组键的嵌套对象以将值设置为路径末尾的人的代码段。 Path就是这样的字符串：modal.product.action.review.2.write.survey.data。基于jlgrall版本。

var updateStateQuery = function(state, path, value) {
    var names = path.split('.');
    for (var i = 0, len = names.length; i < len; i++) {
        if (i == (len - 1)) {
            state = state[names[i]] = state[names[i]] || value;
        }
        else if (parseInt(names[i+1]) >= 0) {
            state = state[names[i]] = state[names[i]] || [];
        }
        else {
            state = state[names[i]] = state[names[i]] || {};
        }
    }
};

Answer 17

您可以定义自己的Object方法;我也使用下划线来简洁：

var _ = require('underscore');

// a fast get method for object, by specifying an address with depth
Object.prototype.pick = function(addr) {
    if (!_.isArray(addr)) return this[addr]; // if isn't array, just get normally
    var tmpo = this;
    while (i = addr.shift())
        tmpo = tmpo[i];
    return tmpo;
};
// a fast set method for object, put value at obj[addr]
Object.prototype.put = function(addr, val) {
    if (!_.isArray(addr)) this[addr] = val; // if isn't array, just set normally
    this.pick(_.initial(addr))[_.last(addr)] = val;
};

样本用法：

var obj = { 
           'foo': {
                   'bar': 0 }}

obj.pick('foo'); // returns { bar: 0 }
obj.pick(['foo','bar']); // returns 0
obj.put(['foo', 'bar'], -1) // obj becomes {'foo': {'bar': -1}}

Answer 18

我发现@ jlgrall的答案很棒，但在简化之后，它在Chrome中无效。如果有人想要一个精简版本，这是我的修复：

var callback = 'fn.item1.item2.callbackfunction',
    cb = callback.split('.'),
    baseObj = window;

function createNestedObject(base, items){
    $.each(items, function(i, v){
        base = base[v] = (base[v] || {});
    });
}

callbackFunction = createNestedObject(baseObj, cb);

console.log(callbackFunction);

我希望这是有用和相关的。对不起，我刚刚把这个例子搞砸了......

Answer 19

我认为，这更短：

Settings = {};
newSettingName = "Modules_Floorplan_Image_Src";
newSettingValue = "JWPlayer";
newSettingNameArray = newSettingName.split("_");

a = Settings;
for (var i = 0 in newSettingNameArray) {
    var x = newSettingNameArray[i];
    a[x] = i == newSettingNameArray.length-1 ? newSettingValue : {};
    a = a[x];
}

Answer 20

尝试使用递归函数：

function createSetting(setting, value, index) {
  if (typeof index !== 'number') {
    index = 0;
  }

  if (index+1 == setting.length ) {
    settings[setting[index]] = value;
  }
  else {
    settings[setting[index]] = {};
    createSetting(setting, value, ++index);
  }
}