Recherche…


Syntaxe

  • objet = {}
  • object = new Object ()
  • object = Object.create (prototype [, propertiesObject])
  • object.key = valeur
  • object ["key"] = valeur
  • objet [Symbol ()] = valeur
  • object = {key1: value1, "key2": valeur2, 'key3': valeur3}
  • object = {conciseMethod () {…}}
  • object = {[computed () + "key"]: valeur}
  • Object.defineProperty (obj, propertyName, propertyDescriptor)
  • property_desc = Object.getOwnPropertyDescriptor (obj, propertyName)
  • Object.freeze (obj)
  • Object.seal (obj)

Paramètres

Propriété La description
value La valeur à affecter à la propriété.
writable Si la valeur de la propriété peut être modifiée ou non.
enumerable Si la propriété sera énumérée dans for in boucles for in ou non.
configurable S'il sera possible de redéfinir le descripteur de propriété ou non.
get Une fonction à appeler qui renverra la valeur de la propriété.
set Une fonction à appeler lorsque la propriété est assignée à une valeur.

Remarques

Les objets sont des collections de paires clé-valeur ou de propriétés. Les clés peuvent être String s ou Symbol s, et les valeurs sont des primitives (nombres, chaînes, symboles) ou des références à d'autres objets.

En JavaScript, un nombre important de valeurs sont des objets (par exemple des fonctions, des tableaux) ou des primitives qui se comportent comme des objets immuables (nombres, chaînes, booléens). On peut accéder à leurs propriétés ou aux propriétés de leur prototype utilisant la obj.prop point ( obj.prop ) ou crochet ( obj['prop'] ). Les exceptions notables sont les valeurs spéciales undefined et null .

Les objets sont référencés en JavaScript, et non en valeur. Cela signifie que lorsque copiés ou transmis comme arguments à des fonctions, la "copie" et l'original sont des références au même objet, et une modification de ses propriétés changera la même propriété de l'autre. Cela ne s'applique pas aux primitives qui sont immuables et transmises par valeur.

Object.keys

5

Object.keys(obj) renvoie un tableau des clés d'un objet donné.

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!"
};

var keys = Object.keys(obj);

console.log(keys); // ["a", "b", "c"]

Clonage peu profond

6

La fonction Object.assign() d' Object.assign() peut être utilisée pour copier toutes les propriétés énumérables d'une instance d' Object existante vers une nouvelle.

const existing = { a: 1, b: 2, c: 3 };

const clone = Object.assign({}, existing);

Cela inclut les propriétés Symbol en plus des propriétés String .

La déstructuration des objets repos / propagation, qui est actuellement une proposition de l'étape 3, offre un moyen encore plus simple de créer des clones peu profonds d'instances d'objet:

const existing = { a: 1, b: 2, c: 3 };

const { ...clone } = existing;

Si vous devez prendre en charge d'anciennes versions de JavaScript, la méthode la plus compatible pour cloner un objet consiste à itérer manuellement ses propriétés et à filtrer les propriétés héritées à l'aide de .hasOwnProperty() .

var existing = { a: 1, b: 2, c: 3 };

var clone = {};
for (var prop in existing) {
  if (existing.hasOwnProperty(prop)) {
    clone[prop] = existing[prop];
  }
}

Object.defineProperty

5

Cela nous permet de définir une propriété dans un objet existant en utilisant un descripteur de propriété.

var obj = { };

Object.defineProperty(obj, 'foo', { value: 'foo' });

console.log(obj.foo);

Sortie de la console

foo

Object.defineProperty peut être appelée avec les options suivantes:

Object.defineProperty(obj, 'nameOfTheProperty', {
  value: valueOfTheProperty, 
  writable: true, // if false, the property is read-only
  configurable : true, // true means the property can be changed later
  enumerable : true // true means property can be enumerated such as in a for..in loop
});

Object.defineProperties vous permet de définir plusieurs propriétés à la fois.

var obj = {};
Object.defineProperties(obj, {
  property1: {
    value: true,
    writable: true
  },
  property2: {
    value: 'Hello',
    writable: false
  }      
});

Propriété en lecture seule

5

En utilisant des descripteurs de propriétés, nous pouvons créer une propriété en lecture seule et toute tentative de modification de sa valeur échouera silencieusement, la valeur ne sera pas modifiée et aucune erreur ne sera émise.

La propriété writable en writable dans un descripteur de propriété indique si cette propriété peut être modifiée ou non.

