javascript - 访问动态创建的对象..js

Question

我无法访问在循环内创建的对象..

// global var $subtypes //

...
... code ...
...

$subtypes = {};

for ( var $cols = 0; $cols < $subtypecols.length; $cols++ ) // Here i can got from 1 to 20 
{
    var columnName = 'column' + $cols; // column0, column1, column2 ... column20
    $subtypes.columnName = {  };  // creating empty object

    for ( var $rows = 0; $rows < $subtypeTableRows.length; $rows++ ) // from 1 to 10.
    {
        var rowNumber = 'row' + $rows; // row1, row2, row3 ... row7
        $subtypes.columnName.rowNumber = { 'count' : -1, 'price' : -1 };
    };
};
//console.log ( 'l ' +  $subtypes['column3']['row5'] ); //undefined is not an object (evaluating '$subtypes['column3']['row5']')
//console.log ( 'l ' +  $subtypes['column3']['row5'].count ); //undefined is not an object (evaluating '$subtypes['column3']['row5']')
//console.log ( 'l ' +  $subtypes[column3][row5].count ); //ReferenceError: Can't find variable: column3
//console.log ( 'l ' +  $subtypes[column3][row5] ); //ReferenceError: Can't find variable: column3
//console.log ( 'l ' +  $subtypes.column3.row5 ); //expected 'object', got: undefined is not an object (evaluating '$subtypes.column4.row2')

我做错了什么？

UPD 1:该代码不起作用..

for (var o = 0; o < 5; o++)
{
    var $prevNum = 'prev' + o;
    var $prevTxt = $nodelist[o].textContent

    $itemConfig = {     $itemWithPreviews : { $prevNum : $prevTxt }     }; 
    // i got string name '$prevNum' : and value from valiable $prevTxt.

    $itemConfig = {     $itemWithPreviews : { [$prevNum] : $prevTxt }   }; 
    // JS script can't start
};

更新2:

var $root = {};
var $root[0] = {}; // data
var $root[1] = {}; // another data
var $root[2] = {}; // here will be stored buttons and rows.. 

for ( var $buttons = 0; $buttons < 10; $buttons++ ) // 10 buttons
{
    var buttonName = 'button' + $buttons; // button0, button1, button2 ... buttom9

    var objButton = { };
    objButton[buttonName] = { }; 
    $root[2].push( objButton ); //here all's ok: { "button0":{} }, { "button1":{} } ... 


    for ( var $row = 0; $row < 5; $row++ )
    {
        var rowNumber = 'row' + $row; // row0, row2 ... row4


        var objRow = { };
        objRow[rowNumber] = { }; 

        $root[2][buttonName].push ( objRow ); 
        // Expect.: { "button0": { "row0": { }, "row1": { }, "row2": { }, ...  } }, { "button1": { "row0": { }, "row1": { }, "row2": { }, ...  } } ... 
        // Got: ERROR: TypeError: undefined is not an object (evaluating '$root[2][buttonName].push')

        //same situation...
        $root[2][$buttons].push ( objRow );
        // Got: ERROR: TypeError: undefined is not a function (evaluating '$root[2][$buttons].push ( objRow )')

    };
};

Answer 1

你做了:

$subtypes.columnName = {  };
$subtypes.columnName.rowNumber = { 'count' : -1, 'price' : -1 };

它创建了对象:

$subtypes["columnName"]["rowNumber"];

如果你想创建$subtypes['column3']['row5']那么你需要这样做:

$subtypes[columnName] = {  };
$subtypes[columnName][rowNumber] = { 'count' : -1, 'price' : -1 };

请记住，点符号 a.b.c 相当于 a['b']['c']。因此，您的 console.log() 也可以写为:

console.log ( 'l ' +  $subtypes.column3.row5 );

更新:

至于你的后续问题，当你这样做时

$itemConfig = {$itemWithPreviews : { $prevNum : $prevTxt }}; 

您正在创建以下对象:

$itemConfig["$itemWithPreviews"]["$prevNum"] = $prevTxt;

属性名称不是变量。它们始终被解释为文字字符串。因此 $prevNum 是 "$prevNum" 而不是 "prev0" 等。另一方面，属性值是变量，因此 $prevTxt 将具有相同的值。

ES6(也称为 ES2015)引入了新语法 called computed property names这可以让你做你想做的事。执行此操作的语法使用熟悉的方括号:

$itemConfig = {[$itemWithPreviews] : {[$prevNum] : $prevTxt }};

但是，截至 2017 年 1 月，只有 Chrome、Firefox 和 Node.js 支持此语法。这在其他浏览器中不起作用，因此您必须采用老式方式:

$itemConfig = {};
$itemConfig[$itemWithPreviews] = {};
$itemConfig[$itemWithPreviews][$prevNum] = $prevTxt;

如果您想在循环中执行此操作，可以有条件地初始化属性:

$itemConfig = {};

for (var o = 0; o < 5; o++) {
    var $prevNum = 'prev' + o;
    var $prevTxt = $nodelist[o].textContent;

    if ($itemConfig[$itemWithPreviews] === undefined) {
        $itemConfig[$itemWithPreviews] = {};
    }

    if ($itemConfig[$itemWithPreviews][$prevNum] === undefined) {
        $itemConfig[$itemWithPreviews][$prevNum] = {};
    }

    $itemConfig[$itemWithPreviews][$prevNum] = $prevTxt;
}