ES6의 var, let, const, 블록 수준 범위 및 임시 데드존 소개

이 글은 ES6의 var, let, const, 블록 수준 범위 및 임시 데드존에 대해 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

var

Syntax

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

사용

var a, b=2 // 声明多个变量，可以赋值，也可以不赋值
a=1 // 先声明，再赋值

var 변수 승격

var을 사용하여 선언된 변수는 함수의 최상위로 승격됩니다.

console.log(a) // undefined
var a =2  
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

위 코드는

var a
console.log(a) // undefined
a=2
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

0x002 let

Syntax

rr과 같습니다. 리

사용

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

더 이상 개선되지 않음

let a, b = 2 // 声明多个变量，赋值不赋值无所谓
a = 2 // 声明之后再赋值

참고:맞추어, babel을 사용하여 코드를 번역하고 let가 var가 되는 것을 확인하세요. > 따라서 babel을 사용한 후에도 코드는 계속 개선될 것입니다babel翻译一下代码发现，只是let变成了var，所以使用babel转义之后的代码依旧会提升

不能重复声明

console.log(a) // Uncaught ReferenceError: a is not defined...
let a=1

 const

语言

let a=1
let a=2 // Uncaught SyntaxError: Identifier 'a' has already been declared

使用

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

不能省略的值

const a=1, b=2 // 不能省略的值

不能重复赋值

const c // Uncaught SyntaxError: Missing initializer in const declaration

可以修改的引用

const d=4
d=5 // Uncaught TypeError: Assignment to constant variable.

 块级作用域

块级作用域是随着let、const而来最有用的特性了，在之前的js中，js的作用域是函数级的，由此带来的几个臭名昭著的问题：

意外被修改的值

const e=[]
e[0]=0
console.log(e) //[0]

可以使用let避免了

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

万恶的for循环和点击事件

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

如果点击上面，不管点击哪个，显示出来的都是Item 5 is clicked.，虽然可以使用闭包解决，但是现在有了更好的方案

var list = document.getElementById("list");

for (var i = 0; i < 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}
console.log(i) // 5

作用域规则很简单

{}块内形成一个作用域，包括if、else、while、class、do...while、{}、function

let list = document.getElementById("list");

for (let i = 0; i < 5; i++) {
  let item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}

for循环中用let声明一个初始因子，该因子在每个循环内都是一个新的作用域

{
    const f=6
}
console.log(f) // Uncaught ReferenceError: f is not defined

switch只有一个作用域

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i) // Uncaught ReferenceError: i is not defined

暂存死区-Temporal Dead Zone-TDZ

随着let和const的引入，也引入了暂存死区的概念。使用var的时候，作用域内（函数作用域），在还没使用var声明一个变量的时候，访问该变量，将会获得undefined。但是如果使用let，作用域（块级作用域）内，在还没使用let声明一个变量的时候，访问该变量，将会获得ReferenceError，从作用域开始到let语句之间，就是暂存死区。

switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; 
    break;
}
// Uncaught SyntaxError: Identifier 'foo' has already been declared

注意：猜测， 使用babel翻译一下代码发现，只是let变成了var，所以使用babel

반복적으로 선언할 수 없습니다🎜

{
 console.log(a) // Uncaught ReferenceError: a is not defined
 console.log(b) // Uncaught ReferenceError: b is not defined
 console.log(c) // undefined
 // 暂存死区
 let a =1
 const b=2
 var c=3
}

🎜 const🎜🎜언어🎜rrreee🎜use🎜rrreee🎜생략할 수 없는 값🎜rrreee🎜 반복적으로 할당할 수 없습니다🎜rrreee🎜 수정 가능한 참조🎜rrreee🎜 블록 수준 범위🎜🎜 블록 수준 범위는 let 및 const에서 제공되는 가장 유용한 기능입니다. 이전 js에서는 js의 범위가 함수 수준에 있었습니다. 몇 가지 악명 높은 문제가 발생했습니다. 🎜🎜실수로 값이 수정됨 ​​🎜rrreee🎜 let을 사용하여 🎜rrreee🎜for 루프 및 클릭 이벤트를 방지할 수 있습니다🎜rrreee🎜위를 클릭하면 상관없습니다. 어느 것을 클릭하면 항목 5를 클릭했습니다.가 표시됩니다. 비록 클로저를 사용하여 해결할 수 있지만 이제는 더 나은 솔루션이 있습니다🎜rrreee🎜범위 규칙은 매우 간단합니다🎜🎜{}if, else, while, class를 포함하여 /code> 블록 내에 범위가 형성됩니다. >, do...while, {}, 함수🎜rrreee🎜for 사용 let 루프 내에서 각 루프 내에서 새로운 범위인 초기 요소를 선언합니다🎜rrreee🎜<code>스위치에는 범위가 하나만 있습니다🎜rrreee🎜Temporal Dead Zone-Temporal Dead Zone-TDZ🎜🎜With With let과 const의 도입으로 임시 데드존 개념도 도입되었습니다. var를 사용할 때 범위(함수 범위) 내에서 var를 사용하여 선언하지 않고 변수에 액세스하면 정의되지 않은 상태가 됩니다. 그러나 범위(블록 수준 범위) 내에서 let을 사용하는 경우 let을 사용하여 선언하기 전에 변수에 액세스하면 범위 시작부터 let 문까지 일시적인 오류가 발생합니다. 구역. 🎜rrreee🎜🎜참고: 🎜 짐작컨대, babel을 사용하여 코드를 번역한 결과 let가 var가 되었기 때문에 babel를 사용하여 이스케이프한 후 일시적인 데드존이 없을 수도 있습니다🎜

위 내용은 ES6의 var, let, const, 블록 수준 범위 및 임시 데드존 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!