var a  = { };

Object.defineProperty(a, 'foo', { value: 'original', writable: false });

a.foo = 'new';

console.log(a.foo);

Sortie de la console

original

Propriété non énumérable

5

Nous pouvons éviter qu'une propriété apparaisse for (... in ...) boucles for (... in ...)

La propriété enumerable du descripteur de propriété indique si cette propriété sera énumérée lors de la lecture en boucle des propriétés de l'objet.

var obj = { };

Object.defineProperty(obj, "foo", { value: 'show', enumerable: true });
Object.defineProperty(obj, "bar", { value: 'hide', enumerable: false });

for (var prop in obj) {
    console.log(obj[prop]);
}

Sortie de la console

montrer

Description de la propriété de verrouillage

5

Un descripteur de propriété peut être verrouillé afin qu'aucune modification ne puisse y être apportée. Il sera toujours possible d'utiliser la propriété normalement, en lui assignant et en récupérant la valeur, mais toute tentative de redéfinition entraînera une exception.

La propriété configurable du descripteur de propriété est utilisée pour interdire toute autre modification sur le descripteur.

var obj = {};

// Define 'foo' as read only and lock it
Object.defineProperty(obj, "foo", { 
    value: "original value", 
    writable: false, 
    configurable: false
});
 
Object.defineProperty(obj, "foo", {writable: true});

Cette erreur sera lancée:

TypeError: impossible de redéfinir la propriété: foo

Et la propriété sera toujours en lecture seule.

obj.foo = "new value";
console.log(foo);

Sortie de la console

valeur d'origine

Propriétés de l'accesseur (get et set)

5

Traitez une propriété comme une combinaison de deux fonctions, l'une pour en obtenir la valeur, et l'autre pour y définir la valeur.

La propriété get du descripteur de propriété est une fonction qui sera appelée pour récupérer la valeur de la propriété.

La propriété set est également une fonction, elle sera appelée lorsque la propriété a reçu une valeur et la nouvelle valeur sera transmise en tant qu'argument.

Vous ne pouvez pas affecter une value ou writable à un descripteur qui a get ou set

var person = { name: "John", surname: "Doe"};
Object.defineProperty(person, 'fullName', { 
    get: function () { 
        return this.name + " " + this.surname;
    },
    set: function (value) {
        [this.name, this.surname] = value.split(" ");
    }
});

console.log(person.fullName); // -> "John Doe"

person.surname = "Hill";
console.log(person.fullName); // -> "John Hill"

person.fullName = "Mary Jones";
console.log(person.name) // -> "Mary"

Propriétés avec des caractères spéciaux ou des mots réservés

Bien que la notation de propriété d'objet soit généralement écrite sous la forme myObject.property , cela n'autorisera que les caractères normalement présents dans les noms de variables JavaScript , principalement des lettres, des nombres et des traits de soulignement ( _ ).

Si vous avez besoin de caractères spéciaux, tels que de l'espace, du contenu fourni par l'utilisateur, cela est possible en utilisant la notation [] .

myObject['special property ☺'] = 'it works!'
console.log(myObject['special property ☺'])

Propriétés à tous les chiffres:

En plus des caractères spéciaux, les noms de propriété qui contiennent tous les chiffres nécessiteront une notation entre crochets. Cependant, dans ce cas, la propriété n'a pas besoin d'être écrite sous forme de chaîne.

myObject[123] = 'hi!' // number 123 is automatically converted to a string
console.log(myObject['123']) // notice how using string 123 produced the same result
console.log(myObject['12' + '3']) // string concatenation
console.log(myObject[120 + 3]) // arithmetic, still resulting in 123 and producing the same result
console.log(myObject[123.0]) // this works too because 123.0 evaluates to 123
console.log(myObject['123.0']) // this does NOT work, because '123' != '123.0'

Toutefois, les zéros non significatifs ne sont pas recommandés car ils sont interprétés comme une notation octale. (TODO, nous devrions produire et lier un exemple décrivant la notation octale, hexadécimale et exposante)

Voir aussi: [Les tableaux sont des objets]

Noms de propriété dynamiques / variables

Parfois, le nom de la propriété doit être stocké dans une variable. Dans cet exemple, nous demandons à l'utilisateur quel mot doit être recherché, puis fournissons le résultat à partir d'un objet que j'ai nommé dictionary .

var dictionary = {
    lettuce: 'a veggie',
    banana: 'a fruit',
    tomato: 'it depends on who you ask',
    apple: 'a fruit',
    Apple: 'Steve Jobs rocks!' // properties are case-sensitive
}

