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

Déclaration de variable JS var, détails d'utilisation let.const

php中世界最好的语言
Libérer: 2018-04-27 11:08:17
original
1932 Les gens l'ont consulté

Cette fois, je vous apporte une explication détaillée de l'utilisation des déclarations de variables JS var et let.const. Quelles sont les précautions pour les déclarations de variables JS var et let.const. , jetons un coup d'oeil.

Déclaration varLa portée d'une variableest restreinte au contexte de son emplacement de déclaration

var x = 0; // x是全局变量,并且赋值为0。
console.log(typeof z); // undefined,因为z还不存在。
function a() { // 当a被调用时,
 var y = 2;  // y被声明成函数a作用域的变量,然后赋值成2。
 console.log(x, y);  // 0 2 
 function b() {    // 当b被调用时,
  x = 3; // 全局变量x被赋值为3,不生成全局变量。
  y = 4; // 已存在的外部函数的y变量被赋值为4,不生成新的全局变量。
  z = 5; // 创建新的全局变量z,并且给z赋值为5。 
 }     // (在严格模式下(strict mode)抛出ReferenceError)
 b();   // 调用b时创建了全局变量z。
 console.log(x, y, z); // 3 4 5
}
a();          // 调用a时同时调用了b。
console.log(x, z);   // 3 5
console.log(typeof y); // undefined,因为y是a函数的本地(local)变量。
Copier après la connexion

Une variable déclarée par let n'est disponible qu'au sein du bloc ou du sous-bloc dans lequel il est déclaré, la portée de var est la fonction englobante entière

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}
function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}
Copier après la connexion

Dans ECMAScript 2015, les liaisons let ne sont pas soumises au levage de variables, ce qui signifie que les déclarations let ne sont pas hissées en haut du contexte d’exécution actuel.
Avant que la variable dans le bloc ne soit initialisée, la référencer provoquera une ReferenceError (au contraire, utiliser var pour déclarer qu'une variable n'est pas définie)
Lorsqu'elle est utilisée dans un bloc, let ramènera la portée de la variable à Limitée à ce bloc. Notez que la portée de var est dans la fonction dans laquelle elle est déclarée

var a = 1;
var b = 2;
if (a === 1) {
 var a = 11; // the scope is global
 let b = 22; // the scope is inside the if-block
 console.log(a); // 11
 console.log(b); // 22
} 
console.log(a); // 11
console.log(b); // 2
Copier après la connexion

const Une constante doit spécifier sa valeur au moment de la déclaration La déclaration

const crée une lecture. -seulement référence à la valeur. Mais cela ne signifie pas que la valeur qu'elle détient est immuable (par exemple, le contenu de référence est un objet), mais l'identifiant de la variable ne peut pas être réaffecté. Une constante ne peut pas avoir le même nom que d'autres variables ou fonctions dans sa portée

<.>
// 注意: 常量在声明的时候可以使用大小写,但通常情况下全部用大写字母。 
// 定义常量MY_FAV并赋值7
const MY_FAV = 7;
// 报错
MY_FAV = 20;
// 输出 7
console.log("my favorite number is: " + MY_FAV);
// 尝试重新声明会报错 
const MY_FAV = 20;
// MY_FAV 保留给上面的常量,这个操作会失败
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;
// 注意块范围的性质很重要
if (MY_FAV === 7) { 
  // 没问题,并且创建了一个块作用域变量 MY_FAV
  // (works equally well with let to declare a block scoped non const variable)
  let MY_FAV = 20;
  // MY_FAV 现在为 20
  console.log('my favorite number is ' + MY_FAV);
  // 这被提升到全局上下文并引发错误
  var MY_FAV = 20;
}
// MY_FAV 依旧为7
console.log("my favorite number is " + MY_FAV);
// 常量要求一个初始值
const FOO; // SyntaxError: missing = in const declaration
// 常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 重写对象和上面一样会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内,下面这个声明会成功执行
MY_OBJECT.key = "otherValue";
// 也可以用来定义数组
const MY_ARRAY = [];
// It's possible to push items into the array
// 可以向数组填充数据
MY_ARRAY.push('A'); // ["A"]
// 但是,将一个新数组赋给变量会引发错误
MY_ARRAY = ['B']
Copier après la connexion

Ce qui suit présente les trois façons de déclarer des variables en javascript : var, let, const.

var déclare des variables globales. En d'autres termes, les variables déclarées dans la

boucle for peuvent également être utilisées après être sorties de la boucle for.

for(var i=0;i<=1000;i++){ 
var sum=0; 
sum+=i; 
} 
alert(sum);
Copier après la connexion
La somme déclarée à l'intérieur de la boucle for peut être utilisée lors de la sortie de la boucle for, et le résultat apparaîtra normalement sans erreur

let : Déclarer des variables au niveau du bloc. , c'est-à-dire des variables locales.

Dans l'exemple ci-dessus, si vous sortez de la boucle for et utilisez à nouveau la variable sum, une erreur sera signalée. Elle a une portée stricte. La variable ne s'applique qu'au bloc de code auquel elle appartient actuellement. La même variable ne peut pas être définie à plusieurs reprises et ne peut pas être déclarée dans Lorsqu'elle est appelée avant, elle doit être définie avant utilisation, et une erreur sera signalée. Vous pouvez utiliser let

dans le corps de la boucle. 'use strict' ; avant de pouvoir utiliser let pour déclarer des variables, sinon les résultats ne seront pas affichés lors de la navigation,

const : utilisé pour déclarer des constantes, a également une portée au niveau du bloc et peut également être déclaré à niveau de bloc.

const PI=3.14;
Copier après la connexion
C'est la même chose que let, et la même variable ne peut pas être définie à plusieurs reprises. Une fois const défini, elle ne peut pas être modifiée.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment obtenir la position des éléments DOM dans JS

À quoi vous devez faire attention dans le développement front-end de Vue

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal