Comment accéder et gérer des objets imbriqués, des tableaux ou du JSON ?
P粉864872812
P粉864872812 2023-10-09 19:02:22
0
2
518

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粉864872812
P粉864872812

répondre à tous (2)
P粉476547076

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

    Connaissances préliminaires

    JavaScript n'a qu'un seul type de données pouvant contenir plusieurs valeurs :Object.Arrayest 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 structurekey -> 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 lanotation par points

    const value = obj.someProperty;

    ounotation entre crochets, si le nom de la propriété n'est pas unnom 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é). QuestionAnalyser 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 leGuide 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, lesdata是一个对象,因此我们可以使用点表示法访问其属性。itemsproprié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ésname. 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 queundefineddes 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

    Utilisezconsole.logconsole.diret 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 utiliserfor...in[MDN]循环对象和for[MDN]tableau de boucles pour parcourir toutes les propriétés/éléments.

    objet

    Pour parcourir toutes les propriétés dedata, nous pouvons parcourir l'objetcomme 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 utiliserObject#hasOwnProperty代码>[MDN].

    Comme alternative àfor...inhasOwnProperty的替代方案,您可以使用Object.keysfor...in ethasOwnProperty, vous pouvez utiliserObject.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.itemsfor...inarray, nous utilisons une bouclefor :

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

    Vous pouvez également utiliserfor...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 arrayforEach

    [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 bouclesfor...of[MDN], qui fonctionnent non seulement avec des tableaux, mais avec n'importe quelObjet itérable:

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

    À chaque itération,for...ofnous 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éralementré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);
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!