Qu'est-ce que const dans React ?

Const dans React est : 1. La variable déclarée par const est une valeur qui ne peut pas être modifiée ; 2. La portée de const est la même que celle de la commande let ; la commande n'est pas promue ; 4. La valeur déclarée par const Les constantes, comme let, ne peuvent pas être déclarées à plusieurs reprises ; 5. const déclare une constante en lecture seule ;

L'environnement d'exploitation de ce tutoriel : système windows7, version React17 Cette méthode convient à toutes les marques d'ordinateurs.

Const dans React est :

1. Const déclare une constante en lecture seule. Une fois déclarée, la valeur d'une constante ne peut plus être modifiée.

const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.

Le code ci-dessus montre que changer la valeur d'une constante signalera une erreur.

2. Les variables déclarées par const sont des valeurs qui ne peuvent pas être modifiées. Cela signifie qu'une fois qu'une variable const est déclarée, elle doit être initialisée immédiatement et ne peut pas être laissée pour une affectation ultérieure.

const foo;
// SyntaxError: Missing initializer in const declaration

Le code ci-dessus indique que pour const, si vous déclarez simplement sans attribuer de valeur, une erreur sera signalée.

3. La portée de const est la même que celle de la commande let : elle n'est valide que dans la portée au niveau du bloc où se trouve la déclaration.

if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

4. Les constantes déclarées par la commande const ne sont pas promues. Elles ont également une zone morte temporaire et ne peuvent être utilisées qu'après la position déclarée.

if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}

Le code ci-dessus est appelé avant que la constante MAX ne soit déclarée et une erreur est signalée.

5. Les constantes déclarées par const ne peuvent pas être déclarées à plusieurs reprises comme let.

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

6. Pour les variables de type composite, le nom de la variable ne pointe pas vers les données, mais vers l'adresse où se trouvent les données. La commande const garantit uniquement que l'adresse pointée par le nom de la variable reste inchangée, mais ne garantit pas que les données à cette adresse restent inchangées. Vous devez donc être très prudent lorsque vous déclarez un objet comme constante.

const foo = {};
foo.prop = 123;
foo.prop
// 123
foo = {}; // TypeError: "foo" is read-only

Dans le code ci-dessus, la constante foo stocke une adresse qui pointe vers un objet. La seule chose qui est immuable est cette adresse, c'est-à-dire que vous ne pouvez pas pointer foo vers une autre adresse, mais l'objet lui-même est mutable, vous pouvez donc toujours lui ajouter de nouvelles propriétés.

Voici un autre exemple.

const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错

Dans le code ci-dessus, la constante a est un tableau. Le tableau lui-même est accessible en écriture, mais si un autre tableau est affecté à a, une erreur sera signalée.

7. Si vous souhaitez vraiment geler l'objet, vous devez utiliser la méthode Object.freeze.

const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

Dans le code ci-dessus, la constante foo pointe vers un objet gelé, donc l'ajout de nouveaux attributs ne fonctionnera pas et une erreur sera signalée en mode strict.

8. En plus de geler l'objet lui-même, les propriétés de l'objet doivent également être gelées. Vous trouverez ci-dessous une fonction qui fige complètement un objet.

var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, value) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};

ES5 n'a que deux façons de déclarer des variables : la commande var et la commande function. En plus d'ajouter les commandes let et const, ES6 dispose également de deux autres méthodes pour déclarer des variables : la commande d'importation et la commande de classe. Par conséquent, ES6 dispose d’un total de 6 façons de déclarer des variables.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

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!