(İç içe geçmiş) bir veri yapısı içeren nesneleri ve diziler var. Nasıl bilgi, yani erişim belirli bir veya birden fazla değerler (veya anahtarları) ayıklamak miyim?

Örneğin:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

Nasıl items ikinci maddenin name erişebilecek miyim?

Ön hazırlıklar

JavaScript birden çok değer içeren tek bir veri türü vardır:Nesne. BirDizinesne özel bir şeklidir.

(Normal) bir form var

{key: value, key: value, ...}

Diziler şeklinde

[value, value, ...]

Hem diziler ve nesneler key -> value bir yapı kullanır. Bir dizideki anahtarları herhangi bir dize nesneleri tuşu olarak kullanılabilir ise sayısal olmalıdır. Anahtar-değer çiftleri de denir< . "özellikleri".

Özelliklerini kullanarak da erişilebilirnokta gösterim

var value = obj.someProperty;

yaköşeli parantez açıklamasıeğer özellik adı geçerli bir JavaScript olurdu değil identifier name ^[spec] ya da adını bir değişken değeri:

// the space is not a valid character in identifier names
var value = obj["some Property"];

// property name as variable
var name = "some Property";
var value = obj[name];

Bu nedenle, bir dizi öğelerini tek erişilen köşeli parantez açıklaması kullanarak:

var value = arr[5]; // arr.5 would be a syntax error

// property name / index as variable
var x = 5;
var value = arr[x];

JSON ne? bekle...

Veri JSON, XML, YAML, CSV, ve diğerleri gibi metinsel gösterimidir. Bu veri ile çalışmak için önce JavaScript veri türleri, yani diziler ve nesneler (ve nasıl bu sadece anlatıldı) dönüştürülecek. JSON ayrıştırmak için nasıl soru Parse JSON in JavaScript? olarak açıklanmıştır .

Verilere yapılar iç içe

İç içe veri yapısı bir dizi diğer diziler veya nesneler anlamına gelir nesne, yani değerlerini diziler veya nesneler vardır. Bu tür yapıların arka arkaya nokta veya parantez gösterimde uygulayarak ulaşılabilir.

İşte bir örnek:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

Hadi ikinci maddenin name erişim için istediğimizi varsayalım.

Yapabileceğimiz ne ise onu adım adım:

data bir nesne gördüğünüz gibi, bu yüzden özellikleri nokta işaretini kullanarak erişebiliriz. items özelliği aşağıdaki gibi erişilir

data.items

Değeri bir dizi, ikinci öğesi erişmek için köşeli parantez açıklaması kullanın

data.items[1]

Bu değer, bir nesne ve nokta işaretini tekrar name özelliği erişmek için kullanıyoruz. Biz sonunda, bu yüzden:

var item_name = data.items[1].name;

Alternatif olarak, özellikle adı gösterimde kullanım nokta için geçersiz ilan eden karakterler içeriyorsa, bu özellik için köşeli parantez açıklaması kullanılan yapabiliriz:

var item_name = data['items'][1]['name'];

Bir özelliğe erişmek için çalışıyorum ama sadece undefined geri alabilir miyim?

undefined nesne/dizi alıyorsanız çoğu zaman sadece bu isimde bir özelliği yok.

var foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined

console.log ya console.dir kullanımı ve nesne / dizi yapısını incelemek. Erişmeye çalıştığınız özellik aslında iç içe geçmiş bir nesne / bir dizi tanımlanabilir.

console.log(foo.bar.baz); // 42

Özellik adlarını dinamik ve onları önceden bilmem ne?

Eğer bu özellik isimleri bilinmeyen ya da istediğimiz için erişim tüm özellikleri bir nesne / elemanları bir dizi, biz-ebilmek kullanma for...in ^[MDN] döngü için nesneleri ve for ^[MDN] döngü için diziler üzerinde yineleme tüm özellikleri / unsurları.

data tüm özellikleri üzerinde yineleme için yineleme üzerindenesnebunun gibi

for(var prop in data) {
    // `prop` contains the name of each property, i.e. `'code'` or `'items'`
    // consequently, `data[prop]` refers to the value of each property, i.e.
    // either `42` or the array
}

