[英]Multi-dimensional associative arrays in JavaScript
查询结果如下:(key1和key2可以是任意文本)
id key1 key2 value
1 fred apple 2
2 mary orange 10
3 fred banana 7
4 fred orange 4
5 sarah melon 5
...
我希望将数据存储在一个网格中(可能是一个数组),像这样循环所有记录:
apple orange banana melon
fred 2 4 7 -
mary - 10 - -
sarah - - - 5
在 PHP 中,这将非常容易,使用关联数组:
$result['fred']['apple'] = 2;
但是在 JavaScript 中,像这样的关联数组不起作用。 在阅读了大量教程后,我所能得到的就是:
arr=[];
arr[1]['apple'] = 2;
但是arr['fred']['apple'] = 2;
不起作用。 我尝试了对象数组,但对象属性不能是自由文本。 我看教程越多,我就越困惑......
欢迎任何想法:)
只需使用常规 JavaScript 对象,它会以与关联数组相同的方式“读取”。 您还必须记住首先初始化它们。
var obj = {};
obj['fred'] = {};
if('fred' in obj ){ } // can check for the presence of 'fred'
if(obj.fred) { } // also checks for presence of 'fred'
if(obj['fred']) { } // also checks for presence of 'fred'
// The following statements would all work
obj['fred']['apples'] = 1;
obj.fred.apples = 1;
obj['fred'].apples = 1;
// or build or initialize the structure outright
var obj = { fred: { apples: 1, oranges: 2 }, alice: { lemons: 1 } };
如果您正在查看值,您可能会看到如下所示的内容:
var people = ['fred', 'alice'];
var fruit = ['apples', 'lemons'];
var grid = {};
for(var i = 0; i < people.length; i++){
var name = people[i];
if(name in grid == false){
grid[name] = {}; // must initialize the sub-object, otherwise will get 'undefined' errors
}
for(var j = 0; j < fruit.length; j++){
var fruitName = fruit[j];
grid[name][fruitName] = 0;
}
}
如果它不必须是一个数组,你可以创建一个“多维” JS对象...
<script type="text/javascript">
var myObj = {
fred: { apples: 2, oranges: 4, bananas: 7, melons: 0 },
mary: { apples: 0, oranges: 10, bananas: 0, melons: 0 },
sarah: { apples: 0, oranges: 0, bananas: 0, melons: 5 }
}
document.write(myObj['fred']['apples']);
</script>
Javascript 很灵活:
var arr = {
"fred": {"apple": 2, "orange": 4},
"mary": {}
//etc, etc
};
alert(arr.fred.orange);
alert(arr["fred"]["orange"]);
for (key in arr.fred)
alert(key + ": " + arr.fred[key]);
因为我需要以一种很好的方式获取所有元素,所以我遇到了这个 SO 主题“遍历二维关联数组/对象”——不管我的名字是什么,因为功能很重要。
var imgs_pl = {
'offer': { 'img': 'wer-handwritter_03.png', 'left': 1, 'top': 2 },
'portfolio': { 'img': 'wer-handwritter_10.png', 'left': 1, 'top': 2 },
'special': { 'img': 'wer-handwritter_15.png', 'left': 1, 'top': 2 }
};
for (key in imgs_pl) {
console.log(key);
for (subkey in imgs_pl[key]) {
console.log(imgs_pl[key][subkey]);
}
}
对于某些应用程序,javascript 中的多维关联数组似乎有一种更简单的方法。
鉴于所有数组的内部表示实际上都是对象的对象,已经表明数字索引元素的访问时间实际上与关联(文本)索引元素的访问时间相同。
一级关联索引元素的访问时间不会随着实际元素数量的增加而增加。
鉴于此,可能在很多情况下,使用串联字符串方法来创建多维元素的等价性实际上更好。 例如:
store['fruit']['apples']['granny']['price] = 10
store['cereal']['natural']['oats']['quack'] = 20
去:
store['fruit.apples.granny.price'] = 10
store['cereal.natural.oats.quack'] = 20
优点包括:
当属性名称为整数时,获取关联数组的属性数组的值:
从属性名称为整数的关联数组开始:
var categories = [
{"1":"Category 1"},
{"2":"Category 2"},
{"3":"Category 3"},
{"4":"Category 4"}
];
将项目推送到数组:
categories.push({"2300": "Category 2300"});
categories.push({"2301": "Category 2301"});
循环遍历数组并使用属性值执行某些操作。
for (var i = 0; i < categories.length; i++) {
for (var categoryid in categories[i]) {
var category = categories[i][categoryid];
// log progress to the console
console.log(categoryid + " : " + category);
// ... do something
}
}
控制台输出应如下所示:
1 : Category 1
2 : Category 2
3 : Category 3
4 : Category 4
2300 : Category 2300
2301 : Category 2301
如您所见,您可以绕过关联数组的限制,并将属性名称设为整数。
注意:我的示例中的关联数组是序列化 Dictionary[] 对象时将拥有的 json。
不要使用数组,使用对象。
var foo = new Object();
您不一定需要使用对象,您可以使用普通的多维数组来实现。
这是我没有对象的解决方案:
// Javascript
const matrix = [];
matrix.key1 = [
'value1',
'value2',
];
matrix.key2 = [
'value3',
];
在 PHP 中相当于:
// PHP
$matrix = [
"key1" => [
'value1',
'value2',
],
"key2" => [
'value3',
]
];
<script language="javascript"> // Set values to variable var sectionName = "TestSection"; var fileMap = "fileMapData"; var fileId = "foobar"; var fileValue= "foobar.png"; var fileId2 = "barfoo"; var fileValue2= "barfoo.jpg"; // Create top-level image object var images = {}; // Create second-level object in images object with // the name of sectionName value images[sectionName] = {}; // Create a third level object var fileMapObj = {}; // Add the third level object to the second level object images[sectionName][fileMap] = fileMapObj; // Add forth level associate array key and value data images[sectionName][fileMap][fileId] = fileValue; images[sectionName][fileMap][fileId2] = fileValue2; // All variables alert ("Example 1 Value: " + images[sectionName][fileMap][fileId]); // All keys with dots alert ("Example 2 Value: " + images.TestSection.fileMapData.foobar); // Mixed with a different final key alert ("Example 3 Value: " + images[sectionName]['fileMapData'][fileId2]); // Mixed brackets and dots... alert ("Example 4 Value: " + images[sectionName]['fileMapData'].barfoo); // This will FAIL! variable names must be in brackets! alert ("Example 5 Value: " + images[sectionName]['fileMapData'].fileId2); // Produces: "Example 5 Value: undefined". // This will NOT work either. Values must be quoted in brackets. alert ("Example 6 Value: " + images[sectionName][fileMapData].barfoo); // Throws and exception and stops execution with error: fileMapData is not defined // We never get here because of the uncaught exception above... alert ("The End!"); </script>
var myObj = [];
myObj['Base'] = [];
myObj['Base']['Base.panel.panel_base'] = {ContextParent:'',ClassParent:'',NameParent:'',Context:'Base',Class:'panel',Name:'panel_base',Visible:'',ValueIst:'',ValueSoll:'',
Align:'', AlignFrom:'',AlignTo:'',Content:'',onClick:'',Style:'',content_ger_sie:'',content_ger_du:'',content_eng:'' };
myObj['Base']['Base.panel.panel_top'] = {ContextParent:'',ClassParent:'',NameParent:'',Context:'Base',Class:'panel',Name:'panel_base',Visible:'',ValueIst:'',ValueSoll:'',
Align:'',AlignFrom:'',AlignTo:'',Content:'',onClick:'',Style:'',content_ger_sie:'',content_ger_du:'',content_eng:'' };
myObj['SC1'] = [];
myObj['SC1']['Base.panel.panel_base'] = {ContextParent:'',ClassParent:'',NameParent:'',Context:'Base',Class:'panel',Name:'panel_base',Visible:'',ValueIst:'',ValueSoll:'',
Align:'', AlignFrom:'',AlignTo:'',Content:'',onClick:'',Style:'',content_ger_sie:'',content_ger_du:'',content_eng:'' };
myObj['SC1']['Base.panel.panel_top'] = {ContextParent:'',ClassParent:'',NameParent:'',Context:'Base',Class:'panel',Name:'panel_base',Visible:'',ValueIst:'',ValueSoll:'',
Align:'',AlignFrom:'',AlignTo:'',Content:'',onClick:'',Style:'',content_ger_sie:'',content_ger_du:'',content_eng:'' };
console.log(myObj);
if ('Base' in myObj) {
console.log('Base found');
if ('Base.panel.panel_base' in myObj['Base']) {
console.log('Base.panel.panel_base found');
console.log('old value: ' + myObj['Base']['Base.panel.panel_base'].Context);
myObj['Base']['Base.panel.panel_base'] = 'new Value';
console.log('new value: ' + myObj['Base']['Base.panel.panel_base']);
}
}
输出:
数组操作有效。 没有问题。
迭代:
Object.keys(myObj['Base']).forEach(function(key, index) {
var value = objcons['Base'][key];
}, myObj);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.