JavaScript Récupération des propriétés d'un objet


Exemple

Caractéristiques des propriétés:

Les propriétés pouvant être extraites d'un objet peuvent avoir les caractéristiques suivantes:

  • Enumerable
  • Non Enumerable
  • posséder

Lors de la création des propriétés à l'aide de Object.defineProperty (s) , nous avons pu définir ses caractéristiques sauf "own" . Les propriétés disponibles au niveau direct et non au niveau du prototype ( __proto__ ) d'un objet sont appelées propriétés propres .

Et les propriétés ajoutées à un objet sans utiliser Object.defindProperty(ies) n'auront pas sa caractéristique énumérable. Cela signifie qu'il doit être considéré comme vrai.

But de l'énumérabilité:

Le principal objectif de la définition des caractéristiques énumérables d'une propriété est de rendre la propriété particulière disponible lors de sa récupération à partir de son objet, en utilisant différentes méthodes de programmation. Ces différentes méthodes seront discutées en profondeur ci-dessous.

Méthodes de récupération des propriétés:

Les propriétés d'un objet peuvent être récupérées par les méthodes suivantes,

  1. for..in boucle

    Cette boucle est très utile pour récupérer les propriétés énumérables d'un objet. De plus, cette boucle récupérera les propriétés propres énumérables et effectuera la même récupération en parcourant la chaîne prototype jusqu'à ce que le prototype soit considéré comme nul.

    //Ex 1 : Simple data
    var x = { a : 10 , b : 3} , props = [];
    
    for(prop in x){
      props.push(prop);
    }
    
    console.log(props); //["a","b"]
    
    //Ex 2 : Data with enumerable properties in prototype chain
    var x = { a : 10 , __proto__ : { b : 10 }} , props = [];
    
    for(prop in x){
      props.push(prop);
    }
    
    console.log(props); //["a","b"]
    
    //Ex 3 : Data with non enumerable properties
    var x = { a : 10 } , props = [];
    Object.defineProperty(x, "b", {value : 5, enumerable : false});
    
    for(prop in x){
      props.push(prop);
    }
    
    console.log(props); //["a"]
    
  2. Object.keys()

    Cette fonction a été dévoilée dans le cadre d'EcmaScript 5. Elle est utilisée pour extraire les propres propriétés énumérables d'un objet. Avant sa publication, les utilisateurs récupéraient leurs propres propriétés à partir d'un objet en combinant la fonction for..in et la fonction Object.prototype.hasOwnProperty() .

    //Ex 1 : Simple data
    var x = { a : 10 , b : 3} , props;
    
    props = Object.keys(x);
    
    console.log(props); //["a","b"]
    
    //Ex 2 : Data with enumerable properties in prototype chain
    var x = { a : 10 , __proto__ : { b : 10 }} , props;
    
    props = Object.keys(x);
    
    console.log(props); //["a"]
    
    //Ex 3 : Data with non enumerable properties
    var x = { a : 10 } , props;
    Object.defineProperty(x, "b", {value : 5, enumerable : false});
    
    props = Object.keys(x);
    
    console.log(props); //["a"]
    
  1. Object.getOwnProperties()

    Cette fonction récupère les propriétés propres à un objet, énumérables et non énumérables. Il a également été publié dans le cadre d'EcmaScript 5.

    //Ex 1 : Simple data
    var x = { a : 10 , b : 3} , props;
    
    props = Object.getOwnPropertyNames(x);
    
    console.log(props); //["a","b"]
    
    //Ex 2 : Data with enumerable properties in prototype chain
    var x = { a : 10 , __proto__ : { b : 10 }} , props;
    
    props = Object.getOwnPropertyNames(x);
    
    console.log(props); //["a"]
    
    //Ex 3 : Data with non enumerable properties
    var x = { a : 10 } , props;
    Object.defineProperty(x, "b", {value : 5, enumerable : false});
    
    props = Object.getOwnPropertyNames(x);
    
    console.log(props); //["a", "b"]
    

Divers:

Une technique pour récupérer toutes les propriétés (propres, énumérables, non énumérables, tous les prototypes) à partir d'un objet est donnée ci-dessous,

function getAllProperties(obj, props = []){
  return obj == null ? props :
           getAllProperties(Object.getPrototypeOf(obj),
               props.concat(Object.getOwnPropertyNames(obj)));
}

var x = {a:10, __proto__ : { b : 5, c : 15 }};

//adding a non enumerable property to first level prototype
Object.defineProperty(x.__proto__, "d", {value : 20, enumerable : false});

console.log(getAllProperties(x)); ["a", "b", "c", "d", "...other default core props..."]

Et cela sera supporté par les navigateurs supportant EcmaScript 5.