时间戳

首页 > 解决方案 > 动态创建对象图

javascript - 动态创建对象图

问题描述

我希望能够根据我获得的数据创建对象地图。输出应如下所示：

let var1 = 'source1'
let var2 = 'source2'
let data1=[data here]
let data2=[data here]
let table_specs ={
  var1: data1
  var2: data2
 }

我希望能够动态分配 var1 和 var2。

标签： javascriptarraysobject

解决方案

你已经很接近了：

let var1 = 'source1';
let var2 = 'source2';
let data1= {"foo": "bar" /* data here */};
let data2= {"baz": "bat" /* data here */};
let table_specs ={
  [var1]: data1,
  [var2]: data2,
}

console.log(table_specs);

关键部分是和属性[]周围的方括号 ( ) 。这被称为“计算属性名称”，并使用变量的值作为属性名称，而不是将和作为文字属性名称。var1var2var1var2

的值table_specs将是：

{
  "source1": { "foo": "bar" },
  "source2": { "baz": "bat" }
}

用您自己的数据替换“foo”、“bar”等数据。

或者

如果由于某种原因您不能使用计算的属性名称，那么您仍然可以使用括号表示法使用属性访问器动态设置属性名称：

let var1 = 'source1';
let var2 = 'source2';
let data1= {"foo": "bar" /* data here */};
let data2= {"baz": "bat" /* data here */};
let table_specs ={};

table_specs[var1] = data1;
table_specs[var2] = data2;

这将产生相同的结果，但需要多几行代码。好处是你有更多的灵活性。例如，如果在编写代码时不知道“源”的数量，则可以使用循环，而计算的属性名称仍然需要您知道属性的确切数量（必须保持一致），即使虽然你不知道名字。

例如，如果满足某个条件，您可以添加第三个来源：

if (some_condition) {
    table_specs[var3] = data3;
}

您将无法使用计算的属性名称来执行此操作。

请注意，您可以混合搭配：

let var1 = 'source1';
let var2 = 'source2';
let var3 = 'source3';
let data1= {"foo": "bar" /* data here */};
let data2= {"baz": "bat" /* data here */};
let data3= {"biz": "buz" /* data here */};
let table_specs ={
    [var1]: data1,
    [var2]: data2,
};

if (some_condition) {
    table_specs[var3] = data3;
}

推荐阅读