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
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
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
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
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
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
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)
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. (iequerySelectorAll
,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
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
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
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 (...)
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:
- propriété data : le nom de la propriété est associé à une valeur.
- 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
ouwritable
ou les deux - Champs facultatifs:
configurable
,enumerable
Échantillon:
{
value: 10,
writable: true;
}
Descripteurs d'accès -
- Champs obligatoires:
get
ouset
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
esttrue
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
esttrue
si et seulement si cette propriété apparaît lors de l'énumération des propriétés sur l'objet correspondant. -
writable
esttrue
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 surundefined
. -
get
est une fonction qui sert de getter pour la propriété, ouundefined
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é, ouundefined
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 surundefined
. - 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 .
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.
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,
for..in
boucleCette 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"]
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 fonctionObject.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"]
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 ()
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 ()
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