Maison >interface Web >js tutoriel >Comprendre les méthodes d'objet clé en JavaScript

Comprendre les méthodes d'objet clé en JavaScript

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-18 12:53:04600parcourir

Understanding Key Object Methods in JavaScript

L'objet JavaScript est livré avec un certain nombre de méthodes utiles qui aident les développeurs à manipuler facilement les objets. Passons en revue quelques-uns des plus importants, avec de brèves explications et exemples

  1. Object.create()
  2. Object.assign()
  3. Object.keys()
  4. Object.values()
  5. Object.entries()
  6. Object.freeze()
  7. Object.seal()
  8. Object.preventExtensions()
  9. Object.getPrototypeOf()
  10. Object.setPrototypeOf()
  11. Object.defineProperty()
  12. Object.defineProperties()
  13. Object.getOwnPropertyDescriptor()
  14. Object.getOwnPropertyDescriptors()
  15. Object.getOwnPropertyNames()
  16. Object.is()
  17. Object.isFrozen()
  18. Object.isSealed()
  19. Object.isExtensible()
  20. Object.fromEntries()
  21. Object.hasOwnProperty()
  22. Object.hasOwn()
  23. Object.groupBy() (fonctionnalité proposée, peut ne pas être entièrement disponible)

Object.create()
Object.create() est une méthode en JavaScript utilisée pour créer un nouvel objet avec un objet prototype spécifié et des propriétés facultatives. Il permet un contrôle plus précis sur le prototype et les propriétés d'un objet par rapport à l'utilisation de littéraux ou de constructeurs d'objet.

const personPrototype = {
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const john = Object.create(personPrototype);
john.name = "John";
john.greet();  // Output: Hello, my name is John

Object.assign()
Object.assign() est une méthode JavaScript intégrée utilisée pour copier les valeurs de toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible. Il effectue une copie superficielle et renvoie l'objet cible modifié.

const target = { a: 1 };
const source = { b: 2, c: 3 };
const result = Object.assign(target, source);
console.log(result);  // Output: { a: 1, b: 2, c: 3 }
console.log(target);  // Output: { a: 1, b: 2, c: 3 } (target is also modified)

Object.keys()
Renvoie un tableau des propres noms de propriétés énumérables (clés) de l'objet

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

Object.values()
Renvoie un tableau des propres valeurs de propriétés énumérables de l'objet

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

Object.entries()
Renvoie un tableau des propres paires de propriétés énumérables [clé, valeur] de l'objet

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

Object.freeze()
Gèle l'objet, empêchant l'ajout de nouvelles propriétés ou la modification ou la suppression des propriétés existantes

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2;  // No effect, because the object is frozen
console.log(obj.a);  // Output: 1

Object.seal()
Scelle l'objet, empêchant l'ajout de nouvelles propriétés, mais permet de modifier les propriétés existantes.

const obj = { a: 1 };
Object.seal(obj);
obj.a = 2;  // Allowed
delete obj.a;  // Not allowed
console.log(obj.a);  // Output: 2

Object.preventExtensions()
Empêche l'ajout de nouvelles propriétés à l'objet, mais autorise la modification et la suppression des propriétés existantes

const obj = { a: 1 };
Object.preventExtensions(obj);
obj.b = 2;  // Not allowed
console.log(obj.b);  // Output: undefined

Object.getPrototypeOf()
Renvoie le prototype (c'est-à-dire le [[Prototype]] interne) de l'objet spécifié

const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto);  // Output: {} (the default Object prototype)

Object.setPrototypeOf()
Définit le prototype d'un objet spécifié.

const proto = { greet() { console.log('Hello!'); } };
const obj = {};
Object.setPrototypeOf(obj, proto);
obj.greet();  // Output: 'Hello!'

Object.defineProperty()
Définit une nouvelle propriété sur un objet ou modifie une propriété existante, avec des options supplémentaires pour les descripteurs de propriété (par exemple, inscriptible, configurable).

const obj = {};
Object.defineProperty(obj, 'a', {
  value: 42,
  writable: false,  // Cannot modify the value
});
obj.a = 100;  // No effect because writable is false
console.log(obj.a);  // Output: 42

Object.defineProperties()
Définit plusieurs propriétés sur un objet avec des descripteurs de propriétés.

const obj = {};
Object.defineProperties(obj, {
  a: { value: 42, writable: false },
  b: { value: 100, writable: true }
});
console.log(obj.a);  // Output: 42
console.log(obj.b);  // Output: 100

Object.getOwnPropertyDescriptor()
Renvoie le descripteur d'une propriété d'un objet.

const obj = { a: 1 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(descriptor);  
// Output: { value: 1, writable: true, enumerable: true, configurable: true }

Object.getOwnPropertyDescriptors()
Renvoie un objet contenant tous les descripteurs de propriétés pour les propres propriétés d'un objet

const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
// Output: { a: { value: 1, writable: true, enumerable: true, configurable: true } }

Object.getOwnPropertyNames()
Renvoie un tableau de toutes les propriétés (y compris celles non énumérables) trouvées directement sur un objet.

const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj));  // Output: ['a', 'b']

Object.is()
Compare si deux valeurs sont identiques (comme === mais gère les cas particuliers comme NaN)

console.log(Object.is(NaN, NaN));  // Output: true
console.log(Object.is(+0, -0));    // Output: false

Object.isFrozen()
Vérifie si un objet est gelé

const obj = Object.freeze({ a: 1 });
console.log(Object.isFrozen(obj));  // Output: true

Object.isSealed()
Vérifie si un objet est scellé.

const obj = Object.seal({ a: 1 });
console.log(Object.isSealed(obj));  // Output: true

Object.isExtensible()
Vérifie si de nouvelles propriétés peuvent être ajoutées à un objet.

const obj = { a: 1 };
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj));  // Output: false

Object.fromEntries()
Convertit un tableau de paires clé-valeur en un objet

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

Object.hasOwnProperty()
Vérifie si un objet possède la propriété spécifiée comme étant propre (non héritée)

const obj = { a: 1 };
console.log(obj.hasOwnProperty('a'));  // Output: true

Object.hasOwn()
Object.hasOwn() est une méthode plus récente introduite dans ES2022 comme alternative à Object.hasOwnProperty(). Il vérifie si un objet possède une propriété directe (propre) avec une clé spécifiée, sans rechercher la chaîne de prototypes.

const obj = {
  name: 'Alice',
  age: 25
};

console.log(Object.hasOwn(obj, 'name'));  // true
console.log(Object.hasOwn(obj, 'gender'));  // false

Object.groupBy
Object.groupBy is a relatively new feature proposed for JavaScript in ECMAScript 2024 that allows you to group objects based on a common criterion. It is not yet widely available across all environments, so it may not work in many browsers or JavaScript engines until fully implemented.

const array = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 },
];

// Group objects by age
const groupedByAge = Object.groupBy(array, item => item.age);

console.log(groupedByAge);

/*
Expected Output:
{
  25: [
    { name: 'Alice', age: 25 },
    { name: 'Charlie', age: 25 }
  ],
  30: [
    { name: 'Bob', age: 30 },
    { name: 'David', age: 30 }
  ]
}
*/

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn