Définitions d'objets JavaScript
Méthodes pour définir des objets JavaScript
- Utiliser un littéral d'objet
- Utiliser le mot-clé
new - Utiliser un constructeur d'objet
- Utiliser
Object.assign() - Utiliser
Object.create() - Utiliser
Object.fromEntries()
Utiliser un littéral d'objet
Un littéral d'objet est une liste de paires de propriétés clé:valeurs à l'intérieur d'accolades { } .
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Exemple
// Créer un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
}; Utiliser le mot-clé new
Exemple
// Créer un objet
const person = new Object({
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
}); Remarque :
Les exemples ci-dessus font exactement la même chose.
Cependant, il n'est pas nécessaire d'utiliser new Object() .
Pour des raisons de lisibilité, de simplicité et de rapidité d'exécution, utilisez la méthode littéral d'objet .
Les objets écrits sous forme de paires clé-valeur sont similaires à :
- Tableaux associatifs en PHP
- Dictionnaires en Python
- Tables de hachage en C
- Hash maps en Java
- Hashes en Ruby et Perl
JavaScript Object.create()
La méthode Object.create() crée un objet à partir d'un objet existant.
Exemple
// Créer un objet :
const person = {
firstName: "John",
lastName: "Doe"
};
// Créer un nouvel objet
const man = Object.create(person);
man.firstName = "Peter";
JavaScript Object.fromEntries()
ES2019 a ajouté la méthode fromEntries() à JavaScript.
La méthode fromEntries() crée un objet à partir de paires clé/valeur itérables.
Exemple
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits); Support des navigateurs
fromEntries() est une fonctionnalité de ECMAScript 2019 .
ES2019 est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
| Avr 2018 | Jan 2020 | Juin 2018 | Sep 2018 | Mai 2018 |
JavaScript Object.assign()
La méthode Object.assign() copie des propriétés d'un ou plusieurs objets source vers un objet cible.
Exemple
// Créer un objet cible
const person1 = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Créer un objet source
const person2 = {firstName: "Anne",lastName: "Smith"};
// Assigner la source à la cible
Object.assign(person1, person2); En JavaScript, les objets sont rois.
Si vous comprenez les objets, vous comprenez JavaScript.
En JavaScript, presque "tout" est un objet.
- Les objets sont des objets
- Les mathématiques sont des objets
- Les fonctions sont des objets
- Les dates sont des objets
- Les tableaux sont des objets
- Les cartes sont des objets
- Les ensembles sont des objets
Toutes les valeurs JavaScript, sauf les primitives, sont des objets.
Primitives JavaScript
Un type de données primitive est un type de données qui ne peut stocker qu'une seule valeur primitive.
JavaScript définit 7 types de données primitives :
| Type | Valeur d'exemple |
|---|---|
string | "Hello" |
number | 3.14 |
boolean | true |
bigint | 12345678901234 |
null | null |
undefined | undefined |
symbol | symbol |
Immutable
Les valeurs primitives sont immuables (elles sont codées en dur et ne peuvent pas être modifiées).
Si x = 3.14, vous pouvez changer la valeur de x, mais vous ne pouvez pas changer la valeur de 3.14.
| Valeur | Type | Commentaire |
|---|---|---|
| "Hello" | string | "Hello" est toujours "Hello" |
| 3.14 | number | 3.14 est toujours 3.14 |
| true | boolean | true est toujours vrai |
| false | boolean | false est toujours faux |
| null | null | null est toujours null |
| undefined | undefined | undefined est toujours undefined |
Les objets JavaScript sont mutables
Les objets sont mutables : ils sont adressés par référence, et non par valeur.
Si person est un objet, l'instruction suivante ne créera pas une copie de person :
const x = person; L'objet x n'est pas une copie de person. L'objet x est person.
L'objet x et l'objet person partagent la même adresse mémoire.
Toute modification de x changera également person :
Exemple
//Créer un objet
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
// Essayer de créer une copie
const x = person;
// Cela changera l'âge dans person :
x.age = 10;