Bagaimana untuk mengakses dan mengendalikan objek bersarang, tatasusunan atau JSON?

Question

Saya mempunyai struktur data bersarang yang mengandungi objek dan tatasusunan. Bagaimana untuk mengekstrak maklumat, iaitu mengakses nilai tertentu atau berbilang (atau kunci)?

Contohnya:

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

Bagaimana untuk mengaksesitems中第二项的name?

P粉476547076 · Answer

Anda boleh mengaksesnya dengan cara ini

data.items[1].name

atau

data["items"][1]["name"]

Kedua-dua kaedah adalah sama.

P粉002023326 · Answer

Pengetahuan awal

JavaScript hanya mempunyai satu jenis data yang boleh mengandungi berbilang nilai: Objek. Array ialah satu bentuk objek yang istimewa.

(Normal) objek mempunyai bentuk berikut

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

Bentuk tatasusunan ialah

[value, value, ...]

Tatasusunan dan objek kedua-duanya mendedahkan struktur key -> value. Kekunci dalam tatasusunan mestilah nombor, manakala sebarang rentetan boleh digunakan sebagai kunci dalam objek. Pasangan nilai kunci juga dipanggil "sifat".

Sifat boleh diakses menggunakan notasi titik

const value = obj.someProperty;

atau notasi kurungan, jika nama sifat bukan JavaScript yang sah nama pengecam^{[spesifikasi]}, atau jika nama itu ialah nilai pembolehubah:

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

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

Oleh itu, elemen tatasusunan hanya boleh diakses menggunakan notasi kurungan:

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

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

Tunggu...bagaimana dengan JSON?

JSON ialah perwakilan teks data, sama seperti XML, YAML, CSV, dll. Untuk memproses data sedemikian, anda perlu menukarnya terlebih dahulu kepada jenis data JavaScript, iaitu tatasusunan dan objek (cara memproses data ini baru dijelaskan). Soalan Menghuraikan JSON dalam JavaScript? Cara menghuraikan JSON dijelaskan dalam . < /p>

Bahan bacaan lanjut

Cara mengakses tatasusunan dan objek adalah asas JavaScript, jadi disyorkan untuk membaca Panduan JavaScript MDN, terutamanya pelbagai bahagian

Akses struktur data bersarang

Struktur data bersarang ialah tatasusunan atau objek yang merujuk tatasusunan atau objek lain, iaitu nilainya ialah tatasusunan atau objek. Struktur sedemikian boleh diakses dengan aplikasi berturut-turut notasi titik atau kurungan.

Berikut adalah contoh:

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

Katakan kita mahu mengakses item kedua 名称.

Begini cara kami melakukannya langkah demi langkah:

Seperti yang kita lihat, data 是一个对象，因此我们可以使用点表示法访问其属性。 items sifat diakses seperti berikut:

data.items

Nilai ialah tatasusunan dan untuk mengakses elemen keduanya, kita perlu menggunakan notasi kurungan:

data.items[1]

Nilai ini ialah objek, dan sekali lagi kami menggunakan notasi titik untuk mengakses sifat name. Jadi kita berakhir dengan:

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

Sebagai alternatif, kita boleh menggunakan notasi kurungan untuk sebarang atribut, terutamanya jika nama itu mengandungi aksara yang menjadikannya tidak sah untuk notasi titik:

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

Saya cuba mengakses hartanah tetapi saya hanya mendapat `undefined` maklumat?

Kebanyakan masa apabila anda menghadapi 未定义, objek/susunan tidak mempunyai sifat dengan nama itu.

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

Gunakan console.log 或 console.dir dan semak struktur objek/susunan. Ada kemungkinan bahawa harta yang anda cuba akses sebenarnya ditakrifkan pada objek/tatasusunan bersarang.

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

Bagaimana jika nama hartanah adalah dinamik dan saya tidak mengenalinya terlebih dahulu?

Jika nama sifat tidak diketahui atau kami ingin mengakses semua sifat objek/elemen tatasusunan, kami boleh menggunakan tatasusunan gelung for...in ^[MDN] 循环对象和 for < em>^[MDN] untuk melelaran ke atas semua sifat/elemen.

objek

Untuk lelaran ke atas semua sifat data, kita boleh lelaran ke atas objek seperti berikut:

for (const 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
}

Bergantung pada asal objek itu (dan perkara yang anda mahu lakukan), anda mungkin perlu menguji pada setiap lelaran sama ada harta itu sememangnya harta objek atau harta warisan. Anda boleh menggunakan Object#hasOwnProperty ^[MDN].

Sebagai alternatif kepada for...in 和 hasOwnProperty 的替代方案，您可以使用 Object.keysuntuk...dalam dan hasOwnProperty, anda boleh menggunakan ^Object.keys[MDN] Dapatkan

susunan nama atribut

:

Object.keys(data).forEach(function(prop) {
  // `prop` is the property name
  // `data[prop]` is the property value
});

susun

data.items 数组的所有元素，我们使用 for

Untuk mengulangi semua elemen

data.items for...inarray, kami menggunakan gelung for:

for(let 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`.
}

Anda juga boleh menggunakan for...in untuk mengulangi tatasusunan, tetapi terdapat beberapa sebab mengapa perkara ini harus dielakkan: forEachMengapa menggunakan "for(var item in list)" dengan tatasusunan dalam JavaScript adalah dianggap cara yang tidak baik? .Memandangkan sokongan pelayar untuk ECMAScript 5 terus berkembang, kaedah tatasusunan forEach

🎜[MDN]🎜🎜🎜 juga menjadi alternatif yang menarik: 🎜

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

Dalam persekitaran yang menyokong ES2015 (ES6), anda juga boleh menggunakan gelung for...of ^[MDN], yang berfungsi bukan sahaja dengan tatasusunan, tetapi dengan mana-mana objek Iterable:

for (const item of data.items) {
   // `item` is the array element, **not** the index
}

Pada setiap lelaran,

memberi kita elemen seterusnya bagi lelaran secara langsung, tanpa "indeks" untuk diakses atau digunakan. for...of

Bagaimana jika saya tidak mengetahui "kedalaman" struktur data?

Selain kekunci yang tidak diketahui, "kedalaman" struktur data (iaitu berapa banyak objek bersarang terdapat) mungkin juga tidak diketahui. Cara anda mengakses sifat bersarang dalam selalunya bergantung pada struktur data yang tepat.

Tetapi jika struktur data mengandungi corak berulang, seperti perwakilan pokok binari, penyelesaian biasanya melibatkan

rekursi < em>[Wikipedia]mengakses setiap peringkat struktur data.

Berikut ialah contoh mendapatkan nod daun pertama pokok binari:

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

const first_leaf = getLeaf(root);

const root = {
    leftChild: {
        leftChild: {
            leftChild: null,
            rightChild: null,
            data: 42
        },
        rightChild: {
            leftChild: null,
            rightChild: null,
            data: 5
        }
    },
    rightChild: {
        leftChild: {
            leftChild: null,
            rightChild: null,
            data: 6
        },
        rightChild: {
            leftChild: null,
            rightChild: null,
            data: 7
        }
    }
};
function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild);
    } else if (node.rightChild) {
        return getLeaf(node.rightChild);
    } else { // node must be a leaf node
        return node;
    }
}

console.log(getLeaf(root).data);