Un guide pour maîtriser les objets JavaScript

Les objets sont un élément fondamental de JavaScript, servant d'épine dorsale pour le stockage et la gestion des données. Un objet est une collection de propriétés et chaque propriété est une association entre une clé (ou un nom) et une valeur. Comprendre comment créer, manipuler et utiliser des objets est crucial pour tout développeur JavaScript. Dans cet article, nous explorerons les différentes fonctions d'objet en JavaScript, en fournissant des explications détaillées, des exemples et des commentaires pour vous aider à les maîtriser.

Introduction aux objets en JavaScript

En JavaScript, les objets sont utilisés pour stocker des collections de données et des entités plus complexes. Ils sont créés à l'aide de littéraux d'objet ou du constructeur Object.

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

Propriétés de l'objet

• Object.prototype : Chaque objet JavaScript hérite des propriétés et des méthodes de son prototype.

let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

Méthodes d'objet

1. Objet.assign()

Copie les valeurs de toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible. Il renvoie l'objet cible.

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. Objet.create()

Crée un nouvel objet avec l'objet prototype et les propriétés spécifiés.

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3. Objet.defineProperties()

Définit de nouvelles propriétés ou modifie des propriétés existantes directement sur un objet, renvoyant l'objet.

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4. Objet.defineProperty()

Définit une nouvelle propriété directement sur un objet ou modifie une propriété existante et renvoie l'objet.

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5. Objet.entrées()

Renvoie un tableau des propres paires de propriétés à clé de chaîne énumérables [clé, valeur] d'un objet donné.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. Objet.freeze()

Gèle un objet. Un objet gelé ne peut plus être modifié ; le gel d'un objet empêche l'ajout de nouvelles propriétés, la suppression des propriétés existantes et la modification des valeurs des propriétés existantes.

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7. Objet.fromEntries()

Transforme une liste de paires clé-valeur en un objet.

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8. Objet.getOwnPropertyDescriptor()

Renvoie un descripteur de propriété pour une propriété propre (c'est-à-dire une propriété directement présente sur un objet et non dans la chaîne de prototypes de l'objet) d'un objet donné.

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9. Objet.getOwnPropertyDescriptors()

Renvoie un objet contenant tous les descripteurs de propriétés propres d'un objet.

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10. Objet.getOwnPropertyNames()

Renvoie un tableau de toutes les propriétés (y compris les propriétés non énumérables, à l'exception de celles qui utilisent Symbol) trouvées directement sur un objet donné.

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11. Objet.getOwnPropertySymbols()

Renvoie un tableau de toutes les propriétés de symbole trouvées directement sur un objet donné.

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12. Objet.getPrototypeOf()

Renvoie le prototype (c'est-à-dire la valeur de la propriété interne [[Prototype]]) de l'objet spécifié.

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. Objet.is()

Détermine si deux valeurs sont identiques.

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14. Objet.isExtensible()

Détermine si l'extension d'un objet est autorisée.

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. Objet.isFrozen()

Détermine si un objet est gelé.

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. Objet.isSealed()

Détermine si un objet est scellé.

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. Objet.keys()

Renvoie un tableau des noms de propriétés énumérables d'un objet donné, itéré dans le même ordre qu'une boucle normale.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. Objet.preventExtensions()

Empêche toute extension d'un objet.

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. Objet.seal()

Scelle un objet, empêchant l'ajout de nouvelles propriétés et marquant toutes les propriétés existantes comme non configurables. Les valeurs des propriétés actuelles peuvent toujours être modifiées tant qu'elles sont accessibles en écriture.

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. Objet.setPrototypeOf()

Définit le prototype (c'est-à-dire la propriété interne [[Prototype]]) d'un objet spécifié sur un autre objet ou null.

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. Objet.valeurs()

Renvoie un tableau des valeurs de propriétés énumérables d'un objet donné, dans le même ordre que celui fourni par une boucle for...in.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

Exemples pratiques

Exemple 1 : Clonage d'un objet

Utiliser Object.assign() pour cloner un objet.

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

Exemple 2 : Fusion d'objets

Utiliser Object.assign() pour fusionner des objets.

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!