Quelle est la différence entre var et let/const en javascript ?

Quelle est la différence entre var et let/const en JavaScript ? Cet article présentera var et let/const à tout le monde, afin que tout le monde puisse comprendre la différence entre var et let/const. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. [Recommandation du cours : Tutoriel vidéo JavaScript]

let et const sont nouveaux dans les commandes ES6 sont utilisés pour déclarer des variables. Ces deux commandes sont très différentes de celles var d'ES5, et il existe également quelques différences subtiles entre let et const.

Contenu : La différence entre

var et let/const

1. Portée au niveau du bloc

2. Aucune promotion variable

3. Zone morte temporaire

4. Déclaration non répétable

5. Les variables globales déclarées par let et const ne seront pas suspendues sous l'objet de niveau supérieur

constDeux points à noter concernant la commande :

1. const doit être assigné immédiatement après la déclaration, sinon une erreur sera signalée

2. const Une fois qu'un type simple est déclaré, il ne peut plus être modifié. L'adresse pointée par le pointeur d'un type complexe (tableau, objet, etc.) ne peut pas être modifiée, mais les données internes peuvent être modifiées.

Pourquoi avez-vous besoin d'une portée au niveau du bloc ?

ES5 n'a qu'une portée globale et une portée de fonction, pas une portée au niveau du bloc.

Cela amène de nombreux scénarios déraisonnables :

1. Les variables internes peuvent écraser les variables externes

2. utilisées pour le comptage La variable de boucle est divulguée en tant que variable globale

var tmp = new Date();
function f() {
  console.log(tmp); // 想打印外层的时间作用域
  if (false) {
    var tmp = 'hello world'; // 这里声明的作用域为整个函数
  }
}
f(); // undefined

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]); // i应该为此次for循环使用的变量
}
console.log(i); // 5 全局范围都可以读到

portée au niveau du bloc

1. Portée

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); // 10 内层的n
  }
  console.log(n); // 5 当前层的n
}

1. Les portées au niveau du bloc sont arbitrairement imbriquées

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错 读不到子作用域的变量
}}}};

1. Au niveau du bloc scope divise véritablement le code en blocs

{
let a = ...;
...
}
{
let a = ...;
...
}

Le formulaire ci-dessus, peut être utilisé pour tester certaines idées sans se soucier des noms de variables ou des interférences du monde extérieur .

Fonction de déclaration de portée au niveau bloc :

Déclarez la fonction dans la portée au niveau bloc, car le navigateur doit être compatible avec l'ancien The le code posera quelques problèmes !

Déclarez les fonctions dans une portée au niveau du bloc, de préférence sous la forme de fonctions anonymes .

if(true){
  let a = function () {}; // 作用域为块级 令声明的函数作用域范围更清晰
}

La règle de portée au niveau du bloc d'ES6 permet la déclaration de fonction, qui n'est vraie que lorsque des accolades sont utilisées. Si les accolades ne sont pas utilisées, une erreur sera signalée.

// 报错
'use strict';
if (true)
  function f() {} // 我们需要给if加个{}

Il n'y a pas de promotion variable

Le phénomène de promotion variable : dans le même scope , les variables peuvent être utilisées avant la déclaration et la valeur n'est pas définie

Lors de l'utilisation de var pour déclarer des variables dans ES5, une promotion de variable se produit souvent.

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

Zone morte temporaire :

Dès que vous entrez dans le scope actuel, la variable que vous souhaitez utiliser existe déjà, mais il ne peut pas obtenir, Ce n'est que jusqu'à ce que la ligne de code qui déclare la variable apparaisse que la variable peut être obtenue et utilisée

var tmp = 123; // 声明
if (true) {
  tmp = 'abc'; // 报错 因为本区域有tmp声明变量
  let tmp; // 绑定if这个块级的作用域 不能出现tmp变量
}

La signification de la zone morte temporaire et de l'incapacité de promouvoir variables est :

Afin de réduire les erreurs d'exécution, empêchez l'utilisation de la variable avant qu'elle ne soit déclarée, ce qui peut entraîner un comportement inattendu.

La déclaration répétée des variables n'est pas autorisée

Cette situation s'est produite lors des tests : var a= '声明';const a = '不报错', cette situation est due au fait que Babel est en train de convertir. temps, j'ai effectué quelques traitements et l'ai testé dans la console du navigateur, et j'ai réussi à signaler des erreurs

let, const La déclaration répétée de la même variable dans la même portée n'est pas autorisée

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

Les variables globales déclarées par let et const ne seront pas suspendues sous l'objet de niveau supérieur

1. L'objet de niveau supérieur de l'environnement du navigateur est : window

2. L'objet de niveau supérieur de l'environnement du nœud est : global

3. Variables globales déclarées par var sera accroché sous l'objet de niveau supérieur, mais let et const ne le seront pas. Sera accroché sous l'objet de niveau supérieur. Par exemple, la châtaigne suivante

var a = 1;
// 如果在 Node环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

commande const

1. une fois déclaré, doit être attribué immédiatement

   let p; var p1; // 不报错
   const p3 = '马上赋值'
   const p3; // 报错 没有赋值

   Copier après la connexion

2. const ne peut pas être modifié une fois la valeur déclarée

   Type simple : impossible être modifié

   const p = '不能改变';
   p = '报错'

   Copier après la connexion

   Type complexe : le pointeur de variable ne peut pas être modifié

   Considérez la situation suivante :

   const p = ['不能改动']
   const p2 = {
     name: 'OBKoro1'
   }
   p[0] = '不报错'
   p2.name = '不报错'
   p = ['报错']
   p2 = {
     name: '报错'
   }

   Copier après la connexion

   const所说的一旦声明值就不能改变，实际上指的是：变量指向的那个内存地址所保存的数据不得改动

• 简单类型(number、string、boolean)：内存地址就是值,即常量(一变就报错).

• 复杂类型(对象、数组等)：地址保存的是一个指针，const只能保证指针是固定的(总是指向同一个地址),它内部的值是可以改变的(不要以为const就安全了！)

  所以只要不重新赋值整个数组/对象， 因为保存的是一个指针，所以对数组使用的push、shift、splice等方法也是允许的，你就是把值一个一个全都删光了都不会报错。

> 复杂类型还有函数，正则等，这点也要注意一下。

总结:

再总结一下，看到这些名词，脑子里应该会有对应的理解，如果没有的话，那可以再看看对应的内容。

var和let/const的区别:

1. 块级作用域

2. 不存在变量提升

3. 暂时性死区

4. 不可重复声明

5. let、const声明的全局变量不会挂在顶层对象下面

const命令两个注意点:

1. let可以先声明稍后再赋值,而const在 声明之后必须马上赋值，否则会报错

2. const 简单类型一旦声明就不能再更改，复杂类型(数组、对象等)指针指向的地址不能更改，内部数据可以更改。

let、const使用场景:

1. let使用场景：变量，用以替代var。

2. const使用场景：常量、声明匿名函数、箭头函数的时候。

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

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!