Comment accéder et gérer des objets imbriqués, des tableaux ou du JSON ?

Question

J'ai une structure de données imbriquée contenant des objets et des tableaux. Comment extraire des informations, c'est-à-dire accéder à des valeurs (ou clés) spécifiques ou multiples ?

Par exemple :

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

Comment accéderitems中第二项的name ?

P粉476547076 · Answer

Vous pouvez y accéder de cette façon

data.items[1].name

ou

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

Les deux méthodes sont égales.

P粉002023326 · Answer

Connaissances préliminaires

JavaScript n'a qu'un seul type de données pouvant contenir plusieurs valeurs : Object. Array est une forme spéciale d'objet.

Les objets (normaux) ont la forme suivante

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

La forme du tableau est

[value, value, ...]

Les tableaux et les objets exposent tous deux une structure key -> value. Les clés des tableaux doivent être des nombres, tandis que n'importe quelle chaîne peut être utilisée comme clé dans un objet. Les paires clé-valeur sont également appelées "propriétés".

Les propriétés sont accessibles en utilisant la notation par points

const value = obj.someProperty;

ou notation entre crochets, si le nom de la propriété n'est pas un nom d'identifiant JavaScript valide^[spec], ou si le nom est la valeur d'une variable :

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

Par conséquent, les éléments du tableau ne sont accessibles qu'en utilisant la notation entre crochets :

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

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

Attendez... et JSON ?

JSON est une représentation textuelle de données, tout comme XML, YAML, CSV, etc. Pour traiter de telles données, vous devez d'abord les convertir en types de données JavaScript, à savoir des tableaux et des objets (comment traiter ces données vient d'être expliqué). Question Analyser JSON en JavaScript ? Comment analyser JSON est expliqué dans .

Autres lectures

Comment accéder aux tableaux et aux objets est une base de JavaScript, il est donc recommandé de lire le Guide JavaScript MDN, en particulier les différentes sections

Accéder aux structures de données imbriquées

Une structure de données imbriquée est un tableau ou un objet qui fait référence à d'autres tableaux ou objets, c'est-à-dire que sa valeur est un tableau ou un objet. De telles structures sont accessibles par application successive de notation par points ou parenthèses.

Voici un exemple :

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

Supposons que nous souhaitions accéder au deuxième élément 名称.

Voici comment nous procédons étape par étape :

Comme nous pouvons le voir, les data 是一个对象，因此我们可以使用点表示法访问其属性。 items propriétés sont accessibles comme suit :

data.items

La valeur est un tableau et pour accéder à son deuxième élément nous devons utiliser la notation entre crochets :

data.items[1]

Cette valeur est un objet, et encore une fois nous utilisons la notation par points pour accéder aux propriétés name. On se retrouve donc avec :

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

Alternativement, nous pouvons utiliser la notation entre crochets pour n'importe quel attribut, surtout si le nom contient des caractères qui le rendent invalide pour la notation par points :

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

J'essaie d'accéder à une propriété mais je ne reçois que `undefined`des informations ?

La plupart du temps, lorsque vous rencontrez 未定义, l'objet/le tableau n'a tout simplement pas de propriété portant ce nom.

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

Utilisez console.log 或 console.dir et vérifiez la structure de l'objet/du tableau. Il est possible que la propriété à laquelle vous essayez d'accéder soit réellement définie sur un objet/tableau imbriqué.

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

Et si les noms de propriétés sont dynamiques et que je ne les connais pas à l'avance ?

Si le nom de la propriété est inconnu ou si nous voulons accéder à toutes les propriétés de l'élément objet/tableau, nous pouvons utiliser for...in ^[MDN] 循环对象和 for ^[MDN] tableau de boucles pour parcourir toutes les propriétés/éléments.

objet

Pour parcourir toutes les propriétés de data, nous pouvons parcourir l'objet comme suit :

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
}

En fonction de la provenance de l'objet (et de ce que vous souhaitez faire), vous devrez peut-être tester à chaque itération si la propriété est bien une propriété de l'objet, ou une propriété héritée. Vous pouvez utiliser Object#hasOwnProperty代码> ^[MDN].

Comme alternative à for...in 和 hasOwnProperty 的替代方案，您可以使用 Object.keysfor...in et hasOwnProperty, vous pouvez utiliser ^Object.keys[MDN] Obtenez

tableau de noms d'attribut

:

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

tableau

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

Pour parcourir tous les éléments du

data.items for...inarray, nous utilisons une boucle for :

for(let i = 0, l = data.items.length; i 

Vous pouvez également utiliser for...in pour parcourir un tableau, mais il y a quelques raisons pour lesquelles cela devrait être évité : forEachPourquoi utiliser "for(var item in list)" avec des tableaux en JavaScript est envisagé une mauvaise façon de faire ? .À mesure que la prise en charge par les navigateurs d'ECMAScript 5 continue de croître, la méthode array forEach 
🎜[MDN]🎜🎜🎜 devient également une alternative intéressante : 🎜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)
});

Dans les environnements prenant en charge ES2015 (ES6), vous pouvez également utiliser des boucles for...of ^[MDN], qui fonctionnent non seulement avec des tableaux, mais avec n'importe quel Objet itérable : 

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

À chaque itération, for...of nous donne directement l'élément suivant de l'itérable, sans "index" auquel accéder ou utiliser. 



Que faire si je ne connais pas la « profondeur » de la structure des données ? 

En plus des clés inconnues, la « profondeur » de la structure des données (c'est-à-dire le nombre d'objets imbriqués) peut également être inconnue. La manière dont vous accédez aux propriétés profondément imbriquées dépend souvent de la structure exacte des données. 

Mais si la structure de données contient des modèles répétitifs, comme la représentation d'un arbre binaire, la solution implique généralement récursion ^[Wikipedia]accéder à tous les niveaux de la structure de données. 

Ce qui suit est un exemple d'obtention du premier nœud feuille d'un arbre binaire : 

function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild); // 



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