var word = prompt('What word would you like to look up today?')
var definition = dictionary[word]
alert(word + '\n\n' + definition)

Notez comment nous utilisons la notation [] pour examiner la variable nommée word ; si nous devions utiliser le traditionnel . la notation, alors elle prendrait littéralement la valeur, d'où:

console.log(dictionary.word)  // doesn't work because word is taken literally and dictionary has no field named `word`
console.log(dictionary.apple) // it works! because apple is taken literally

console.log(dictionary[word]) // it works! because word is a variable, and the user perfectly typed in one of the words from our dictionary when prompted
console.log(dictionary[apple]) // error! apple is not defined (as a variable)

Vous pouvez également écrire des valeurs littérales avec la notation [] en remplaçant le word variable par une chaîne 'apple' . Voir [Propriétés avec caractères spéciaux ou mots réservés] exemple.


Vous pouvez également définir des propriétés dynamiques avec la syntaxe de parenthèse:

var property="test";
var obj={
 [property]=1;
};

console.log(obj.test);//1

Il fait la même chose que:

var property="test";
var obj={};
obj[property]=1;

Les tableaux sont des objets

Clause de non-responsabilité: la création d'objets de type tableau n'est pas recommandée. Cependant, il est utile de comprendre leur fonctionnement, en particulier lorsque vous travaillez avec DOM. Cela expliquera pourquoi les opérations de tableau régulières ne fonctionnent pas sur les objets DOM renvoyés par de nombreuses fonctions de document DOM. (ie querySelectorAll , form.elements )

En supposant que nous ayons créé l'objet suivant qui a des propriétés que vous pouvez vous attendre à voir dans un tableau.

var anObject = {
    foo: 'bar',
    length: 'interesting',
    '0': 'zero!',
    '1': 'one!'
};

Ensuite, nous allons créer un tableau.

var anArray = ['zero.', 'one.'];

Maintenant, remarquez comment nous pouvons inspecter à la fois l'objet et le tableau.

console.log(anArray[0], anObject[0]); // outputs: zero.  zero!
console.log(anArray[1], anObject[1]); // outputs: one.  one!
console.log(anArray.length, anObject.length); // outputs: 2 interesting
console.log(anArray.foo, anObject.foo); // outputs: undefined bar

Depuis anArray est en fait un objet, tout comme anObject , nous pouvons même ajouter des propriétés personnalisées verbeux à anArray

Clause de non-responsabilité: les tableaux avec des propriétés personnalisées ne sont généralement pas recommandés car ils peuvent être source de confusion, mais ils peuvent être utiles dans les cas avancés où vous avez besoin des fonctions optimisées d'un tableau. (ie objets jQuery)

anArray.foo = 'it works!';
console.log(anArray.foo);

Nous pouvons même rendre anObject un objet de type tableau en ajoutant une length .

anObject.length = 2;

Ensuite, vous pouvez utiliser le style C for boucle pour parcourir un anObject comme s'il s'agissait d'un tableau. Voir Itération du tableau

Notez que anObject est uniquement un objet de type tableau . (également connu sous le nom de liste) Ce n'est pas un vrai tableau. Ceci est important, car les fonctions comme push et forEach (ou toute fonction pratique trouvée dans Array.prototype ) ne fonctionneront pas par défaut sur les objets de type tableau.

La querySelectorAll fonctions du document DOM querySelectorAll une liste (c.-à-d. querySelectorAll , form.elements ) qui est similaire à l’ anObject nous avons créé ci-dessus. Voir Conversion d'objets de type tableau en tableaux

console.log(typeof anArray == 'object', typeof anObject == 'object'); // outputs: true  true
console.log(anArray instanceof Object, anObject instanceof Object); // outputs: true  true
console.log(anArray instanceof Array, anObject instanceof Array); // outputs: true  false
console.log(Array.isArray(anArray), Array.isArray(anObject)); // outputs: true  false

Object.freeze

5

Object.freeze rend un objet immuable en empêchant l'ajout de nouvelles propriétés, la suppression de propriétés existantes et la modification de l'énumérabilité, de la configurabilité et de la facilité d'écriture des propriétés existantes. Cela empêche également la modification des propriétés existantes. Cependant, cela ne fonctionne pas de manière récursive, ce qui signifie que les objets enfants ne sont pas automatiquement gelés et sont sujets à modification.

