Maison > interface Web > js tutoriel > le corps du texte

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

Mary-Kate Olsen
Libérer: 2024-10-18 12:53:04
original
582 Les gens l'ont consulté

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
Copier après la connexion

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)
Copier après la connexion

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']
Copier après la connexion

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]
Copier après la connexion

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]]
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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)
Copier après la connexion

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!'
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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 }
Copier après la connexion

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 } }
Copier après la connexion

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']
Copier après la connexion

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
Copier après la connexion

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

const obj = Object.freeze({ a: 1 });
console.log(Object.isFrozen(obj));  // Output: true
Copier après la connexion

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

const obj = Object.seal({ a: 1 });
console.log(Object.isSealed(obj));  // Output: true
Copier après la connexion

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
Copier après la connexion

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 }
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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 }
  ]
}
*/

Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal