Багатовимірні асоціативні масиви в JavaScript

Question 1

Існують такі результати запиту: (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;не працює. Я спробував масиви об’єктів, але властивості об’єктів не можуть бути вільним текстом. Чим більше я читав підручники, тим більше заплутувався ...

Будь-яка ідея вітається :)

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

Question 3

Якщо це не повинен бути масив, ви можете створити "багатовимірний" об'єкт 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>

Question 4

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

Question 5

Оскільки мені потрібно було отримати всі елементи в хороший спосіб, я зіткнувся з цією темою 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]);
    }
}

Question 6

Здається, що для деяких додатків існує набагато простіший підхід до багатовимірних асоціативних масивів у 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

Серед переваг:

немає необхідності ініціалізувати під-об'єкти або з'ясувати, як найкраще поєднувати об'єкти
однорівневий час доступу. об'єкти всередині об'єктів потребують N разів часу доступу
може використовувати Object.keys () для вилучення всієї інформації про розміри та ..
може використовувати функцію regex.test (рядок) та функцію array.map на клавішах, щоб витягти саме те, що ви хочете.
відсутність ієрархії у вимірах.
"крапка" довільна - використання підкреслення насправді полегшує регулярні вирази
Є багато сценаріїв для "вирівнювання" JSON як у цей формат, так і поза ним
може використовувати всі інші приємні функції обробки масивів у списку ключів

Question 7

Отримати значення масиву властивості асоціативних масивів, коли ім’ям властивості є ціле число:

Починаючи з асоціативного масиву, де імена властивостей є цілими числами:

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

Як бачите, ви можете обійти обмеження асоціативного масиву і мати назву властивості як ціле число.

ПРИМІТКА: Асоціативний масив у моєму прикладі - це json, який ви мали б, якщо б ви серіалізували об’єкт Dictionary [].

Question 8

Не використовуйте масив, використовуйте об'єкт.

var foo = new Object();

Question 9

Вам не потрібно обов'язково використовувати Об'єкти, це можна зробити за допомогою звичайних багатовимірних масивів.

Це моє рішення без об’єктів :

// Javascript
const matrix = [];

matrix.key1 = [
  'value1',
  'value2',
];

matrix.key2 = [
  'value3',
];

що в PHP еквівалентно:

// PHP
$matrix = [
    "key1" => [
        'value1',
        'value2',
    ],
    "key2" => [
        'value3',
    ]
];

Question 10

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

Розгорніть фрагмент

Question 11

    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
старе значення: Base
нове значення: нове значення

Операція масиву працює. Немає ніяких проблем.

Ітерація:

     Object.keys(myObj['Base']).forEach(function(key, index) {            
        var value = objcons['Base'][key];                   
      }, myObj);