Les opérations qui suivent le gel échoueront silencieusement, à moins que le code ne s'exécute en mode strict. Si le code est en mode strict, une TypeError sera lancée.

var obj = {
  foo: 'foo',
  bar: [1, 2, 3],
  baz: {
    foo: 'nested-foo'
  }
};

Object.freeze(obj);

// Cannot add new properties
obj.newProperty = true;

// Cannot modify existing values or their descriptors
obj.foo = 'not foo';
Object.defineProperty(obj, 'foo', {
    writable: true
});

// Cannot delete existing properties
delete obj.foo;

// Nested objects are not frozen
obj.bar.push(4);
obj.baz.foo = 'new foo';

Object.seal

5

Object.seal empêche l'ajout ou la suppression de propriétés d'un objet. Une fois qu'un objet a été scellé, ses descripteurs de propriétés ne peuvent plus être convertis en un autre type. Contrairement à Object.freeze il permet de modifier les propriétés.

Les tentatives de faire ces opérations sur un objet scellé échouent silencieusement

var obj = { foo: 'foo', bar: function () { return 'bar'; } };

Object.seal(obj)

obj.newFoo = 'newFoo';
obj.bar = function () { return 'foo' };

obj.newFoo; // undefined
obj.bar(); // 'foo'

// Can't make foo an accessor property
Object.defineProperty(obj, 'foo', { 
    get: function () { return 'newFoo'; }
}); // TypeError

// But you can make it read only
Object.defineProperty(obj, 'foo', { 
    writable: false
}); // TypeError

obj.foo = 'newFoo';
obj.foo; // 'foo';

En mode strict, ces opérations lancent une TypeError

(function () {
    'use strict';

    var obj = { foo: 'foo' };

    Object.seal(obj);

    obj.newFoo = 'newFoo'; // TypeError
}());

Créer un objet Iterable

6
var myIterableObject = {};
// An Iterable object must define a method located at the Symbol.iterator key:
myIterableObject[Symbol.iterator] = function () {
  // The iterator should return an Iterator object
  return {
    // The Iterator object must implement a method, next()
    next: function () {
      // next must itself return an IteratorResult object 
      if (!this.iterated) {
        this.iterated = true;
        // The IteratorResult object has two properties
        return {
          // whether the iteration is complete, and
          done: false,
          // the value of the current iteration
          value: 'One'
        };
      }
      return {
        // When iteration is complete, just the done property is needed
        done: true
      };
    },
    iterated: false
  };
};

for (var c of myIterableObject) {
  console.log(c); 
}

Sortie de la console

Un

Repos objet / propagation (...)

7

La diffusion d'objets n'est que du sucre syntaxique pour Object.assign({}, obj1, ..., objn);

Cela se fait avec l'opérateur ...

let obj = { a: 1 };

let obj2 = { ...obj, b: 2, c: 3 };

console.log(obj2); // { a: 1, b: 2, c: 3 };

En tant que Object.assign , la fusion est superficielle et non profonde.

let obj3 = { ...obj, b: { c: 2 } };

console.log(obj3); // { a: 1, b: { c: 2 } };

NOTE : Cette spécification est actuellement à l' étape 3

Descripteurs et propriétés nommées