Bağlı olduğu nesne geliyor (ve yapmak istediğini), yapman gereken şeyi test edip her yineleme özelliği gerçekten bir özelliğin nesne, ya da kalıtsal bir özellik. Object#hasOwnProperty ^[MDN] ile yapabilirsiniz.

data.items tüm öğeler üzerinde yinelemedizibiz kullanmak for döngü

for(var i = 0, l = data.items.length; i < l; i  ) {
    // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration
    // we can access the next element in the array with `data.items[i]`, example:
    // 
    // var obj = data.items[i];
    // 
    // Since each element is an object (in our example),
    // we can now access the objects properties with `obj.id` and `obj.name`. 
    // We could also use `data.items[i].id`.
}

Ayrıca for...in dizi üzerinde yineleme için kullanmak olabilir, ama bu kaçınılmalıdır neden nedenleri vardır: Why is 'for(var item in list)' with arrays considered bad practice in JavaScript?.

5, Dizi yöntem ECMA artan tarayıcı desteği ile forEach ^[MDN] de ilginç bir alternatif olur

data.items.forEach(function(value, index, array) {
    // The callback is executed for each element in the array.
    // `value` is the element itself (equivalent to `array[index]`)
    // `index` will be the index of the element in the array
    // `array` is a reference to the array itself (i.e. `data.items` in this case)
}); 

Ne "derinlik veri yapısı" bana bilinmeyen?

Bilinmeyen anahtarlar ek olarak, "derinlik veri yapısı (dizi başına kaç tane iç içe geçmiş nesneler gibi) vardır", bilinmeyen de olabilir. Tam bir veri yapısına bağlıdır içe geçmiş özelliklerini nasıl?

Eğer veri yapısı yinelenen yapılar, örneğin bir ikili ağaç gösterimi varsa, çözüm genellikle 72 ** veri yapısının her düzeyde erişim içerir.

Burada ikili bir ağaç ilk yaprak düğüm için bir örnek:

function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild); // <- recursive call
    }
    else if (node.rightChild) {
        return getLeaf(node.rightChild); // <- recursive call
    }
    else { // node must be a leaf node
        return node;
    }
}

var first_leaf = getLeaf(root);

DEMO

Daha genel bilinmeyen anahtarlar ve derinliği ile iç içe bir veri yapısı erişim için bir yol değeri türü test ve buna göre hareket etmektir.

Burada bir dizi (herhangi bir fonksiyon içermiyor varsayarak) içine yuvalanmış bir veri yapısı içinde tüm ilkel değerler katan bir örnek. Biz bir nesneyi (veya bir dizi) ile karşılaşırsanız biz sadece toArray tekrar değeri (özyinelemeli çağrı) çağrısı.

function toArray(obj) {
    var result = [];
    for (var prop in obj) {
        var value = obj[prop];
        if (typeof value === 'object') {
            result.push(toArray(value)); // <- recursive call
        }
        else {
            result.push(value);
        }
    }
    return result;
}

DEMO

Yardımcıları

Karmaşık bir nesne ya da dizi yapısı mutlaka belli olmadığından her adımın değerini daha ileriye taşımak için nasıl karar inceleyebiliriz. console.log ^[MDN] console.dir ^[MDN] bunu yapmak için yardımcı olur. Örneğin (Krom çıkış konsolu):

> console.log(data.items)
 [ Object, Object ]

Burada data.items iki nesne olan iki öğe ile bir dizi olduğunu görüyoruz. Krom konsol nesneleri bile ve hemen genişletilmiş kontrol edilebilir.

> console.log(data.items[1])
  Object
     id: 2
     name: "bar"
     __proto__: Object

Bu data.items[1] bir nesne olduğunu söyler ve genişleyen sonra üç özellikleri id, name __proto__ görüyoruz. İkincisi, bir iç özelliği nesnenin prototip zinciri için kullanılır. Prototip zinciri ve miras bu cevap için kapsam dışına çıkıyor.

Daha fazla okuma malzemesi

Diziler ve nesneleri erişmek için nasıl temel JavaScript bilgisi ve bu nedenle MDN JavaScript Guide, bölümleri özellikle okumak için tavsiye edilir

• Working with Objects
• Arrays