Mảng liên kết đa chiều trong JavaScript

Question 1

Có các kết quả truy vấn sau: (key1 và key2 có thể là bất kỳ văn bản nào)

id   key1     key2     value

1    fred     apple    2
2    mary     orange   10
3    fred     banana   7
4    fred     orange   4
5    sarah    melon    5
...

và tôi muốn lưu trữ dữ liệu trong một lưới (có thể là một mảng) lặp lại tất cả các bản ghi như thế này:

         apple    orange   banana  melon
fred        2        4         7     -
mary        -        10        -     -
sarah       -        -         -     5

Trong PHP, điều này sẽ thực sự dễ dàng, sử dụng các mảng kết hợp:

$result['fred']['apple'] = 2;

Nhưng trong các mảng liên kết JavaScript như thế này không hoạt động. Sau khi đọc rất nhiều hướng dẫn, tất cả những gì tôi có thể nhận được là:

arr=[];
arr[1]['apple'] = 2;

nhưng arr['fred']['apple'] = 2;không hoạt động. Tôi đã thử các mảng đối tượng, nhưng thuộc tính đối tượng không thể là văn bản tự do. Tôi càng đọc hướng dẫn, tôi càng bối rối ...

Mọi ý tưởng đều được hoan nghênh :)

Question 2

Chỉ cần sử dụng một đối tượng JavaScript thông thường, đối tượng này sẽ 'đọc' theo cách giống như các mảng liên kết của bạn. Bạn cũng phải nhớ khởi tạo chúng trước.

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

Nếu bạn đang xem xét các giá trị, bạn có thể có một cái gì đó giống như sau:

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

Nếu nó không phải là một mảng, bạn có thể tạo một đối tượng JS "đa chiều" ...

<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 rất linh hoạt:

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

Khi tôi cần lấy tất cả các phần tử theo một cách tốt đẹp, tôi đã gặp chủ đề SO này "Chuyển ngang mảng / đối tượng kết hợp 2 chiều" - bất kể tên đối với tôi là gì, bởi vì chức năng được tính.

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

Dường như đối với một số ứng dụng, có một cách tiếp cận đơn giản hơn nhiều đối với mảng liên kết đa chiều trong javascript.

Giả sử rằng biểu diễn bên trong của tất cả các mảng thực sự là đối tượng của các đối tượng, nó đã được chứng minh rằng thời gian truy cập cho các phần tử được lập chỉ mục số thực sự giống như đối với các phần tử được lập chỉ mục liên kết (văn bản).
thời gian truy cập cho các phần tử được lập chỉ mục liên kết cấp một không tăng khi số lượng phần tử thực tế tăng lên.

Do đó, có thể có nhiều trường hợp tốt hơn là sử dụng cách tiếp cận chuỗi nối để tạo ra sự tương đương của các phần tử nhiều chiều. Ví dụ:

store['fruit']['apples']['granny']['price] = 10
store['cereal']['natural']['oats']['quack'] = 20

đi đến:

store['fruit.apples.granny.price'] = 10
store['cereal.natural.oats.quack'] = 20

Ưu điểm bao gồm:

không cần khởi tạo các đối tượng con hoặc tìm ra cách kết hợp các đối tượng tốt nhất
thời gian truy cập một cấp. các đối tượng bên trong các đối tượng cần N lần thời gian truy cập
có thể sử dụng Object.keys () để trích xuất tất cả thông tin về thứ nguyên và ..
có thể sử dụng hàm regex.test (chuỗi) và hàm array.map trên các phím để lấy ra chính xác những gì bạn muốn.
không có thứ bậc trong các kích thước.
"dấu chấm" là tùy ý - sử dụng dấu gạch dưới thực sự làm cho regex dễ dàng hơn
có rất nhiều tập lệnh để "làm phẳng" JSON thành và ra khỏi định dạng này
có thể sử dụng tất cả các hàm xử lý mảng đẹp mắt khác trên keylist

Question 7

Nhận giá trị cho một mảng thuộc tính của mảng kết hợp khi tên thuộc tính là một số nguyên:

Bắt đầu với Mảng liên kết trong đó tên thuộc tính là số nguyên:

var categories = [
    {"1":"Category 1"},
    {"2":"Category 2"},
    {"3":"Category 3"},
    {"4":"Category 4"}
];

Đẩy các mục vào mảng:

categories.push({"2300": "Category 2300"});
categories.push({"2301": "Category 2301"});

Lặp qua mảng và làm điều gì đó với giá trị thuộc tính.

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

Đầu ra của bảng điều khiển sẽ giống như sau:

1 : Category 1
2 : Category 2
3 : Category 3
4 : Category 4
2300 : Category 2300
2301 : Category 2301

Như bạn thấy, bạn có thể vượt qua giới hạn mảng kết hợp và đặt tên thuộc tính là một số nguyên.

LƯU Ý: Mảng kết hợp trong ví dụ của tôi là json bạn sẽ có nếu bạn tuần tự hóa một đối tượng Dictionary [].

Question 8

Đừng sử dụng một mảng, hãy sử dụng một đối tượng.

var foo = new Object();

Question 9

Bạn không nhất thiết phải sử dụng Đối tượng, bạn có thể làm điều đó với Mảng đa chiều thông thường.

Đây là giải pháp của tôi mà không có Đối tượng :

// Javascript
const matrix = [];

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

matrix.key2 = [
  'value3',
];

trong PHP tương đương với:

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

Mở rộng đoạn mã

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

Đầu ra:

Cơ sở được tìm thấy
Đã tìm thấy Base.panel.panel_base
giá trị cũ: Cơ sở
giá trị mới: Giá trị mới

Hoạt động của mảng hoạt động. Không có vấn đề gì cả.

Lặp lại:

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