web-dev-qa-db-ja.com

Javascript：配列で指定されたオブジェクト名を使用して、ネストされたオブジェクトを動的に作成する方法

誰かがこの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 ...ループがなければならないと思いますが、ネストされたオブジェクトを作成する方法を見つけることができませんでした。

あなたが助けてくれなくても時間を割いて読んでくれて本当に感謝しています。

javascriptarraysobjectdynamicnested
54
David
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');
63
kennytm

関数を入れて、短くて速く（再帰なし）。

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プロトタイプを変更する場合には、より安全です。

88
jlgrall

私のES2015ソリューション。既存の値を保持します。

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

例：

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

別の再帰的なソリューション：

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!"}}
8
nerfologist

ES6の使用は短縮されます。パスを配列に設定します。最初に、オブジェクトを埋め始めるために、配列を逆にする必要があります。

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

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

ネストされた階層の各要素にdistinct値を設定できるjlgrallの答えの簡単な調整を次に示します。

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

それが役に立てば幸い。

5
TimDog

以下は、ネストされたオブジェクトを動的に作成するための機能的なソリューションです。

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"}}}}
4
Aliaksandr Sushkevich

ネストされたフィールドに特定の値を設定するこの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' } } }
1
Vadim Shvetsov

この質問が非常に古いことを感謝します！しかし、ノードでこのようなことをする必要に出くわした後、モジュールを作成してnpmに公開しました。 ネストブ

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
1
Chrift

再帰関数を使用してみてください：

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);
  }
}
0
sv_in

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']"= {}およびそれを評価します。

0
lonewarrior556

これはもっと短いと思う：

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];
}
0
Deele

@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);

これが有用で関連性があることを願っています。申し訳ありませんが、この例を壊しました...

0
Must Impress

独自のオブジェクトメソッドを定義できます。また、簡潔にするためにアンダースコアを使用しています：

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}}
0
Keng

これを試してください： 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
       ]
]
0
Manioz

パスの最後に値を設定するために配列キーをサポートするネストされたオブジェクトを作成する必要がある人のためのスニペット。パスは次のような文字列です：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]] || {};
        }
    }
};
0
Vyacheslav Voronchuk

ネストされたデータを設定：

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
0
Cody Moniz