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;
}
}
haveでない場合、「多次元」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( myObject[ '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件名「2次元の連想配列/オブジェクトの走査」に出会った-機能が重要なので名前は関係ない。
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の多次元連想配列へのはるかに簡単なアプローチがあるようです。
すべての配列の内部表現が実際にはオブジェクトのオブジェクトであるとすると、数値インデックス要素のアクセス時間は、実際には連想（テキスト）インデックス要素のアクセス時間と同じであることが示されています。
第1レベルの連想インデックス付き要素のアクセス時間は、実際の要素の数が増えても増加しません。
これを考えると、実際には連結文字列アプローチを使用して多次元要素の等価性を作成する方が良い場合が多くあります。例えば：
store['fruit']['apples']['granny']['price] = 10
store['cereal']['natural']['oats']['quack'] = 20
に行く：
store['fruit.apples.granny.price'] = 10
store['cereal.natural.oats.quack'] = 20
利点は次のとおりです。
- サブオブジェクトを初期化したり、オブジェクトを最適に結合する方法を考え出す必要はありません
- 単一レベルのアクセス時間。オブジェクト内のオブジェクトにはN倍のアクセス時間が必要です
- object.keys（）を使用して、すべてのディメンション情報を抽出できます。
- キーで関数regex.test（string）とarray.map関数を使用して、必要なものを正確に引き出すことができます。
- ディメンションに階層はありません。
- 「ドット」は任意です-アンダースコアを使用すると、実際に正規表現が簡単になります
- jSONをこの形式に「フラット化」するためのスクリプトも多数あります
- キーリストの他のすべてのニース配列処理関数を使用できます
配列を使用せず、オブジェクトを使用します。
var foo = new Object();
プロパティ名が整数の場合、連想配列のプロパティの値を取得します。
プロパティ名が整数である連想配列から始めます。
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です。
オブジェクトを必ずしも使用する必要はありません。通常の多次元配列で使用できます。
これは私の解決策ですオブジェクトなし：
// Javascript
const matrix = [];
matrix.key1 = [
'value1',
'value2',
];
matrix.key2 = [
'value3',
];
PHPでは次と同等です：
// PHP
$matrix = [
"key1" => [
'value1',
'value2',
],
"key2" => [
'value3',
]
];
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']);
}
}
出力：
- ベースが見つかりました
- Base.panel.panel_baseが見つかりました
- 古い値：ベース
- 新しい値：新しい値
配列操作が機能します。問題はない。
反復：
Object.keys(myObj['Base']).forEach(function(key, index) {
var value = objcons['Base'][key];
}, myObj);
<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>