Les propriétés sont membres d'un objet. Chaque propriété nommée est une paire de (nom, descripteur). Le nom est une chaîne qui permet l'accès (en utilisant la notation par points object.propertyName ou l' object['propertyName'] notation entre crochets object['propertyName'] ). Le descripteur est un enregistrement de champs définissant le bevahiour de la propriété à laquelle il est accédé (ce qui arrive à la propriété et quelle est la valeur renvoyée pour y accéder). En gros, une propriété associe un nom à un comportement (on peut considérer le comportement comme une boîte noire).

Il existe deux types de propriétés nommées:

  1. propriété data : le nom de la propriété est associé à une valeur.
  2. propriété accesseur : le nom de la propriété est associé à une ou deux fonctions d'accès.

Manifestation:

obj.propertyName1 = 5; //translates behind the scenes into
                       //either assigning 5 to the value field* if it is a data property
                //or calling the set function with the parameter 5 if accessor property


//*actually whether an assignment would take place in the case of a data property
//also depends on the presence and value of the writable field - on that later on

Le type de la propriété est déterminé par les champs de son descripteur et une propriété ne peut pas être des deux types.

Descripteurs de données -

  • Champs obligatoires: value ou writable ou les deux
  • Champs facultatifs: configurable , enumerable

Échantillon:

{
   value: 10,
   writable: true;
}

Descripteurs d'accès -

  • Champs obligatoires: get ou set ou les deux
  • Champs facultatifs: configurable , enumerable

Échantillon:

{
    get: function () {
        return 10;
    },
    enumerable: true
}

signification des champs et leurs valeurs par défaut

configurable , enumerable et writable :

  • Ces touches sont toutes false par défaut.
  • configurable est true si et seulement si le type de ce descripteur de propriété peut être modifié et si la propriété peut être supprimée de l'objet correspondant.
  • enumerable est true si et seulement si cette propriété apparaît lors de l'énumération des propriétés sur l'objet correspondant.
  • writable est true si et seulement si la valeur associée à la propriété peut être modifiée avec un opérateur d'affectation.

get et set :

  • Ces touches sont undefined par défaut sur undefined .
  • get est une fonction qui sert de getter pour la propriété, ou undefined s'il n'y a pas de getter. La fonction return sera utilisée comme valeur de la propriété.
  • set est une fonction qui sert de setter pour la propriété, ou undefined s'il n'y a pas de setter. La fonction recevra comme seul argument la nouvelle valeur affectée à la propriété.

value :

  • Cette clé est undefined défaut sur undefined .
  • La valeur associée à la propriété. Peut être une valeur JavaScript valide (nombre, objet, fonction, etc.).

Exemple:

    var obj = {propertyName1: 1}; //the pair is actually ('propertyName1', {value:1,
                                                                    // writable:true,
                                                                    // enumerable:true,
                                                                    // configurable:true})
    Object.defineProperty(obj, 'propertyName2', {get: function() {
                                                    console.log('this will be logged ' + 
                                 'every time propertyName2 is accessed to get its value');
                                                },
                                            set: function() {
                                                    console.log('and this will be logged ' + 
                                'every time propertyName2\'s value is tried to be set')
                      //will be treated like it has enumerable:false, configurable:false
                                                }});
//propertyName1 is the name of obj's data property 
//and propertyName2 is the name of its accessor property





obj.propertyName1 = 3;
console.log(obj.propertyName1); //3

obj.propertyName2 = 3; //and this will be logged every time propertyName2's value is tried to be set
console.log(obj.propertyName2); //this will be logged every time propertyName2 is accessed to get its value 

Object.getOwnPropertyDescriptor

Obtenir la description d'une propriété spécifique dans un objet.

var sampleObject = {
    hello: 'world'
};

Object.getOwnPropertyDescriptor(sampleObject, 'hello');
// Object {value: "world", writable: true, enumerable: true, configurable: true}

Clonage d'objets

Lorsque vous voulez une copie complète d'un objet (à savoir les propriétés de l'objet et les valeurs à l'intérieur de ces propriétés, etc.), cela s'appelle le clonage profond .

5.1

Si un objet peut être sérialisé en JSON, vous pouvez en créer un clone avec une combinaison de JSON.parse et JSON.stringify :

var existing = { a: 1, b: { c: 2 } };
var copy = JSON.parse(JSON.stringify(existing));
existing.b.c = 3; // copy.b.c will not change

Notez que JSON.stringify convertira les objets Date en représentations de chaîne au format ISO, mais JSON.parse ne convertira pas la chaîne en Date .

Il n'y a pas de fonction intégrée dans JavaScript pour créer des clones profonds, et il n'est généralement pas possible de créer des clones profonds pour chaque objet pour de nombreuses raisons. Par exemple,

  • les objets peuvent avoir des propriétés non énumérables et masquées qui ne peuvent pas être détectées.
  • les getters et les setters d'objet ne peuvent pas être copiés.
  • les objets peuvent avoir une structure cyclique.
  • Les propriétés de la fonction peuvent dépendre de l'état dans une étendue cachée.

En supposant que vous ayez un objet "sympa" dont les propriétés ne contiennent que des valeurs primitives, des dates, des tableaux ou d'autres objets "sympas", la fonction suivante peut être utilisée pour créer des clones profonds. C'est une fonction récursive qui peut détecter des objets avec une structure cyclique et qui jettera une erreur dans de tels cas.

function deepClone(obj) {
    function clone(obj, traversedObjects) {
        var copy;
        // primitive types
        if(obj === null || typeof obj !== "object") {
            return obj;
        }

        // detect cycles
        for(var i = 0; i < traversedObjects.length; i++) {
            if(traversedObjects[i] === obj) {
                throw new Error("Cannot clone circular object.");
            }
        }

        // dates
        if(obj instanceof Date) {
            copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        }
        // arrays
        if(obj instanceof Array) {
            copy = [];
            for(var i = 0; i < obj.length; i++) {
                copy.push(clone(obj[i], traversedObjects.concat(obj)));
            }
            return copy;
        }
        // simple objects
        if(obj instanceof Object) {
            copy = {};
            for(var key in obj) {
                if(obj.hasOwnProperty(key)) {
                    copy[key] = clone(obj[key], traversedObjects.concat(obj));
                }
            }
            return copy;
        }
        throw new Error("Not a cloneable object.");
    }

    return clone(obj, []);
}

Objet.assigner

La méthode Object.assign () permet de copier les valeurs de toutes les propriétés enumerable d'un ou plusieurs objets source dans un objet cible. Il retournera l'objet cible.

Utilisez-le pour affecter des valeurs à un objet existant:

var user = {
    firstName: "John"
};

Object.assign(user, {lastName: "Doe", age:39});
console.log(user); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

Ou pour créer une copie superficielle d'un objet:

var obj = Object.assign({}, user);

console.log(obj); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

Ou fusionner plusieurs propriétés de plusieurs objets en un seul:

var obj1 = {
    a: 1
};
var obj2 = {
    b: 2
};
var obj3 = {
    c: 3
};
var obj = Object.assign(obj1, obj2, obj3);

console.log(obj); // Logs: { a: 1, b: 2, c: 3 }
console.log(obj1); // Logs: { a: 1, b: 2, c: 3 }, target object itself is changed

Les primitives seront encapsulées, null et indéfini seront ignorés:

var var_1 = 'abc';
var var_2 = true;
var var_3 = 10;
var var_4 = Symbol('foo');

var obj = Object.assign({}, var_1, null, var_2, undefined, var_3, var_4);
console.log(obj); // Logs: { "0": "a", "1": "b", "2": "c" }

Notez que seuls les wrappers peuvent avoir leurs propres propriétés énumérables

Utilisez-le comme réducteur: (fusionne un tableau avec un objet)

return users.reduce((result, user) => Object.assign({}, {[user.id]: user})

Itération des propriétés d'objet

Vous pouvez accéder à chaque propriété appartenant à un objet avec cette boucle

for (var property in object) {
    // always check if an object has a property
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Vous devez inclure la vérification supplémentaire pour hasOwnProperty car un objet peut avoir des propriétés héritées de la classe de base de l'objet. Ne pas effectuer cette vérification peut générer des erreurs.

5

Vous pouvez également utiliser la fonction Object.keys qui renvoie un tableau contenant toutes les propriétés d'un objet, puis vous pouvez parcourir ce tableau avec la fonction Array.map ou Array.forEach .

var obj = { 0: 'a', 1: 'b', 2: 'c' };

Object.keys(obj).map(function(key) {
    console.log(key);
}); 
// outputs: 0, 1, 2

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

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.

Convertir les valeurs d'un objet en tableau

Compte tenu de cet objet:

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!",
};

Vous pouvez convertir ses valeurs en un tableau en procédant comme suit:

var array = Object.keys(obj)
    .map(function(key) {
        return obj[key];
    });

console.log(array); // ["hello", "this is", "javascript!"]

Itération sur les entrées d'objet - Object.entries ()

8

La méthode Object.entries() proposée renvoie un tableau de paires clé / valeur pour l'objet donné. Il ne renvoie pas d'itérateur comme Array.prototype.entries() , mais le tableau renvoyé par Object.entries() peut être itéré indépendamment.

const obj = {
    one: 1,
    two: 2,
    three: 3
};

Object.entries(obj);

Résulte en:

[
    ["one", 1],
    ["two", 2],
    ["three", 3]
]

C'est un moyen utile d'itérer sur les paires clé / valeur d'un objet:

for(const [key, value] of Object.entries(obj)) {
    console.log(key); // "one", "two" and "three"
    console.log(value); // 1, 2 and 3
}

Object.values ​​()

8

La méthode Object.values() renvoie un tableau de valeurs de propriété énumérables d'un objet donné, dans le même ordre que celui fourni par une boucle for ... in (la différence étant qu'une boucle for-in énumère des propriétés dans la chaîne prototype ainsi que).

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

Remarque:

Pour le support du navigateur, veuillez vous référer à ce lien



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow